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.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 `` component:
```tsx
```
.png?alt=media)