|
|
|
|
|
|
by wildrhythms
874 days ago
|
|
|
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... |
|
|