Skip to content

Improvement to dark mode selection #522

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
andybee opened this issue Mar 12, 2022 · 2 comments
Open

Improvement to dark mode selection #522

andybee opened this issue Mar 12, 2022 · 2 comments

Comments

@andybee
Copy link
Contributor

andybee commented Mar 12, 2022

As I understand the current dark mode implementation looks at the current browser/OS setting first and sets that as a default value, before letting the user customise via the top right toggle.

I have my OS set to flip from light to dark based on sunset/sunrise, so if I visit the site for the first time during the day I'm on the light theme and have to toggle it at sunset to dark, then back to light again the next day etc. (curse you, short daylight of winter!)

Could we add a third option for "OS/Browser default", or not persist a default setting and always check the browser's opinion on page load?

@filmaj
Copy link
Member

filmaj commented Mar 24, 2025

Is doing that even possible? Not sure if I've seen that in the wild.

@andybee
Copy link
Contributor Author

andybee commented Mar 24, 2025

Yep, it's a bit of jiggery pokery with either setting an explicit class on the body/html tag to force dark/light or relying on prefer-colour-scheme media selector.

https://web.dev/articles/prefers-color-scheme#the_prefers-color-scheme_media_query

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

2 participants