"theming" implementation #13
Description
First of all, what I mean by "theming" is:
- being able to define variables which influence the style
- allow components to be notified (for e.g. re-rendering) when those variables change
- when the active theme's variable change, this effect is propagated automatically to all the interested parties
So going by that concept, by reading the README, I've understood this library does not offer a theming solution.
I've tried to implement it in React
Interesting files
constants.ts
defines the variables for the theme [1st item].
theme.ts
useThemeVariable subscribes to themeChangedCallbacks [2nd item]; due to the fact that it's a hook leveraging useState, the 3rd item is also satisfied.
Button.tsx
Due to useThemeVariable, this components re-renders everytime the theme changes.
What motivated me to do this, initially, was wondering how I'd use Sass' helper functions (darken, lighten, saturate, etc) outside of SCSS files, since that's not directly available with CSS-in-JS. I later found there's the color package for that, so you'd just need to post-process the variable's value after every theme change.
If you feel interested in bringing similar ideas into the library somehow, let me know! And thank you for this project.