Skip to content

Add auto dark mode CSS and assets

Elsie Hupp requested to merge elsiehupp/wiki-web:auto-dark-mode-css into master

Fixes https://gitlab.gnome.org/Infrastructure/wiki-web/-/issues/27. See also Infrastructure/library-web#101.

What I did here was split out the CSS color assignment into separate files for light mode and dark mode, which are imported according to the value of prefers-color-scheme. I converted all of the color values to HSL and then, for the dark-mode CSS, inverted the luminance value while leaving the hue and saturation as is. I did the same with those of the image assets that seemed like they wouldn't work with dark mode.

With splitting the CSS files, I left all of the existing selectors in each of the three variants (geometry, light-mode, and dark-mode), so as to avoid overly restructuring the code. Presumably the code could be structured more elegantly, but I didn't want to mess with the existing light-mode theme.

I have tested this on a static copy of the wiki homepage, but I have not tested it on the live website. I can copy and paste the CSS into a Firefox extension that will let me test it on the live website and then make any changes as necessary. (I just haven't done this, yet.)

The pull request wouldn't actually add the CSS to the wiki, because the CSS used by the wiki is hosted on static.gnome.org. In order to actually use the CSS, the administrator would need to manually copy the contents of the new CSS folder in this pull request to the CSS folder used by the wiki. No changes should need to be made to the HTML whatsoever.

Obviously the approach I used (simply taking prefers-color-scheme at face value) has the drawback of not being straightforward to disable, but implementing a dark-mode switch in the wiki itself would be substantially more complicated, and respecting prefers-color-scheme is a more sensible default than ignoring it.

Merge request reports