Feature request: Dark theme for the website

[Walther]

Thank you for the amazing newsletter 🧡

On the website, it could be nice to have:

• selectable light vs dark mode, with a simple button for picking the active theme, e.g. dark-mode-toggle or similar
• possibly autodetect the user-preferred style with prefers-color-scheme css media query (also supported by above JS snippet and others)
• possibly even support the variety of themes that e.g. rustdoc and mdbook supports (Light, Rust, Coal, Navy, Ayu)

[nellshamrell]

That sounds cool! I'll put a link to this issue in the Call for Participation section of this week's newsletter, perhaps someone from our community can help implement this :)

[jhpratt]

Hey @nellshamrell, is this still welcome? I just checked the CSS, and it's quite minimal. I could quite easily add something in with prefers-color-scheme.

And looking at the CSS, I actually think a good chunk could be simplified with CSS grid & flexbox. All browsers have supported this for a couple years at least.

[nellshamrell]

@jhpratt that would be most welcome!

[jhpratt]

Coming back around to this. I see that the theme actually comes from this repository, given the CSS file name. I presume it's fine to just update the CSS in this repo? We'd just have to make sure to maintain the diff if the theme is ever updated.

[bennyvasquez]

@jhpratt I'm going through and looking at old issues. Are you still interested in working on this? If not, we'll put out a call for other folks to take a look.

[jhpratt]

Interested, yes. But I don't really have time to, as I'm preoccupied with some other things. Feel free to put a call out!

[flying-sheep]

Hi, I had this discussion many times.

An important thing to notice is that two-state toggles like the mentioned “dark-mode-toggle” are wholly inadequate, as they don’t allow to select the “auto” mode that makes the most sense on every single major OS: macOS, Linux, or Windows ≥11.*

Therefore the only design choices that make sense are:

1. Just derive from prefers-color-scheme, no UI. Behaves like there was no dark mode on OSes that don’t have a global setting (like Windows ≤10 and older Linux desktops)

2. A tri-state UI element that allows to switch between

   • “automatically derive from prefers-color-scheme”
   • “user overrides by setting it to light mode”
   • “user overrides by setting it to dark mode”

   Then persist that setting in localstorage or a cookie: auto, light, or dark.

   Examples:

   • Simple dopdown: MDN.
   • Tri-state button: Furo Docs theme, MkDocs.
   • Tri-state switch: My React component.

3. The same as 2, but also allow the user to select which light mode theme and dark mode theme to use. Text Editors and IDEs do this often. Example: https://github.com/settings/appearance

---

*There’s multiple failure modes for two state toggles. Some of them will forever remember having been clicked, permanently disabling the “auto” mode, so a curious user is forever locked out of the most useful setting. Others (like the mentioned dark-mode-toggle) will only allow to toggle between unintuitive alternatives like “system theme” and “the other one, but only while the system theme doesn’t change”. On the demo page there’s a little “always” checkbox, which adds to the confusion, as there’s now four states where only three make sense.

[flying-sheep]

Regarding implementation, as @pradyunsg said here:

I think any "pin this theme" logic should be supported by a first-render-blocking <script> tag to set the theme. Not seeing a frame-or-two of light mode when my system is set to light mode and my preference is pinned to dark is A Good Thing™. :)

Also, in case you go with a button, I think a combination of Furo’s and MkDocs’ behavior is ideal:

• Like Furo, the button should adapt the toggle direction depending on what the system theme currently is, so that the first click always changes the visible theme (see here for details)
• Like MkDocs, the button should show the current mode, but hovering it should immediately show a tooltip saying ”Switch to […]”

[GuillaumeGomez]

Stupid question but why not using mdbook directly? It implements themes and search (which are another feature request).

[twhiting]

I'm all for a dark theme FWIW. For those looking for this functionality now try using your browsers built in Reader Mode.