Add dark mode (#554)

src/redux/dark-mode/methods.ts

@@ -0,0 +1,45 @@
+import { store } from '..'
+import { DarkModeConfig, DarkModeConfigActionType, SetDarkModeConfigAction } from './types'
+
+export const setDarkMode = (darkMode: boolean): void => {
+  const action: SetDarkModeConfigAction = {
+    type: DarkModeConfigActionType.SET_DARK_MODE,
+    darkMode: darkMode
+  }
+  store.dispatch(action)
+}
+
+export const saveToLocalStorage = (darkModeConfig: DarkModeConfig): void => {
+  try {
+    window.localStorage.setItem('nightMode', String(darkModeConfig.darkMode))
+  } catch (e) {
+    console.error('Saving dark-mode setting to local storage failed: ', e)
+  }
+}
+
+export const loadFromLocalStorage = (): DarkModeConfig | undefined => {
+  try {
+    const storedValue = window.localStorage.getItem('nightMode')
+    if (!storedValue) {
+      return undefined
+    }
+    return {
+      darkMode: storedValue === 'true'
+    }
+  } catch (e) {
+    console.error('Loading dark-mode setting from local storage failed: ', e)
+    return undefined
+  }
+}
+
+export const determineDarkModeBrowserSetting = (): DarkModeConfig | undefined => {
+  try {
+    const mediaQueryResult = window.matchMedia('(prefers-color-scheme: dark)').matches
+    return {
+      darkMode: mediaQueryResult
+    }
+  } catch (e) {
+    console.error('Can not determine dark-mode setting from browser: ', e)
+    return undefined
+  }
+}

src/redux/dark-mode/reducers.ts

@@ -0,0 +1,26 @@
+import { Reducer } from 'redux'
+import { determineDarkModeBrowserSetting, loadFromLocalStorage, saveToLocalStorage } from './methods'
+import { DarkModeConfig, DarkModeConfigActions, DarkModeConfigActionType, SetDarkModeConfigAction } from './types'
+
+export const getInitialState = (): DarkModeConfig => {
+  const initialMode = loadFromLocalStorage() ?? determineDarkModeBrowserSetting() ?? {
+    darkMode: false
+  }
+  saveToLocalStorage(initialMode)
+  return initialMode
+}
+
+export const DarkModeConfigReducer: Reducer<DarkModeConfig, DarkModeConfigActions> = (state: DarkModeConfig = getInitialState(), action: DarkModeConfigActions) => {
+  let darkModeConfigState: DarkModeConfig
+  switch (action.type) {
+    case DarkModeConfigActionType.SET_DARK_MODE:
+      darkModeConfigState = {
+        ...state,
+        darkMode: (action as SetDarkModeConfigAction).darkMode
+      }
+      saveToLocalStorage(darkModeConfigState)
+      return darkModeConfigState
+    default:
+      return state
+  }
+}

src/redux/dark-mode/types.ts

@@ -0,0 +1,17 @@
+import { Action } from 'redux'
+
+export enum DarkModeConfigActionType {
+  SET_DARK_MODE = 'dark-mode/set',
+}
+
+export interface DarkModeConfig {
+  darkMode: boolean
+}
+
+export interface DarkModeConfigActions extends Action<DarkModeConfigActionType> {
+  type: DarkModeConfigActionType
+}
+
+export interface SetDarkModeConfigAction extends DarkModeConfigActions {
+  darkMode: boolean
+}

src/redux/index.ts

@@ -5,6 +5,8 @@ import { ApiUrlObject } from './api-url/types'
 import { BannerReducer } from './banner/reducers'
 import { BannerState } from './banner/types'
 import { ConfigReducer } from './config/reducers'
+import { DarkModeConfigReducer } from './dark-mode/reducers'
+import { DarkModeConfig } from './dark-mode/types'
 import { EditorConfigReducer } from './editor/reducers'
 import { EditorConfig } from './editor/types'
 import { UserReducer } from './user/reducers'
@@ -16,6 +18,7 @@ export interface ApplicationState {
   banner: BannerState;
   apiUrl: ApiUrlObject;
   editorConfig: EditorConfig;
+  darkMode: DarkModeConfig;
 }
 
 export const allReducers: Reducer<ApplicationState> = combineReducers<ApplicationState>({
@@ -23,7 +26,8 @@ export const allReducers: Reducer<ApplicationState> = combineReducers<Applicatio
   config: ConfigReducer,
   banner: BannerReducer,
   apiUrl: ApiUrlReducer,
-  editorConfig: EditorConfigReducer
+  editorConfig: EditorConfigReducer,
+  darkMode: DarkModeConfigReducer
 })
 
 export const store = createStore(allReducers)