# Theme selector

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-16f500db08f349f2e989662c419cd84f2262336c%2Fimage%20(3).png?alt=media" 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,
};
```