Re:Tailwind Color Palette Generator
by wildrhythms on Friday February 02, 2024 @09:12AM
(#39228669)
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.
[ Parent
| on HN ]
Do u mind sharing some code?
Re:Tailwind Color Palette Generator
by wildrhythms on Friday February 02, 2024 @01:47PM
(#39232557)
1. 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-utili...