feat(v2): dark mode toggle customization

[Drewbi]

Motivation

Feature was requested in #3052

Have you read the Contributing Guidelines on pull requests?

Yes

Does it work

The approach I took allows users to include any css that would work in an inline react style prop. This disqualifies attributes such as content as it requires the ::before selector.
This approach allows users to customize the margin or other styling of any text or emoji they choose.

Docs

Added the new fields to the API themeConfig section of the docusaurus.config.js doc

themeConfig: {
    colorMode: {
      defaultMode: 'light',
      disableSwitch: false,
      respectPrefersColorScheme: true,
      switchConfig: {
        darkIcon: '🌙',
        darkIconStyle: {
          marginLeft: '2px',
        },
        lightIcon: '☀️',
        lightIconStyle: {
          marginLeft: '1px',
        },
      },
    },

I was considering including a link to this page where they explain about how react does inline css. Let me know if you think it needs it.

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit 503c613

https://deploy-preview-3127--docusaurus-2.netlify.app

[slorber]

Thanks, that seems almost fine.

I'd like a few changes:

• Fix e2e tests when colorMode=undefined
• Add unit tests for such edge cases so it never happen again
• Add documentation

[slorber]

if that helps here's a pr where I validate algolia theme config: https://github.com/facebook/docusaurus/pull/3133/files

[Drewbi]

I opted to use lodash/merge as the nested config fields were being overwritten if only one of them had been changed. I hope the tests are adequate as well. I previously added the new fields to the API docs, should I add a section about the switch config to the guide as well?

[slorber]

Thanks, that looks nice

mergeDefault should not be used in production code, Joi already does that. it's only useful for the tests

[slorber]

I opted to use lodash/merge as the nested config fields were being overwritten if only one of them had been changed.

What do you mean? which nested config field exactly?
Can you add a test to cover the case you describe?

should I add a section about the switch config to the guide as well?

All config options should be documented, so if it's not in the doc already, it should be added

[Drewbi]

I've added some more comments to the documentation about the styling options.
I also think I finally understand how config validation works now.
Hopefully this should be good to go.

[slorber]

thanks that looks good :)