You can create multiple themes (such as
dark) for your app by putting them in a single
themes.pc file that contains all of your color variables and other theming properties. For example:
Then, be sure to reference these variables in each of your PC files:
After that, the only thing left to do is apply the theme to the component or any ancestor. If you're applying your theme from app code, that might look something like this:
Safety around theming
We can add some safety around theming with visual regresion tests to ensure that components are being stylized correctly, and that no CSS bugs are introduced. For that, I'd recommend you create theme variants for each of your components. Here's an example:
As a rule of thumb, I'd recommend adding theme variants for all components, not just some. That way you're more sure to capture every component state with the visual regression tests.
After that, all that's left to do is run
percy exec -- percy-paperclip, and that will look for visual changes in each component that has a preview. That should help prevent CSS bugs.