💾 Archived View for circumlunar.thebackupbox.net › ~epoch › blog › darkmode captured on 2023-01-29 at 03:24:10. Gemini links have been rewritten to link to archived content
-=-=-=-=-=-=-
I use this add-on in firefox for quickly flipping between light-mode and dark-mode:
https://github.com/rugk/website-dark-mode-switcher/
It is a bit annoying that the page loads and renders using the light-mode
and then when it finishes loading, the add-on flips it to dark-mode.
but that's not an easy thing to fix.
There /is/ and option to over-ride the OS-level dark-vs-light-mode setting using
an about:config setting. ui.systemUsesDarkTheme
I was thinking it would be nice to just have an add-on that I could have toggle values
in about:config so I could toggle whatever I want browser-wide, but they seemed to have
gotten rid of the API for add-ons to have access to about:config.
0 is light, 1 is dark, 2 is no preference, anything else is light.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#Result
There also seems to be two ways of doing darkmode in CSS. One is to use
@media (prefers-color-scheme: dark) {
/* css for dark mode goes here. */
}
@media (prefers-color-scheme: light) {
/* css for light mode goes here. */
}
and the other way, which I haven't tested.
html[data-theme='dark'] {
/* styling that'll set the theme for elements underneath, but they can override. I guess. */
/* something like, setting background color, and applying a filter. maybe:
filter: invert(1) hue-rotate(180deg);
}