Theme selector

CSPR.click navigation bar has two themes: light and dark. You can use one or the other. And if your application also has light and dark modes, you can add to the navigation bar a theme selector to let the user easily change between both.
Theme selector set up
In your application, create a state value to store the current theme. For example, with useState()
hook, but you can use any other method.
const [themeMode, setThemeMode] = useState<ThemeModeType>(ThemeModeType.light);
Next, define a callback function that will be invoked when the theme selector is used to change the theme:
const handleThemeSwitch = () =>
setThemeMode(themeMode === ThemeModeType.light ?
ThemeModeType.dark :
ThemeModeType.light);
Finally, indicate the current theme mode and the theme switch callback method to the <ClickUI>
component:
<ClickUI
themeMode={themeMode}
topBarSettings={{
onThemeSwitch:handleThemeSwitch
}}
/>
Last updated