Switch light / dark theme based on user preference and CSS feature prefers-color-scheme

[ashwinvis]

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

How practical would it be to have an optional light / dark color scheme?

[mosra]

(Sorry for embarrassingly late replies, finally got a chance to get back to this project.)

Technically, this is actually very doable, as most of the styling is derived from seven base colors (default, primary, info, success, warning, danger, dim) and all content including code highlighting and embedded SVG like math equations, graphs or plots follows that.

Practically, the light "theme" I have here is very rudimentary and half-assed 😅 So before implementing this I would have to make sure the two themes complement each other and there aren't any glaring omissions or contrast/accessibility issues in the light version. Not sure when I will be able to get to that (especially given my two-year absence in this project maintenance) but it's definitely something nice to have.

EDIT: Oh -- I like the theme you have on your page. Very nice, and unlike mine, consistent between the light and dark version :)

[ashwinvis]

Thanks... I did try to iron out some accessibility issues, but still, there might be many imperfections. There is a bit of work to extract only the theme related changes from my fork.

The latest version of my theme is available at https://codeberg.org/ashwinvis/m.css for now if anyone is interested.

[rommeswi]

Perhaps a first attempt could simply be a color inversion filter?