> 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/legacy-csprclick-ui/customizing-the-top-bar/theme-selector.md).

# Theme selector

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
    }}
/>
```