m.css icon indicating copy to clipboard operation
m.css copied to clipboard

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

Open ashwinvis opened this issue 5 years ago • 3 comments

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?

ashwinvis avatar Apr 09 '20 09:04 ashwinvis

(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 :)

mosra avatar Jan 05 '22 23:01 mosra

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.

ashwinvis avatar Jan 06 '22 08:01 ashwinvis