[accessibility/frontend] Use client's `prefers-color-scheme` on the web frontend

[tsmethurst]

Originally posted by @bremensaki in https://github.com/superseriousbusiness/gotosocial/issues/714#issuecomment-1327991017

[benjaminbhollon]

I'd be happy to look into implementing this; I've done a fair bit of work with designing accessible CSS and am someone directly affected by the lack of a light mode stylesheet (my astigmatism makes it uncomfortable/difficult to read light-on-dark).

If you're looking for an outside contributor on this, let me know; I'll get to work.

[tsmethurst]

If you feel like having a crack at it, that would be great! I'm not really sure what the steps involved for this one would be: I myself am clueless about how to have light + dark css in the same stylesheet (?), how to store / modify the user's preference, and how to flip between it in a way that can work without JS. So, input welcome :)

[benjaminbhollon]

Okay, got it.

So to kind of outline what I'm imagining:

Without JS, we can use a @media query to detect when the browser prefers dark mode:

@media (prefers-color-scheme: dark) {
    /* styles go here */
}

Then what I can also do to add the possibility for users to override that is have the theme switch based on a class or attribute; in my own code I use the data-theme attribute set to light or dark to override the prefers-color-scheme.

If that sounds good I can start implementing it.

[turtlegarden]

Yeah, I think that sounds ideal. Then, no JS is needed and the server can set the data-theme, and only the sass variables need to be changed (and they can simply be put in a @media block as mentioned above).

[benjaminbhollon]

Awesome, I'll start looking at the code, then. Haven't worked with sass much (I mostly use plain CSS), so it might take a bit to figure out setting things up.

[turtlegarden]

(wait, we should get tobi's approval, I'm not tobi!)

[benjaminbhollon]

Oh, ha, sure! XD

[tsmethurst]

I'm not tobi!

Aren't we all, in a way, tobi? In our hearts? I think so.

Anyway, I think this approach sounds fine. I'd like to hear if @f0x52 has any input too :)

[VirtualWolf]

Hey @benjaminbhollon did you end up getting anywhere with this? :)

[benjaminbhollon]

I never did, I'm sorry. I think once all the different color schemes came into play (whatever release that was?) I forgot this was something that still needs doing.

[VirtualWolf]

All good! I was thinking of taking a look at it and didn't want to step on anyone's toes if it was most of the way to being implemented already.

[benjaminbhollon]

My toes are safe, implement away! ;D

[CDN18]

I've already merged the corresponding default theme on my instance using prefers-color-scheme and have been using it for a while without any issues. If this only involves changes to the theme CSS code, I think I can go ahead and submit a PR.

[VirtualWolf]

Oh nice! I think this issue is kind of two things? Don't default to dark mode but detect the user preference:

Without JS, we can use a @media query to detect when the browser prefers dark mode

But in addition, the option to switch between them:

Then what I can also do to add the possibility for users to override that is have the theme switch based on a class or attribute

Yours would cover the first, which I think would be a big improvement on its own.