vogon

colin

@vogon

the evil "Website Boy"

member of @staff, lapsed linguist and drummer, electronics hobbyist

zip's bf

no supervisor but ludd means the threads any good

log inask
mastodon
mastodon.social/@vogon
twitter (inactive)
twitter.com/vogon
bluesky
if bluesky has a million haters I am one of them, if bluesky has one hater that's me, if bluesky has no haters then I am no more on the earth (more details: https://cohost.org/vogon/post/1845751-bonus-pure-speculati)
irl
seattle, WA
vogon
@vogon
dsy
@dsy
britown
@britown

Cohost Dark Theme (on Windows)

I don't know how this hooks into CSS or if @staff actually did this intentionally or how anything works at all! BUT if you set your app theme to dark in your windows personalization, Cohost gets all dark. Which is cool! A lot of sites actually handle this correctly like Youtube.

vogon
@vogon

can confirm that this is 100% intentional. the browser's rendering engine exports a CSS media feature called prefers-color-scheme that we use to set the site theme.

FAQ

Q: why is this the only way you can change the site theme?
A: when we first added the dark mode we had to choose one of "basing it on prefers-color-scheme" or "having an explicit switch for it" for technical reasons, and we chose the former because we didn't have an easy way of adding an explicit switch for it at the time and I thought it would be too expensive. jae roasts me about this decision every time the topic comes up.

Q: what about people on windows 7/other platforms that don't have a system theme?
A: as I found out at one point, you can also change the effective system theme in the browser settings if you use firefox. but yeah, this is a good question. it's on our radar.

You must log in to comment.

in reply to @vogon's post:

noa
@noa

we had to choose one of "basing it on prefers-color-scheme" or "having an explicit switch for it" for technical reasons, and we chose the former because we didn't have an easy way of adding an explicit switch for it at the time

You don't have to choose! Switch to class-based dark mode in tailwind css and then add a small inline script to the document head to check if the user wants dark mode and apply it.

Then, you can use javascript to watch for when the CSS media query changes to prefer dark mode. Now, you can have a user setting that defaults to the system setting

A bit of development effort for a slightly nicer user experience

login to reply
vogon
@vogon

as jae added in their share of my original post, we were attempting to avoid using client javascript on the site at that point -- it's truly a silly choice separated from the historically contingent aspect of it and we only haven't added it since because it's never been at the top of our stack of things to do

login to reply
daboross
@daboross

This works in Gnome on Linux systems as well!

Gnome 43 also adds a really nice "dark mode" toggle to the status menu, so I can just hit it on/off and all my apps (well, gtk apps + firefox) and websites within firefox change based on that. Earlier versions you would have to go into settings or script something, but it's now really convenient.

So not just Windows, at least! I don't know about macOS support.

login to reply
Pinned Tags