nusmodifications / nusmodifications/nusmods
Add support for detecting and matching OS dark mode
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 689
- Forks
- 364
- Avg merge
- 7h 5m
- Merged PRs (30d)
- 14
Description
Safari 12 TP 68 on macOS Mojave allows websites to detect OS dark mode using the proposed CSS Media Query level 5 prefers-color-scheme media query.
We can look into supporting this. Here's my proposal:
-
For browsers that support it, we add a third, default option to the night mode toggle - prefer OS default. The other two option will force the site to always use light or dark mode. The current UI looks like this

-
The above will probably necessitate updating the Redux state representation of night mode to two - one for the current effective scheme, and another for the option which the user has actually selected
-
We can set the site's mode when the page is first loaded, and use a media query listener to toggle if the user updates their preferences while the page is loaded
The above will require adding code to a number of places in the codebase. Please feel free to ask if you have a hard time navigating the codebase.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No files or tests are named. Start by tracing the night mode toggle and its Redux state, then inspect how the page applies the current color scheme. Done means browsers supporting prefers-color-scheme can follow the OS setting, users can force light or dark mode, and preference changes while the page is loaded are reflected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100