feat: add support for system color scheme

[chrisgzf]

Context

Very WIP, just the preliminary implementation first. PRing for sanity check.

Based on https://github.com/nusmodifications/nusmods/issues/1289.

Implementation

Roughly:

• Uses matchMedia to check for prefers-color-scheme media query
• Adds a third default option to the mode selector
• When it is set to default, AppShell checks for OS dark mode preference, and applies dark mode if there is dark mode preference
• Whenever the user is in Default mode and presses x to toggle their mode, they have made a conscious choice to switch away from the Default, and it will be set to Light/Dark accordingly

Todo

• [x] Make it work with export service
• [x] Write tests

Note: The keyboard toggling and setting of dark mode feels a bit laggy in dev, but isn't sluggish once exported. There is also incorrect snackbar notification text, which will be fixed in #3165.

Picture:

GIF:

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

nusmods-website – ./website

🔍 Inspect: https://vercel.com/nusmodifications/nusmods-website/ah4qvt0h1
✅ Preview: https://nusmods-website-git-fork-chrisgzf-os-default-night-dark-mode.nusmodifications.vercel.app

nusmods-export – ./export

🔍 Inspect: https://vercel.com/nusmodifications/nusmods-export/n688dqiii
✅ Preview: https://nusmods-export-git-fork-chrisgzf-os-default-night-dark-mode.nusmodifications.vercel.app

[chrisgzf]

@taneliang Thanks for the review and sanity check! Agree on the reducer reading data from the outside being pretty iffy! I kinda know how to move on from here with your suggestions. I will slowly work on this over the next week.

[taneliang]

Btw we'll also need to display the segmented control better on xs 😆

[ravern]

I think if we just change the label to "Auto" (which is still telling) it looks fine.

This is on iPhone SE.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nusmods-export	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 21, 2024 1:13pm
nusmods-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 21, 2024 1:13pm

[vercel[bot]]

@ravern is attempting to deploy a commit to a Personal Account owned by @nusmodifications on Vercel.

@nusmodifications first needs to authorize it.

[ravern]

I've rebased this onto the latest master and made some changes to how the "auto" light/dark mode works, taking into account @taneliang's comments too.

Mode is now split into two different concepts: ColorScheme and ColorSchemePreference.

• ColorSchemePreference is the user-selected preference in the settings. It is either "auto", "light" or "dark".
• ColorScheme is the final decided color scheme. It is either "light" or "dark".

The useColorScheme hook transforms the ColorSchemePreference stored in the Redux store into a ColorScheme, which is used to determine if we'll render light or dark mode palette. Should the user preference be set to "auto", I used a useMediaQuery hook to determine the system-preferred color scheme and return "light" or "dark" accordingly.

There was an issue where the behaviour of a toggleMode/toggleColorScheme action is now unclear — how do we toggle an "auto" preference if we don't have access to the external state i.e. the media query? To resolve this, I removed the action entirely, and changed the only dispatcher of this action — the 'x' keybinding handler — to use a combination of useColorScheme and setColorScheme instead. I also removed the corresponding tests.

Finally, regarding export, I refactored the export component to be a functional component instead, giving me access to useColorScheme, which I then used to determine the color scheme of the rendered output.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 56.16438% with 32 lines in your changes are missing coverage. Please review.

Project coverage is 53.53%. Comparing base (c26ef0b) to head (55da21f).

Files	Patch %	Lines
website/src/utils/colorScheme.ts	35.71%	9 Missing :warning:
website/src/views/timetable/ExportMenu.tsx	69.56%	7 Missing :warning:
website/src/views/hooks/useColorScheme.tsx	54.54%	5 Missing :warning:
website/src/views/components/KeyboardShortcuts.tsx	0.00%	4 Missing :warning:
website/src/views/AppShell.tsx	0.00%	2 Missing :warning:
website/src/views/settings/ModeSelect.tsx	0.00%	2 Missing :warning:
website/src/apis/export.ts	66.66%	1 Missing :warning:
website/src/entry/export/main.tsx	0.00%	1 Missing :warning:
...ite/src/views/components/disqus/DisqusComments.tsx	0.00%	1 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3167      +/-   ##
==========================================
- Coverage   53.59%   53.53%   -0.06%     
==========================================
  Files         272      274       +2     
  Lines        5988     6017      +29     
  Branches     1434     1443       +9     
==========================================
+ Hits         3209     3221      +12     
- Misses       2779     2796      +17     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.