Theme selector

Theme selector widget

CSPR.click can display a theme selector in the top bar so users can switch between the light and dark themes.

During initialization, your application defines the initial theme with defaultTheme. The CSPR.click UI manages its own theme state internally. When the user asks to change the theme, CSPR.click calls your onThemeChanged callback so your application can update its own page styles.

Theme selector setup

Define a default theme and an onThemeChanged callback in window.clickUIOptions.

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);
};

const defaultTheme = 'light';

const clickUIOptions = {
  uiContainer,
  rootAppElement: '#app',
  defaultTheme,
  onThemeChanged,
  accountMenuItems,
  networkSettings,
};

The defaultTheme value can be light or dark. Use onThemeChanged to synchronize your application shell, CSS classes, state store, or design system with the theme selected in the CSPR.click top bar.