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, define your default theme and a callback function to handle theme change. For example:

const defaultTheme = 'light';

const onThemeChanged =  (theme) => {
    const page = document.querySelector('body');
    if (theme === 'dark') page?.classList.add('dark');
    else page?.classList.remove('dark');
    console.log('Theme switched to', theme);
};

Then, add these two values to the UI initialization object:

const clickUIOptions = {
  uiContainer: 'csprclick-ui', 
  rootAppElement: '#app',
  showTopBar: true,
  defaultTheme,
  onThemeChanged,
};