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.
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...