feat: respect user's preferred color scheme (dark mode repair)

[xoyseau]

PR Checklist

Please check if your PR fulfills the following requirements:

• [x] The commit message follows our guidelines: https://github.com/nestjs/docs.nestjs.com/blob/master/CONTRIBUTING.md

PR Type

What kind of change does this PR introduce?

• [ ] Bugfix
• [x] Feature
• [ ] Code style update (formatting, local variables)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] Docs
• [ ] Other... Please describe:

What is the current behavior?

Currently, the Nest.js documentation site does not respect the user's system preferences regarding the color scheme (light or dark). As a result, opening the site in a new browser or in an Incognito session always defaults to light mode, ignoring the system preferences.

Manually toggling the theme will save the current theme in localStorage, so the next time the user opens the site, it will remain the same.

Issue Number: N/A

What is the new behavior?

The new behavior respects the user's system preferences. If their preferred color scheme is dark, the Nest.js site will default to dark mode, and similarly, if their preferred color scheme is light, it will be in light mode. It now also listens for changes in the preferred color scheme, and the Nest.js site will automatically change its theme according to the current system preferences.

If the user manually toggles the theme button, the theme will be stored in localStorage and remain there. In this case, the theme will not respect the system preferences. Instead, localStorage will be the source of truth.

Please see the attached video.

Does this PR introduce a breaking change?

• [ ] Yes
• [x] No

Other information

https://github.com/user-attachments/assets/3656f7de-3dfc-419f-9ced-51853460f9f5

[micalevisk]

I guess this isn't working on Ubuntu (firefox) :thinking: I tested the deploy preview

demo_linux.webm

[xoyseau]

I guess this isn't working on Ubuntu (firefox) 🤔 I tested the deploy preview

demo_linux.webm

Hm. That is strange. There's no platform-dependent code.

It works seamlessly on both Chrome and Firefox on my Mac, as well as on my iPhone.

By any chance, didn't you manually change the theme on the site before starting switching your system preference? Was your localStorage clear?

Because once you manually change the theme on the site, it no longer respects your system preference. After you click the button, the localStorage becomes the source of truth for the theme. Such behavior is expected.

[micalevisk]

still not working here :thinking:

demo2.webm

while the theme switching worked for discord desktop app

[xoyseau]

while the theme switching worked for discord desktop app

Hmm.

Since Discord is a different app which might not have any issues resolving the preferred schema on Ubuntu, let's check if it's the same with https://reactnative.dev/ and https://reactnavigation.org/ websites.

Could you please tell me whether those two sites respect your color scheme or do nothing as well?

[micalevisk]

they didn't work on firefox neither

but I just found that everything went fine on chrome

[xoyseau]

they didn't work on firefox neither

but I just found that everything went fine on chrome

Might be some issue with GNOME: https://askubuntu.com/a/1464951. 🤔

[kamilmysliwiec]

LGTM