Read the blog post

Palette

Choose your colors. It is advisable to have a background color, a neutral, a primary and a secondary. But you can add as many as you like.

Also, notice how the number of colors is constant across all themes.

  • background
    100
    200
    300
    400
    500
    600
    700
    800
    900
  • neutral
    100
    200
    300
    400
    500
    600
    700
    800
    900
  • primary
    100
    200
    300
    400
    500
    600
    700
    800
    900
  • secondary
    100
    200
    300
    400
    500
    600
    700
    800
    900
  • accent
    100
    200
    300
    400
    500
    600
    700
    800
    900

Use in your Project

The beauty of this system is that there are no dependencies and you can clearly see everything you add to your system.

You simply copy and paste the following snippet where it's indicated when you hover it.

For any information, please refer to the dedicated blog post.

Copy and paste the shades in your tailwind.config.js configuration, under theme.extend.colors

Add the plugin in tailwind.config.js

Register the plugin in your tailwind.config.js configuration

Add the ThemeManager script in the head of your html. It must come after the CSS Vars

In case you use TypeScript, you may need to add this declaration in the files that use the ThemeManager

Add the color-scheme property to your app.css

Add the CSS vars in the head tag of your html