[Feature request] Respect browser night mode with CSS

Tiny Tiny RSS Development
1

From Firefox 67 prefers-color-scheme - CSS: Cascading Style Sheets | MDN it is possible to have a CSS selector to respect the browser’s night mode in stead of manual toggling

So, it would be great to have toogle in Advanced setting (like “Use light/dark mode like in browser”) and have dark/light theme accrooss whole system:
OS changes theme to dark at night (Windows 10 can do this) → browser change’s theme to dark (Firefox can do this) - tt-rss change’s theme to dark

2

Chrome and Safari also respect system night mode

3

iOS, macOS and Windows are going in this direction; but I don’t know about Linux desktops (I haven’t checked at all). I generally like the idea but this is done with CSS media queries. So instead of TT-RSS loading either default or dark themes (based on the user’s selection in Preferences), the CSS would have to include both styles in one and rely on the browser to pick. Which is generally a good idea, but it raises the question of what to do with the UI theme selection.

With all that being said, I wonder if this change is too early (it’s not even finalized in the spec yet)?

I like the idea, I’m just throwing some questions out there for discussion.

I guess TT-RSS uses LESS so it wouldn’t be hard to have three themes: default, dark, auto (based on the media query). LESS would let each one be built pretty much automatically.

4

if someone posts a clean pull request for this, i’ll take a look.

5

i kind of poked at this because i was bored and this doesn’t seem to work properly in chrome or firefox:

(night_test.less)

@media (prefers-color-scheme: dark) {
  @import "night.less";
}

which is strange. CSS is seemingly generated correctly but is not applied completely, dijit stuff is missing.

so, it’s not going to be as simple as wrapping stuff in a media query.

e: variants of this also don’t work properly

@import "../css/defines.less";
@import "../css/dijit_light.less";
@import "../css/zoom.less";

@media (prefers-color-scheme: light) {
   @import (inline) "../lib/flat-ttrss/flat_combined.css";
}

@media (prefers-color-scheme: dark) {
   @import "night_base.less";
   @import (inline) "../lib/flat-ttrss/flat_combined_dark.css";
}

i’m not sure if (nested) includes and stuff and prefers-color-scheme is currently a good mix.