feat: add support for system color scheme (#3167)

* Add typings for default display mode

* Add default mode to dark mode UI selector

* Add CSS util to detect OS display mode

* Add OS display mode detection for AppShell

* Update defaults and update reducers

* Delay evaluation of matchMedia

* Add comments

* OS Default -> Auto-detect

* feat: undo media query in reducer

* feat: add color scheme selection, remove toggle

* refactor: ExportMenu into functional component

* fix: add colorscheme to export preferences

* fix: tests

* fix: type error in reducer

* chore: fix typecheck

* chore: remove obsolete snapshot

* fix: toggling

---------

Co-authored-by: Ravern Koh <[email protected]>
Co-authored-by: Kok Rui Wong <[email protected]>

Author: 3 people

website/src/actions/__snapshots__/settings.test.ts.snap

@@ -21,16 +21,9 @@ exports[`settings should dispatch a select of a semester value 1`] = `
 }
 `;
 
-exports[`settings should dispatch a selection of a mode 1`] = `
+exports[`settings should dispatch a selection of a color scheme preference 1`] = `
 {
-  "payload": "LIGHT",
-  "type": "SELECT_MODE",
-}
-`;
-
-exports[`settings should dispatch a toggle of a mode 1`] = `
-{
-  "payload": null,
-  "type": "TOGGLE_MODE",
+  "payload": "LIGHT_COLOR_SCHEME_PREFERENCE",
+  "type": "SELECT_COLOR_SCHEME",
 }
 `;

website/src/actions/settings.test.ts

@@ -1,9 +1,8 @@
 import { Faculty, Semester } from 'types/modules';
+import { LIGHT_COLOR_SCHEME_PREFERENCE } from 'types/settings';
 
 import * as actions from 'actions/settings';
 
-import { LIGHT_MODE } from 'types/settings';
-
 describe('settings', () => {
   test('should dispatch a select of a semester value', () => {
     const semester: Semester = 1;
@@ -15,12 +14,9 @@ describe('settings', () => {
     expect(actions.selectNewStudent(newStudent)).toMatchSnapshot();
   });
 
-  test('should dispatch a selection of a mode', () => {
-    expect(actions.selectMode(LIGHT_MODE)).toMatchSnapshot();
-  });
-
-  test('should dispatch a toggle of a mode', () => {
-    expect(actions.toggleMode()).toMatchSnapshot();
+  test('should dispatch a selection of a color scheme preference', () => {
+    const colorSchemePreference = LIGHT_COLOR_SCHEME_PREFERENCE;
+    expect(actions.selectColorScheme(colorSchemePreference)).toMatchSnapshot();
   });
 
   test('should dispatch a select of a faculty value', () => {

website/src/actions/settings.ts

@@ -1,5 +1,5 @@
 import { Faculty, Semester } from 'types/modules';
-import { Mode } from 'types/settings';
+import { ColorSchemePreference } from 'types/settings';
 import { ModuleTableOrder } from 'types/reducers';
 
 import { RegPeriod, ScheduleType } from 'config';
@@ -29,22 +29,14 @@ export function selectFaculty(faculty: Faculty) {
   };
 }
 
-export const SELECT_MODE = 'SELECT_MODE' as const;
-export function selectMode(mode: Mode) {
+export const SELECT_COLOR_SCHEME = 'SELECT_COLOR_SCHEME' as const;
+export function selectColorScheme(mode: ColorSchemePreference) {
   return {
-    type: SELECT_MODE,
+    type: SELECT_COLOR_SCHEME,
     payload: mode,
   };
 }
 
-export const TOGGLE_MODE = 'TOGGLE_MODE' as const;
-export function toggleMode() {
-  return {
-    type: TOGGLE_MODE,
-    payload: null,
-  };
-}
-
 export const DISMISS_MODREG_NOTIFICATION = 'DISMISS_MODREG_NOTIFICATION' as const;
 export function dismissModregNotification(round: RegPeriod) {
   return {

website/src/apis/export.ts

@@ -4,6 +4,7 @@ import { Semester } from 'types/modules';
 import { extractStateForExport } from 'utils/export';
 import { State } from 'types/state';
 import { SemTimetableConfig } from 'types/timetables';
+import { ColorScheme } from 'types/settings';
 
 export type ExportOptions = {
   pixelRatio?: number;
@@ -14,18 +15,29 @@ const baseUrl = 'https://export.nusmods.com/api/export';
 function serializeState(
   semester: Semester,
   timetable: SemTimetableConfig,
+  colorScheme: ColorScheme,
   state: State,
   options: ExportOptions = {},
 ) {
   return qs.stringify({
-    data: JSON.stringify(extractStateForExport(semester, timetable, state)),
+    data: JSON.stringify(extractStateForExport(semester, timetable, colorScheme, state)),
     ...options,
   });
 }
 
 export default {
-  image: (semester: Semester, timetable: SemTimetableConfig, state: State, pixelRatio = 1) =>
-    `${baseUrl}/image?${serializeState(semester, timetable, state, { pixelRatio })}`,
-  pdf: (semester: Semester, timetable: SemTimetableConfig, state: State) =>
-    `${baseUrl}/pdf?${serializeState(semester, timetable, state)}`,
+  image: (
+    semester: Semester,
+    timetable: SemTimetableConfig,
+    colorScheme: ColorScheme,
+    state: State,
+    pixelRatio = 1,
+  ) =>
+    `${baseUrl}/image?${serializeState(semester, timetable, colorScheme, state, { pixelRatio })}`,
+  pdf: (
+    semester: Semester,
+    timetable: SemTimetableConfig,
+    colorScheme: ColorScheme,
+    state: State,
+  ) => `${baseUrl}/pdf?${serializeState(semester, timetable, colorScheme, state)}`,
 };

website/src/entry/export/main.tsx

@@ -7,7 +7,7 @@ import { ExportData } from 'types/export';
 
 import configureStore from 'bootstrapping/configure-store';
 import { setExportedData } from 'actions/export';
-import { DARK_MODE } from 'types/settings';
+import { DARK_COLOR_SCHEME } from 'types/settings';
 import { State as StoreState } from 'types/state';
 
 import TimetableOnly from './TimetableOnly';
@@ -32,7 +32,7 @@ window.setData = function setData(modules, data, callback) {
   const { semester, timetable, colors } = data;
 
   if (document.body) {
-    document.body.classList.toggle('mode-dark', data.settings.mode === DARK_MODE);
+    document.body.classList.toggle('mode-dark', data.settings.colorScheme === DARK_COLOR_SCHEME);
   }
 
   store.dispatch(setExportedData(modules, data));

website/src/reducers/index.test.ts

@@ -3,6 +3,7 @@ import { VERTICAL } from 'types/reducers';
 import reducers from 'reducers';
 import { setExportedData } from 'actions/export';
 import modules from '__mocks__/modules/index';
+import { DARK_COLOR_SCHEME, DARK_COLOR_SCHEME_PREFERENCE } from 'types/settings';
 
 /* eslint-disable no-useless-computed-key */
 
@@ -34,7 +35,7 @@ const exportData: ExportData = {
     showTitle: true,
   },
   settings: {
-    mode: 'DARK',
+    colorScheme: DARK_COLOR_SCHEME,
   },
 };
 
@@ -78,7 +79,7 @@ test('reducers should set export data state', () => {
   });
 
   expect(state.settings).toMatchObject({
-    mode: 'DARK',
+    colorScheme: DARK_COLOR_SCHEME_PREFERENCE,
   });
 
   expect(state.theme).toEqual({

website/src/reducers/settings.test.ts

@@ -3,14 +3,18 @@ import { SettingsState } from 'types/reducers';
 
 import * as actions from 'actions/settings';
 import reducer from 'reducers/settings';
-import { DARK_MODE, LIGHT_MODE } from 'types/settings';
+import {
+  DARK_COLOR_SCHEME_PREFERENCE,
+  LIGHT_COLOR_SCHEME_PREFERENCE,
+  SYSTEM_COLOR_SCHEME_PREFERENCE,
+} from 'types/settings';
 import { initAction, rehydrateAction } from 'test-utils/redux';
 import config, { RegPeriod } from 'config';
 
 const initialState: SettingsState = {
   newStudent: false,
   faculty: '',
-  mode: LIGHT_MODE,
+  colorScheme: SYSTEM_COLOR_SCHEME_PREFERENCE,
   hiddenInTimetable: [],
   modRegNotification: {
     enabled: true,
@@ -25,7 +29,14 @@ const initialState: SettingsState = {
 const settingsWithNewStudent: SettingsState = { ...initialState, newStudent: true };
 const faculty = 'School of Computing';
 const settingsWithFaculty: SettingsState = { ...initialState, faculty };
-const settingsWithDarkMode: SettingsState = { ...initialState, mode: DARK_MODE };
+const settingsWithLightMode: SettingsState = {
+  ...initialState,
+  colorScheme: LIGHT_COLOR_SCHEME_PREFERENCE,
+};
+const settingsWithDarkMode: SettingsState = {
+  ...initialState,
+  colorScheme: DARK_COLOR_SCHEME_PREFERENCE,
+};
 const settingsWithDismissedNotifications: SettingsState = produce(initialState, (draft) => {
   draft.modRegNotification.dismissed = [
     { type: 'Select Courses', name: '1' },
@@ -52,23 +63,18 @@ describe('settings', () => {
     expect(nextState).toEqual(settingsWithFaculty);
   });
 
-  test('can select mode', () => {
-    const action = actions.selectMode(DARK_MODE);
+  test('can select color scheme', () => {
+    const action = actions.selectColorScheme(DARK_COLOR_SCHEME_PREFERENCE);
     const nextState: SettingsState = reducer(initialState, action);
     expect(nextState).toEqual(settingsWithDarkMode);
 
-    const action2 = actions.selectMode(LIGHT_MODE);
-    const nextState2: SettingsState = reducer(nextState, action2);
-    expect(nextState2).toEqual(initialState);
-  });
-
-  test('can toggle mode', () => {
-    const action = actions.toggleMode();
-    const nextState: SettingsState = reducer(initialState, action);
-    expect(nextState).toEqual(settingsWithDarkMode);
+    const action2 = actions.selectColorScheme(LIGHT_COLOR_SCHEME_PREFERENCE);
+    const nextState2: SettingsState = reducer(initialState, action2);
+    expect(nextState2).toEqual(settingsWithLightMode);
 
-    const nextState2: SettingsState = reducer(nextState, action);
-    expect(nextState2).toEqual(initialState);
+    const action3 = actions.selectColorScheme(SYSTEM_COLOR_SCHEME_PREFERENCE);
+    const nextState3: SettingsState = reducer(nextState, action3);
+    expect(nextState3).toEqual(initialState);
   });
 
   test('set module table order', () => {

website/src/reducers/settings.ts

@@ -9,20 +9,20 @@ import {
   DISMISS_MODREG_NOTIFICATION,
   ENABLE_MODREG_NOTIFICATION,
   SELECT_FACULTY,
-  SELECT_MODE,
+  SELECT_COLOR_SCHEME,
   SELECT_NEW_STUDENT,
   SET_LOAD_DISQUS_MANUALLY,
   SET_MODULE_TABLE_SORT,
   TOGGLE_BETA_TESTING_STATUS,
   TOGGLE_MODREG_NOTIFICATION_GLOBALLY,
-  TOGGLE_MODE,
   SET_MODREG_SCHEDULE_TYPE,
 } from 'actions/settings';
 import { SET_EXPORTED_DATA } from 'actions/constants';
 import { DIMENSIONS, withTracker } from 'bootstrapping/matomo';
-import { DARK_MODE, LIGHT_MODE } from 'types/settings';
+import { SYSTEM_COLOR_SCHEME_PREFERENCE } from 'types/settings';
 import config from 'config';
 import { isRoundDismissed } from 'selectors/modreg';
+import { colorSchemeToPreference } from 'utils/colorScheme';
 
 export const defaultModRegNotificationState = {
   semesterKey: config.getSemesterKey(),
@@ -34,7 +34,7 @@ export const defaultModRegNotificationState = {
 const defaultSettingsState: SettingsState = {
   newStudent: false,
   faculty: '',
-  mode: LIGHT_MODE,
+  colorScheme: SYSTEM_COLOR_SCHEME_PREFERENCE,
   hiddenInTimetable: [],
   modRegNotification: defaultModRegNotificationState,
   moduleTableOrder: 'exam',
@@ -54,17 +54,11 @@ function settings(state: SettingsState = defaultSettingsState, action: Actions):
         ...state,
         faculty: action.payload,
       };
-    case SELECT_MODE:
+    case SELECT_COLOR_SCHEME:
       return {
         ...state,
-        mode: action.payload,
+        colorScheme: action.payload,
       };
-    case TOGGLE_MODE:
-      return {
-        ...state,
-        mode: state.mode === LIGHT_MODE ? DARK_MODE : LIGHT_MODE,
-      };
-
     case TOGGLE_MODREG_NOTIFICATION_GLOBALLY:
       return produce(state, (draft) => {
         draft.modRegNotification.enabled = action.payload.enabled;
@@ -89,11 +83,14 @@ function settings(state: SettingsState = defaultSettingsState, action: Actions):
         draft.modRegNotification.scheduleType = action.payload;
       });
 
-    case SET_EXPORTED_DATA:
+    case SET_EXPORTED_DATA: {
+      const { colorScheme, ...otherSettings } = action.payload.settings;
       return {
         ...state,
-        ...action.payload.settings,
+        ...otherSettings,
+        colorScheme: colorSchemeToPreference(action.payload.settings.colorScheme),
       };
+    }
 
     case SET_MODULE_TABLE_SORT:
       return {

website/src/types/export.ts

@@ -1,6 +1,6 @@
 import { SemTimetableConfig } from 'types/timetables';
 import { Semester, ModuleCode } from 'types/modules';
-import { Mode } from 'types/settings';
+import type { ColorScheme } from 'types/settings';
 import { ColorMapping, ThemeState } from 'types/reducers';
 
 export type ExportData = {
@@ -10,6 +10,6 @@ export type ExportData = {
   readonly hidden: ModuleCode[];
   readonly theme: ThemeState;
   readonly settings: {
-    mode: Mode;
+    colorScheme: ColorScheme;
   };
 };

website/src/types/reducers.ts

@@ -1,7 +1,7 @@
 import { AxiosError } from 'axios';
 import { RegPeriodType, ScheduleType } from 'config';
 
-import { Mode } from './settings';
+import { ColorSchemePreference } from './settings';
 import { ColorIndex, Lesson, TimetableConfig } from './timetables';
 import {
   Faculty,
@@ -98,7 +98,7 @@ export type ModuleTableOrder = 'exam' | 'mc' | 'code';
 export type SettingsState = {
   readonly newStudent: boolean;
   readonly faculty: Faculty | null;
-  readonly mode: Mode;
+  readonly colorScheme: ColorSchemePreference;
   readonly hiddenInTimetable: ModuleCode[];
   readonly modRegNotification: ModRegNotificationSettings;
   readonly moduleTableOrder: ModuleTableOrder;