2 ms·
This is a nice tool. As another approach that I use in my codebases is I define the color palette with CSS variables, so my Tailwind config just points to those
by wildrhythms 3y ago
This is a nice tool. As another approach that I use in my codebases is I define the color palette with CSS variables, so my Tailwind config just points to those. Then at runtime I can plug in different color themes.
- kkyr 3y agoDo u mind sharing some code?
- wildrhythms 3y ago1. The user picks a desired hex color. 2. At runtime, I use the material-color-utilities library[1] to generate a whole color theme based on that one root color. The applyTheme method puts the theme into CSS variables on the body like --md-sys-color-primary: #c72320; and so on for each color token. 3. In tailwind.config.js I set the colors to point to those variables, for example "primary": "var(--md-sys-color-primary)", and so on for the rest of the colors. Using this approach I can remap colors at runtime for whole subtrees by simply overriding the CSS color variables. [1] https://www.npmjs.com/package/@material/material-color-utilities https://www.npmjs.com/package/@material/material-color-utili...