themeSwitch in the topbar

[jleni]

I would like to have the theme switch in the top bar.
Is this supported?
Any tips on how to do it correctly?

[arno-fukuda]

In your theme.config.tsx

import { ThemeSwitch, LocaleSwitch } from "nextra-theme-docs";


const config: DocsThemeConfig = {
// custom configs

navbar: {
    extraContent: (
      <>
        <LocaleSwitch />
        <ThemeSwitch />
      </>
    ),
  },
};

export default config;

[mrvectopus]

It's possible to set custom className for a component <ThemeSwitch /> in this method? I'm use Tailwind and try this <ThemeSwitch className="text-blue-600" /> but it's not work...

[arno-fukuda]

If you'd like you can create you own custom ThemeSwitcher component and import it.

import MyCustomThemeSwticher from 'components/MyCustomThemeSwticher'

const config: DocsThemeConfig = {
// custom configs

navbar: {
    extraContent: (
      <>
        <LocaleSwitch />
        <MyCustomThemeSwticher />
      </>
    ),
  },
};

export default config;

MyCustomThemeSwticher.js

// add your preferred tailwind style here

const MyCustomThemSwitcher = () => {
   const { setTheme, resolvedTheme } = useTheme(); // you can use these hooks to get the current theme or set change the theme to light or dark

More about it here:
https://github.com/pacocoursey/next-themes?tab=readme-ov-file#usetheme-1