question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reset to OS theme / colorMode should possible

See original GitHub issue

Have you 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

I don’t think this is a bug as much as intended behavior, but I think that intention can be confusing so I’ll post an issue anyways.

Docusaurus is currently handling themes both using local storage, and syncing the user preferences. This often leads to the theme going out of sync:

https://github.com/facebook/docusaurus/blob/cba8be01a3ae058a328004ba281d28c47ac0a25c/packages/docusaurus-theme-classic/src/index.ts#L42-L52

Reproducible demo

https://preferred-theme-test.vercel.app

Steps to reproduce

Lets say at day I toggle the theme on the website to use light mode. That would store a KV-pair { "theme": "light" } in localstorage. I leave the page and when I come back at night my device is now using darkmode, so I’d probably want the page to load in dark mode. However, since the KV-pair is in localstorage, that takes precedence so it loads light mode instead.

Expected behavior

I’d want the page to load in dark mode.

Actual behavior

The page loads the KV pair from localstorage and uses light mode.

Your environment

Self-service

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

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:15

github_iconTop GitHub Comments

1reaction
slorbercommented, Dec 21, 2022

Yes we agree we need 3 states and an icon to represent the new 3rd state.

That’s not really worth pursing this discussion, but rather working on a concrete implementation based on my comments here: https://github.com/facebook/docusaurus/issues/8074#issuecomment-1342662517

1reaction
flying-sheepcommented, Dec 8, 2022

That’s exactly the UX the Python community is converging on. I didn’t have time to expand on it when I wrote my last comment, but here’s basically me saying the exact same things as you just did, https://github.com/rust-lang/this-week-in-rust/issues/2274#issuecomment-1333723860, with some example implementations.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Change to dark or color mode on your Android device
On your phone, open the Settings app. Tap Display. Turn Dark theme on or off. Tip: Dark theme can make your screen easier...
Read more >
Feature request: Dark theme for the website #2274 - GitHub
I presume it's fine to just update the CSS in this repo? We'd just have to make sure to maintain the diff if...
Read more >
prefers-color-scheme - CSS: Cascading Style Sheets | MDN
Detecting a dark theme. The elements below have an initial color theme. They can be further themed according to the user's color scheme ......
Read more >
Change colors in Windows - Microsoft Support
Find out how to change the color of the Start menu, taskbar, and action center with dark and custom mode personalization settings.
Read more >
How do I detect dark mode using JavaScript? - Stack Overflow
How can I detect the OS's preferred color scheme in JavaScript? javascript · macos-darkmode · Share.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found