Changing the system theme resets the Docusaurus theme to the default

[MageJohn]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When the system colour theme changes (the prefers-color-scheme media query changes, that is), a Docusaurus site with respectPrefersColorScheme off sets the theme back to the default, regardless of the system theme or the current site theme as set by the user.

Reproducible demo

https://codesandbox.io/p/sandbox/github/facebook/docusaurus/tree/main/examples/classic

Steps to reproduce

A fresh installation of Docusaurus should work, or the codesandbox.io link above.

1. Put the system in light mode (steps vary based on OS; in essence, make sure the media query prefers-color-scheme: light is true)
2. Click the theme change button to set the Docusaurus site to dark mode
3. Put the system into dark mode (prefers-color-scheme: dark is true)

Expected behavior

Given that respectPrefersColorScheme is off, I'd expect the theme not to change when the system colour scheme changes.

Actual behavior

The theme is reset to the default – light mode in the case of the repro link.

Your environment

• Public source code: See the repro link above
• Public site URL: In addition to the repro, I first discovered this issue when using docs.cypress.io
• Docusaurus version used: 2.4.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Firefox 112.0.2
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 13.3.1

Self-service

• I'd be willing to fix this bug myself.

[vennilamahalingam]

From initial debugging - Irrespective of respectPrefersColorScheme value, every time the system theme is changed, the localstorage value is deleted and so default value(light theme) is set.

May I work on this ?

[vennilamahalingam]

On further deep dive in the codebase, this proves to be a conscious and expected behavior.
It seems to have been agreed by the team that the OS triggered theme changes overrides the user choice - mentioned by @Josh-Cena
More on #7200
This issue is contrary to the above discussion, hence this issue could be closed.

[Josh-Cena]

The problem is that there exists a user action here (setting the mode to dark), so I'd expect it to persist. It's the exact opposite situation as in #7199 (where the button is disabled but respectPrefersColorScheme is on)

[vennilamahalingam]

The problem is that there exists a user action here (setting the mode to dark), so I'd expect it to persist.

#7200 (comment) - this thread here seemed to have agreed on with prioritizing the OS triggered color even when user action is setting to dark mode and also about persist option being unused.
What am I missing here ?

As per what I understand from code, if and when there is a change in the system color mode, window.matchMedia onchange is triggered and the setColorMode(null); resets to default mode which is light.

[MageJohn]

I think there's scope for improving the behaviour, even if it was intended. To me it doesn't make sense that changing the system theme at all should always put a site into light mode.

[Josh-Cena]

Mmm, I think the key is respectPrefersColorScheme is off here, so regardless we shouldn't do anything about system changes. I don't really know though—it's been a while since I've handled this and my memory is all a bit blurry.