dark mode for galene interface

[RayBoucherit]

No description provided.

[MisterDA]

There's a CSS media query for the color scheme ; the user sets that preference globally (in the browser or the OS). Galène can use it for the default color sheme.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[jech]

@takdj ?

[takdj]

I think in this case, only color and background properties should be overwritten, for example:

.app-dark {
    background-color: #212529;
    box-shadow: 0 1px 1px 0 rgba(90, 89, 89, 0.06), 0 2px 5px 0 rgba(0, 0, 0, .2);
}

[jech]

@4h30, @takdj, what's the consensus on this?

[takdj]

the dark mode feature is good but for me, It's required to update patch to change only color and background properties on dark mode. Else maintaining css will become harder.
On javascript side, it's also better to set class 'app-dark' only on main div then, propagate dark style in css to children div.

[foresto]

There's a CSS media query for the color scheme ; the user sets that preference globally (in the browser or the OS).

It's worth noting that this media query doesn't work for people who use Firefox Resist Fingerprinting Mode. Since RFP mode appeals to the same sort of people who would choose Galene instead of e.g. Zoom, it would probably make sense to also expose a widget that would activate dark mode when clicked. (This could be done in pure CSS with a styled checkbox, allowing it to work with no javascript overhead.)