gotosocial
gotosocial copied to clipboard
superseriousbusiness
[accessibility/frontend] Use client's `prefers-color-scheme` on the web frontend
Originally posted by @bremensaki in https://github.com/superseriousbusiness/gotosocial/issues/714#issuecomment-1327991017
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.
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 :)
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.
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).
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.
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 :)