search

mosra / m.css

A no-nonsense, no-JavaScript CSS framework, site and documentation theme for content-oriented websites
https://mcss.mosra.cz
Other
406 stars 91 forks source link

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

Open ashwinvis opened 4 years ago

ashwinvis commented 4 years ago

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 commented 2 years ago

(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 :sweat_smile: 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 commented 2 years ago

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 commented 4 months ago

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