Add Dark Mode

[chrisdel101]

Added darkmode theme to site by clicking the moon icon. All pages available through the site drop downs have been tested for English, and a quick run through was done on chrome, FF, and Safari. Mobile testing was done with emulator and not on actual mobile device.

Support for all foreign languages also appears to be working. All foreign index pages tested.

Issues:

• Had to adjust search bar size on FR, DE, RU, UZ language home page due to addition of darkmode icon.
• runkit on hello-world.html cannot be styled, or at least I was not able to find a way. This section of the page remains white :(
• local storage is used to allow theme to persist. Darkmode will not be supported on browsers w/o local storage.

[chrisdel101]

What do you mean by Add system as an option ? Check which OS they use I assume you mean. And, auto-detect what? At the OS level.

Once I understand what you mean I can make these changes.

[chrisdel101]

You mean like this? https://www.smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript/ I'll look into it.

[aravindvnair99]

@chrisdel101 yes I was referring to that. You can read more here:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• https://web.dev/articles/prefers-color-scheme

[chrisdel101]

Okay so I've add support for this. I looked for this feature before starting this task. I'd never heard of this before, but some other contrib comments talked about it. Since I didn't find anything I thought it was pseudo code. Doh!

You this added feature at the top of theme.js. Below is more detail if you feel like reading. :)

More Explantion (reading optional)

So I did not add use prefers-color-scheme breakpoint. This would mean repeating the exact same code twice in the CSS file. Since everything already revolves around the body.dark-mode combination, JS is the best way to do this, and it's only a single line.

An overview of what's happening when system setting != dark:

Current normal workflow (for user without system setting == dark)

• Check user system theme != dark
• first time user visits the site and if hasLocalStorage === true darkmode icon is visible.
• clicking the icon toggles local storage flag true/false, and turns darkmode on/off with dark-mode class
• However, if a user visits and hasLocalStorage === false, then darkmode icon is hidden + no dark mode support.

If system setting == dark:

(new) System setting workflow

• Check user system theme on every page load using JS via window.matchMedia('(prefers-color-scheme: dark)').matches
• if true, turn on dark mode, but do not add anything to local storage.
• If user toggles dark mode off, whilesetting == dark, only then activate local storage. Add false flag
• However, if user has system setting == dark but hasLocalStorage === false, dark mode will work but cannot be toggled off. Icon will be removed.

I marked the new section in the code since it's slightly less nice to read, but is nice to avoid using local storage until it's actually required. (It'd be cleaner to just activate it right way, but less efficient).

Tested on MacOS and iphone only (FF/chrome/safari)

[chrisdel101]

Just fixed merge conflicts that appeared

[crandmck]

Thanks @chrisdel101, nice work ....

One small comment: There are white bands at the top and bottom of each menu. I realize that this is also the case in current/bright mode, but it is much more noticeable in dark mode. Would it be a lot of work to eliminate them? If they're eliminated from regular/bright mode, so much the better...

If it's too complicated or has other side-effects, we may be able to live with it.

I'd also like to see what others think of the change in this PR, e.g. @jonchurch ...

[chrisdel101]

I made the fixes, and a few others I found in the process. They are all described in detail below. I also found another bug: when resizing down to the mobile link menu, opening it, and then resizing back up, nav bar does not re-appear. I filed a report for that.

FIX 1

There will hopefully be no side-effects since the rule here is quite specific, hitting just those links .menu ul.dropit-submenu Agreed. It looks much better without the bands, in light mode especially.

Dark mode fix

FIX 2

After the above fixes I made this change: I think these look better without the border-radius, so the corners are now squared. This can easily be reverted if you don't agree

FIX 3

This is more of an FYI. There was also a strange thing happening with the "installing" link. A current class is being added somewhere. This makes it appear white. I overrode that, but you can see that the first link then had a dark black band - it's tough to see. But now this is fixed using transparent setting.

[chrisdel101]

I also changed the JS. Now the system setting JS media query has a listener so it does not take a page reload to take effect. And whichever process changes is the one that takes effect, i.e. if the system is set to dark but the icon toggles to light, light is set. Or, if the icon is set to light but the system flips to dark, then dark is set. See video below to see what I mean. The last new change is the one that persists.

https://github.com/expressjs/expressjs.com/assets/14151974/556dceb0-2e60-4e62-9eec-769fa882b6d7

[crandmck]

Thanks @chrisdel101 I know this was a lot of work.