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

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:

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

• Public source code: https://github.com/juliusmarminge/preferred-theme-test
• Public site URL: https://preferred-theme-test.vercel.app
• Docusaurus version used: 2.1.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Safari, Chrome
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOS 12

Self-service

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