> 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-v1.11/cspr.click-sdk/javascript/customizing-the-top-bar/theme-selector.md).

# Theme selector

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

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:

```javascript
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:

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