Dark mode for haiku sites

Development
#1

Hey, recently i have been working on a dark mode for the web presence of haiku, many sites, much css to change.

This works with a css media query which you can read about here: https://webkit.org/blog/8840/dark-mode-support-in-webkit/

To test this out you can:
for chromium and safari enable an OS dark mode (i tested this on win10 with chromium, and safari on iOS)
for firefox this might work too, but potentially you need to set ui.systemUsesDarkTheme: 1 in about:config
Unfortunately this is not available for Haiku native currently, we lack a way to indicate that a dark mode is activated, and support for this feature isn’t in out webkit port at the moment.

I have already modified https://www.haiku-os.org/ , feedback welcome.
I still want to modify https://discuss.haiku-os.org/ (this forum, and blog comments on the main site) https://dev.haiku-os.org/ (trac) aswell as https://review.haiku-os.org/

feel free to leave feedback, especially if anything is grossly wrongly colored (like the blog comments currently), illegible or just looks really out of place.

2 Likes
#2

Works fine in Firefox 79 on linux, although the blue background gradient now seems a little too bright for the rest, but well.

Well, gerrit already has a dark theme (in the account settings, so you likely must have an account to activate it).

#3

I have heard about the dark theme for gerrit, unfortunately i don’t have an account to check with (and personally i think this is the wrong way to go about it, it would mean you can’t have a dark theme if you are logged out in general)

I can try to adjust the blue gradient, i didn’t yet because it is an image so i would have to figure out how i can make a nice looking one, the rest of the gradients seem to be normal css gradients though.

#4

Have Firefox 75, in Win10 with dark mode. Idk if I manually activated dark mode on Firefox, but the other day I went to the page and realized it was black XD. Though it was an error, but then I realized it was some dark mode ;p

#5

Is there a way to keep the old look? I am in the minority where I used dark mode on my PC, but I can’t stand it on websites. :slight_smile:

#6

That depends on your browser, it needs to evaluate this media querry to “light” in order for (well-behaved) websites to render in a light style https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
for firefox that seems to be just the ui.systemUsesDarkTheme setting set to anything but 1

#7

Can we add a dark theme for Discourse? There are lots of themes to choose from: https://github.com/search?q=discourse+dark

The Dark Theme on meta.discourse.org seems pretty. I don’t know which one is that though.

Edit: There is more info here: https://meta.discourse.org/t/allow-users-to-select-dark-light-theme/60857

#8

No, that doesn’t make much sense, it’s the same thing as the dark theme on gerrit, a selectable theme for logged in users. (edit: i guess not /only/ logged in, but still prior knowledge is required, as in a cookie from a previous visit or something since the default is always the light theme dispite my browser supporting the css query out of the box and has it set to dark)
What we want is a theme that is representable in both dark and light mode so that it “simply” works in logged out browsers that request a dark mode too

(otherwise when we get a dark mode in haiku with webpositive offering support the workflow goes from: “just turn it on in appearence” to “turn it on in appearence and then create an account on these 20 services and select this specific theme that should work”)

#9

Something automatic would be much better. But AFAIK, Discourse does not support system-theme based theme change yet.

#10

It would just be a theme with css for both styles, a “theme change” as discourse sees it is not required.

#11

discuss.haiku-os.org now has a dark mode :)

4 Likes
#12

Very nice! :+1:

#13

discourse ~2.4~ 2.6 added support for it, however @nephele pointed out that it wasn’t doing anything.

tldr; we only had one color scheme for our forums. I took the “basic” discuss dark theme and changed the colors to match the light colors (aka green == haiku green, etc)

5 Likes
#14

2.6 added support for the theme to respect the prefers-color-scheme stuff afaik, before may just have been user settings or so?

1 Like