docs.nestjs.com icon indicating copy to clipboard operation
docs.nestjs.com copied to clipboard

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

Open jewhyena opened this issue 1 year ago • 6 comments

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

jewhyena avatar Oct 09 '24 22:10 jewhyena