[v2] Allow Custom Dark Mode Toggle Emoji

🚀 Feature

https://github.com/facebook/docusaurus/pull/1529 added emojis for the dark mode toggle that uses 🌞 (Sun with Face) and 🌜 (Last Quarter Moon Face).

While this is a nice touch, the choice of these emojis can look a bit un-professional when there are many other choices that are more neutral and less whimsical.

In my project, I have used this piece of CSS to hack around this and replace those emojis with the ☀️ (sun) and 🌙 (crescent-moon) emojis:

.react-toggle-track-check>span::before {
  content: '\1F319';
}
.react-toggle-track-x>span::before {
  content: '\2600';
  color: #ffd557;
}

There are many other options (like an on/off lightbulb) that users may want, so why not make this configurable?

For reference, this is where the emojis are hardcoded in Docusaurus: https://github.com/facebook/docusaurus/blob/5ccd24cc1f07efbd4e7c3fe68937e357c0e44855/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css#L19-L24

And this is where they are set into the component: https://github.com/facebook/docusaurus/blob/5ccd24cc1f07efbd4e7c3fe68937e357c0e44855/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx#L16-L17

[Drewbi]

@adrianmcli That is a good spot to put it, I must have missed seeing this when I was adding documentation. I added a brief example in the API page but I’ll add some more here today. Thanks

[Drewbi]

Feature has been released so we can close this 😃