Colors

Understanding the color system and its application in your theme.

Current Color System is based on @Radix-UI. Special thanks to @WorkOS Team!

Basic Usage

Try out now!

By default, the root ThemeProvider accentColor is violet. To set a different color pass it via the accentColor prop. This will force the theme to use the specified setting.

<ThemeProvider accentColor="gray">
  <App />
</ThemeProvider>

Color scales

There is a number of 12 step color scales available, each with their own light, dark and alpha variants.

Accents

The accent is the most dominant color in your theme, it is used for primary buttons, links and other interactive elements.

Accents Contrast

Every Accent color has matching contrast color. You can access the color by var(--color-red-9-contrast) CSS variable.

Switching AccentColor

You can switch radius by following code.

const { accentColor, onAccentColorChange } = useThemeContext();
const handleAccentColorChange = () => {
  onAccentColorChange('blue');
};

Aliasing Colors

You can remap the theme tokens in place of another and use as you want.

/* Your styles.css */
.woozdesign {
  --color-violet-1: var(--color-other-1);
  --color-violet-2: var(--color-other-2);
  --color-violet-3: var(--color-other-3);
  --color-violet-4: var(--color-other-4);
  --color-violet-5: var(--color-other-5);
  --color-violet-6: var(--color-other-6);
  --color-violet-7: var(--color-other-7);
  --color-violet-8: var(--color-other-8);
  --color-violet-9: var(--color-other-9);
  --color-violet-10: var(--color-other-10);
  --color-violet-11: var(--color-other-11);
  --color-violet-12: var(--color-other-12);
  --color-violet-a1: var(--color-other-a1);
  --color-violet-a2: var(--color-other-a2);
  --color-violet-a3: var(--color-other-a3);
  --color-violet-a4: var(--color-other-a4);
  --color-violet-a5: var(--color-other-a5);
  --color-violet-a6: var(--color-other-a6);
  --color-violet-a7: var(--color-other-a7);
  --color-violet-a8: var(--color-other-a8);
  --color-violet-a9: var(--color-other-a9);
  --color-violet-a10: var(--color-other-a10);
  --color-violet-a11: var(--color-other-a11);
  --color-violet-a12: var(--color-other-a12);
}

Custom Colors

You can make custom color tokens and use as you want.

<ThemeProvider
  colorToken={{
    light: {
      custom: {
        '9': '#ff0000',
      },
    },
    dark: {
      custom: {
        '9': '#00ff00',
      },
    },
  }}
>
  <Button color={'custom'} />
</ThemeProvider>