💾 Archived View for thebackupbox.net › ~epoch › blog › darkmode captured on 2024-12-17 at 10:14:15. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

darkmode..

update 2023-04-24

I found that about:config option

privacy.resistFingerprinting

has a feature that breaks light and dark mode css styling.

so if you're scratching your head why websites stay stuck in light mode

even if about:config's style changes, it is probably this.

there's also another flag I found instead of ui.systemUsesDarkTheme that

can be fiddled with.

layout.css.prefers-color-scheme.content-override

0: force dark, 1: force light, 2: follow system theme, 3: follow browser toolbar theme

originally posted 2022-07-20

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);
}