[bug] v2 doesn't honor defaultDarkMode options

[apsdehal]

🐛 Bug Report

If I set disableDarkMode to true or either set defaultDarkMode to false.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

(Write your steps here:)

1. Add these options.
2. Night mode is active when it shouldn't be

Expected behavior

Should respect these options

Actual Behavior

Options are not respected

Your Environment

• Docusaurus version used:2.0.0-alpha.56
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Node version: v12.17.0
• Operating system and version (desktop or mobile): Ubuntu 16.04

[slorber]

Hi,

What do you mean "at night time", do you have a computer setting that actually change the prefered theme color according to time of the day?

What's the result of window.matchMedia('(prefers-color-scheme: dark)').matches on your computer ?

Can you inspect your current session local storage?
Did you try in a new browser session with a clean local storage?
(it might be that we keep using your last color scheme choice that was toggled when the dark mode was still activated)

Do you have a repro site to test this?

[apsdehal]

Never mind the night mode, I have updated the issue. It seems like v2 doesn't honor defaultDarkMode website. Here is the live website https://mmf.sh and the docusaurus config for it: https://github.com/facebookresearch/mmf/blob/master/website/docusaurus.config.js#L22.

[Update] Since our website was going live, I have disabled the dark mode for now. Please clone and run to reproduce the issue.

[slorber]

@apsdehal it's hard to help you if you don't give me the infos I asked :)

Can you run this to your console and give me the output?

window.matchMedia('(prefers-color-scheme: dark)').matches
localStorage.getItem("theme");

Have you tried in a new browser session?

What's your setup, and what do you expect?

Your site currently has defaultDarkMode: false. I don't know if it's the thing you reverted for production, or if it's the thing you actually want.

Also, what's the expected behavior, and actual behavior?

---

At this point, it's not even clear to me what you want as a final result.

Force light mode? force dark mode? do you want a switch? do you want to set a default value?

[apsdehal]

@slorber Apologies! Here is the information you asked for, tried in a new incognito window with defaultDarkMode: false:

• window.matchMedia('(prefers-color-scheme: dark)').matches returns true
• localStorage.getItem("theme") returns null

Here's what I want:

• I want the default theme to be light regardless of user's preference for dark mode

What I see:

• Regardless of setting defaultDarkMode: false, based on user's preference, docusaurus gives me default dark mode.

What I tried:

• I tried emulating prefers-color-scheme: light through chrome developer tools and can see that I get light mode back.

[slorber]

So basically,,

defaultDarkMode: false

And you want, no matter the user theme config, that he gets light theme by defaul, unless he uses the switch, right?

---

Then we probably need another option, because current system takes user preference into account, and use the fallback if user has no preference.

Also, I think defaultDarkMode: false is not clear. We should make it explicit if defaultDarkMode: undefined and defaultDarkMode: undefined are the same or not.

Will think about it

[apsdehal]

Yes, exactly. There should be an option to set a theme regardless of user settings.

[slorber]

@apsdehal what do you think of this PR?

#2939

[slorber]

Hey all, this is feature is now released!
If you like it, don't forget to retweet 😄
https://twitter.com/docusaurus/status/1286715187983048704