WIP: Add support for dark mode #533
Conversation
dannycolin
force-pushed
the
join-the-dark-side
branch
from
4b9aabb to
645bba0
Compare
| function setDefaultTheme() { | ||
| const theme = localStorage.getItem('theme'); | ||
| if (!theme) { | ||
| const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)'); | ||
| if (prefersLightTheme.matches) { | ||
| localStorage.setItem("theme", "light"); |
There was a problem hiding this comment.
Oooh, that's a nice angle with just light-dark() having that natively, and setting document.colorScheme for user customization 💟 🚀 — love that approach!
I'd have one wish here though: Please don't store the preference upon first visit, basically unless the user changes the preference from their defaults. The prefers-color-scheme can change over time (my OS sets it light during daylight and dark at sunset, along with any color shift etc.) — this would effectively lock it at a theme based on the moment I've first visited the site.
That's why most of the UIs use a three-way light/dark/auto, to be able to "unset" whatever preference was made back to media preference defaults… To avoid having a third state, I'd imagine just unsetting the cookie every time the theme matches the preferred theme when switching, being a default at that moment, could also mimic an implicit "auto"/reset?
There was a problem hiding this comment.
I'm curious here regarding https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme#declaring_color_scheme_preferences quoting:
"Along with the above CSS, also include the
<meta name="color-scheme">HTML<meta>tag in the<head>, before any CSS style information, to inform user agents about the preferred color scheme, helping prevent unwanted screen flashes during the page load."
Is that relevant to this use per se, or any flashing-after-parsing-the-stored-prefs is avoided elsewhere?
There was a problem hiding this comment.
Please don't store the preference upon first visit, basically unless the user changes the preference from their defaults. The
prefers-color-schemecan change over time (my OS sets itlightduring daylight anddarkat sunset [...] That's why most of the UIs use a three-way light/dark/auto
Oh good point! I will update the implementation to support it.
Is that relevant to this use per se, or any flashing-after-parsing-the-stored-prefs is avoided elsewhere?
I was also wondering if it can happen with the current use case. Maybe we should use a meta tag to be on the safe side. It's only a matter of targeting the tag property instead of document.documentElement so it's an easy modification to make :).
2 participants
This patch adds new CSS styling to support dark mode.