Messing around with emotion styled components, emotion-theming, and context.
This app has a React context instance that manages the current theme (dark or light).
Components individually styled by Emotion automatically recieve a theme
prop with the currently selected theme colors thanks to the emotion-theming
package.
Global styles (e.g. src/app.css
) use CSS custom properties to apply theme styles to elements globally. When a theme is applied while the app is running, we update all the custom properties, and the global styles recognize the change automatically. This update happens in the src/context/ThemeContext
module. Custom Property names in CSS files must match up with the keys in the ThemeColors
interface to work correctly (also located in ThemeContext
module).