Support for custom themes using next-themes?

[williamlmao]

Nextra documentation mentions configuration for next-themes.

Looking at the next-themes docs, it looks like they support additional custom themes, but I have not been able to find a way to pass these values in through Nextra.

Additionally, is it possible to pass in my own custom component for the theme switcher? I didn't see any configuration for that in the docs. Thanks!

[shuding]

Currently the docs theme of Nextra has only dark and light modes, and it's tricky for us to allow customizing everything. What is your actual design and use case? If it's something general enough we can consider supporting that!

[williamlmao]

@shuding, I am creating docs for a UI library that supports custom themes. I want the user to be able to switch themes in the documentation and see how the components change under different themes. You can see what I am talking about here:

https://chimera-tw-docs-git-comments-willliuwillliu.vercel.app/docs/components/Button

I would like the ability to just inject my ThemeSwitcher component into the spot in the sidebar that the Nextra theme switcher lives OR the ability to add additional themes to the switcher. If going with the second option, I would just need that switcher to be able to change the data-theme attribute on the tag. That is actually supposed to be the default behavior of next-themes, but I noticed that the theme switcher on nextra does not change that data attribute.

[sxhuan]

@williamlmao I am having similar requirement, right now, I just change the nextra-theme-docs package source code to replace to my own UI library and theme package, if you are wondering switch theme along with nextra itself, you could add some code like this to switch tailwind css theme mode.

import { useTheme } from 'your-theme-package/theme';
...
  const { theme, setTheme } = useTheme();
...
  useEffect(() => {
    if (theme === 'dark') {
      // add dark class to html element for tailwindcss dark mode
      document.documentElement.classList.add('dark');
    } else {
      // remove dark class from html element for tailwindcss light mode
      document.documentElement.classList.remove('dark');
    }
  }, [theme]);