Search code examples
docusaurus

How do I change the light/dark mode icon in Docusaurus?

Docusaurus has a nice, minimal sun and moon for their light/dark mode button: https://docusaurus.io/

But our Docusaurus page automatically uses a toggle button that shows the moon emoji 🌜 and the sun emoji 🌞. They're cute, but don't fit with our site's overall look.

I couldn't find specifics about this in the Docusaurus user docs or in their API docs. I went into the GitHub repo for Docusaurus and checked out their css files as well as their config.js file. I did the same for some other companies who use Docusaurus, but I can't find the code that generates the light/dark mode button.

Any thoughts?

Solution

  • With Docusarus 2.0.0-beta.17 switchConfig was deprecated.

    As related PR says: colorMode.switchConfig is deprecated. If you want to customize the icons for light and dark mode, swizzle IconLightMode, IconDarkMode, or ColorModeToggle instead.