nusmodifications / nusmodifications/nusmods

Add support for detecting and matching OS dark mode

Open
#1,289 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

good first issue
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

    screenshot from 2018-11-14 10-12-12

  • 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.