Customizing Colors

The recommended way to customize Extraction UI color palette is by overriding the custom theme CSS variables.

Basic override

Add an override in your main CSS file, this will also generate all shades automatically:

main.css


:root {
  --color-primary: oklch(0.5 0.22 275);
  --color-neutral: oklch(0.5 0.03 275);
}

Advanced override

For complete control over all shades and their foreground colors, use the advanced approach. You don’t have to use the color-mix formulas. You can set any color you want for each shade and its foreground.

main.css


:root {
  --color-primary: oklch(0.5 0.22 250);
  --color-primary-foreground: color-mix(in oklch, var(--color-primary) 2%, white);
 
  --color-primary-50: color-mix(in oklch, var(--color-primary) 10%, white);
  --color-primary-50-foreground: color-mix(in oklch, var(--color-primary) 50%, black);
 
  --color-primary-100: color-mix(in oklch, var(--color-primary) 20%, white);
  --color-primary-100-foreground: color-mix(in oklch, var(--color-primary) 50%, black);
 
  --color-primary-200: color-mix(in oklch, var(--color-primary) 35%, white);
  --color-primary-200-foreground: color-mix(in oklch, var(--color-primary) 50%, black);
 
  --color-primary-300: color-mix(in oklch, var(--color-primary) 50%, white);
  --color-primary-300-foreground: color-mix(in oklch, var(--color-primary) 50%, black);
 
  --color-primary-400: color-mix(in oklch, var(--color-primary) 75%, white);
  --color-primary-400-foreground: color-mix(in oklch, var(--color-primary) 2%, white);
 
  --color-primary-500: var(--color-primary);
  --color-primary-500-foreground: color-mix(in oklch, var(--color-primary) 2%, white);
 
  --color-primary-600: color-mix(in oklch, var(--color-primary) 85%, black);
  --color-primary-600-foreground: color-mix(in oklch, var(--color-primary) 2%, white);
 
  --color-primary-700: color-mix(in oklch, var(--color-primary) 70%, black);
  --color-primary-700-foreground: color-mix(in oklch, var(--color-primary) 2%, white);
 
  --color-primary-800: color-mix(in oklch, var(--color-primary) 60%, black);
  --color-primary-800-foreground: color-mix(in oklch, var(--color-primary) 2%, white);
 
  --color-primary-900: color-mix(in oklch, var(--color-primary) 50%, black);
  --color-primary-900-foreground: color-mix(in oklch, var(--color-primary) 2%, white);
 
  --color-primary-950: color-mix(in oklch, var(--color-primary) 45%, black);
  --color-primary-950-foreground: color-mix(in oklch, var(--color-primary) 2%, white);
 
  /* ... repeat for shades(50-950) and colors(accent, neutral, success, ...) you want to customize ... */
}