How to Implement Theme Switching Using the ThemeBuilder Exported Packages
Environment
| Product | ThemeBuilder |
| Product Version | Any |
Description
I used ThemeBuilder's variable modes to style my application. I exported the packages for the light and the dark mode, as described in Using Variable Modes. How can I implement theme switching using them?
Solution
You can utilize the packages exported from ThemeBuilder to implement theme switching by following these steps:
- Copy the files inside the
cssfolders and paste them in your application. - Refer to them dynamically based on your workflow:
- To apply the Light mode, load the exported light theme CSS file.
- To apply the Dark mode, load the exported dark theme CSS file.
Limitations
Since the ThemeBuilder styles for each mode are intended to be loaded dynamically, using the ThemeBuilder SCSS output as an NPM package is not feasible. This is because you need to know the path to the source CSS files to load them dynamically. You can either compile the SCSS output before using it or use the CSS output instead. The CSS output is automatically compiled from the SCSS by ThemeBuilder during the export.