Open MageJohn opened 1 year ago
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 ?
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 https://github.com/facebook/docusaurus/pull/7200 This issue is contrary to the above discussion, hence this issue could be closed.
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)
The problem is that there exists a user action here (setting the mode to dark), so I'd expect it to persist.
https://github.com/facebook/docusaurus/pull/7200#discussion_r855219429 - 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.
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.
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.
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.Description
When the system colour theme changes (the
prefers-color-scheme
media query changes, that is), a Docusaurus site withrespectPrefersColorScheme
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.
prefers-color-scheme: light
is true)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
Self-service