Dynamic switching between light + dark themes

[marzer]

Per title. Discussed in #5.

An implication of this is that the m.css light theme looks quite different from the dark one (i.e. it's not just a pallette swap); for a dynamic switch to make visual sense a new light theme is necessary, one that is a pixel-perfect match for the dark one.

(The m.css light theme is quite nice, though, so I'd still keep it under a different name).

[mosra]

Related: mosra/m.css#133

I have the exact same TODO, to make a the light theme actually a variant of the dark one, and rename the light theme to something else entirely ("book"? whatever). One possible candidate for a light theme is used at https://aihabitat.org, but even that one would still need to get finished, together with FB branding/colors removed.

[marzer]

Well if I ever get around to actioning this I'll happily contribute it back to m.css, rather than just have it live in poxy :)

[marzer]

So, I started doing a thing...

Obviously a long way to go, heh. @mosra did you do any special design magic to come up with the dark theme's colour palette, or just fiddling over time?

[marzer]

Alright, the proof-of-concept of my light theme is now ready for you to have a look if you're interested, @mosra:

• live demo (click the sun/moon icon in the top-right to switch to light mode)
• m-theme-light.css

I tried to keep it tonally consistent with the dark theme, but there's probably a few obvious places that still need adjusting. If you think this is worth iterating on I'll be happy to contribute it to m.css when I get back from my vacation.

[mosra]

did you do any special design magic

I used Inkscape to fiddle with the pallete, especially for the various colored components, and then copied the colors to CSS. In https://github.com/mosra/m.css/tree/master/artwork there's colors-dark.svg you can start from.

After that, easiest is to build the m.css website locally (with Pelican) and switch the CSS to a light one in the config. Then look at various hidden test pages such as https://mcss.mosra.cz/css/components/test/ and iterate until your eyes stop bleeding :D

If you make a PR, that'll be the most amazing, but unfortunately I won't be able to look into this anytime soon. October hopefully?