-- Leo's gemini proxy

-- Connecting to git.thebackupbox.net:1965...

-- Connected

-- Sending request

-- Meta line: 20 text/gemini

repo: blog
action: blob
revision:
path_from: darkmode
revision_from: refs/heads/master:
path_to:
revision_to:

refs/heads/master:/darkmode
 # 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);
 }
 ```

-- Response ended

-- Page fetched on Sun Jun 2 14:31:08 2024