Bitcoin.org: Adding a dark mode feature

[Cobra-Bitcoin]

It might be good to have a dark mode feature for the site that can be enabled by default for users whose prefers-color-scheme is set to dark, and by a toggle for others.

Our default theme is already quite dark so I don't think it'll take too much effort to have a dark mode since there's only a few areas of brightness on the site. Obviously it should still look quite good though. It's not a necessity but would be a nice touch especially for users running system wide dark modes on their operating systems like the latest macOS.

[jdabs]

Is anyone already working on this? I could work on the dark mode style sheet if not. I have a possible good palette to work with. Example:

[Cobra-Bitcoin]

@jdabs That palette looks really good, and yeah, go for it, I don't think anybody else is working on it.

[jdabs]

Ok, I will see what I can crank out over my holiday time off and put what I have on a github static site.
It looks easier to load a separate dark stylesheet in case the media query is set to dark, based on the mdn spec. I just don't want to get ugly with !important tags for overwriting the default/light style sheet.

[wbnns]

@jdabs

Hi, yes, as @Cobra-Bitcoin mentioned, no one has given any notice that they're working on this as of yet. Also, yes, let's please adhere to the spec and use a media query.

Thanks for your help. :)

[jdabs]

Found an interesting limitation of the spec and the theme color meta tag. You cannot change a metatag value with purely a media query.
https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color

However, it looks like chrome for Android only supports this meta tag, but it adds a very nice touch when the phone is set to dark mode.
https://caniuse.com/#feat=meta-theme-color

However chrome on Android is 36% traffic share :)

Edit: I'm thinking out loud, no need for a response....

Edit 2: it looks like chrome for Android already falls back to a neutral black which will match our dark mode styles nicely anyway. So let's leave out a meta tag for theme color and let the browser/OS decide

[Dorson]

I coded a flexible and working solution for the Dark Mode.

Try demo in here:
https://dorson.github.io/CSS-Dark-Mode-and-color-switch/

Works with basic CSS variables + short JavaScript.

Can be used inside existing CSS style file. Can be used to define multiple color themes in one CSS file, or any other possible dynamic CSS style setting options like text size, etc... No user logins or profiles or tracking required.

Let's save our eyesight at night :-)

Have fun using my code !

[angeloko23]

It might be good to have a dark mode feature for the site that can be enabled by default for users whose prefers-color-scheme is set to dark, and by a toggle for others.

Our default theme is already quite dark so I don't think it'll take too much effort to have a dark mode since there's only a few areas of brightness on the site. Obviously it should still look quite good though. It's not a necessity but would be a nice touch especially for users running system wide dark modes on their operating systems like the latest macOS.