> For the complete documentation index, see [llms.txt](https://docs.cspr.click/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cspr.click/cspr.click-sdk/integration/customizing-the-top-bar/theme-selector.md).

# Theme selector

<figure><img src="/files/ySdjriteiERUyDOzZvK6" alt=""><figcaption><p>Theme selector widget</p></figcaption></figure>

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`.

```typescript
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.