Appearance
Change settings at runtime
You can modify dynamic theme settings for content items at runtime without rebuilding your project locally. Instead of directly editing the settings.json file, you can pass parameters through your browser's address bar to override these settings.
Available settings
You can change at runtime the following selectors from settings.json:
themecorresponds to thecurrentthemeschemerefers to the color scheme defined for the themeclmtakescodevalue fromtargetCLMlangcorresponds to thelangsvalue fromlocalization
How to change settings
- Start your project as a live-reload server:sh
wiz dev --live - Open http://localhost:3000/ in your browser
- Add the query parameters to the URL as follows:
?lang=[LANGUAGE_CODE]changes the project localization?theme=[THEME_NAME]changes the theme?theme=[CLM_CODE]changes the target system
You can combine these parameters, connecting them with & to change multiple settings simultaneously. For example,
shell
http://localhost:3000/?lang=ukr&theme=aethercare&clm=irepAccording to this example, your item will switch to:
- Ukrainian localization
- AetherCare theme
- Targeted at the Veeva CRM
Runtime behavior
The implemented structure enables dynamic theme switching without requiring Sass file recompilation. When a theme change occurs:
- The system loads the new theme's
index.scss. - Associated styles from
./common/styles/theme.scssare applied. - Theme changes take effect immediately.
This approach ensures efficient theme management while maintaining application performance.