# Theme selector

<figure><img src="https://595455488-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuweqIvQXaJrOwx2LPs49%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, create a state value to store the current theme. For example, with `useState()` hook, but you can use any other method.

```tsx
const [themeMode, setThemeMode] = useState<ThemeModeType>(ThemeModeType.light);
```

Next, define a callback function that will be invoked when the theme selector is used to change the theme:

```tsx
const handleThemeSwitch = () => 
      setThemeMode(themeMode === ThemeModeType.light ?
            ThemeModeType.dark : 
            ThemeModeType.light);
```

Finally, indicate the current theme mode and the theme switch callback method to the `<ClickUI>` component:

```tsx
<ClickUI
    themeMode={themeMode}
    topBarSettings={{
        onThemeSwitch:handleThemeSwitch
    }}
/>
```
