Theme selector

Theme selector widget

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
    }}
/>