Wanna know more? 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.
- background100200300400500600700800900
- neutral100200300400500600700800900
- primary100200300400500600700800900
- secondary100200300400500600700800900
- accent100200300400500600700800900
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.
- background100200300400500600700800900
- neutral100200300400500600700800900
- primary100200300400500600700800900
- secondary100200300400500600700800900
- accent100200300400500600700800900
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