feat: allow users to override color scheme (closes #138)

src/store/settings/actions.ts

@@ -1,7 +1,9 @@
 import { createAction } from '@reduxjs/toolkit';
+import { ColorScheme } from './types';
 
 export const setJellyfinCredentials = createAction<{ access_token: string, user_id: string, uri: string, device_id: string; }>('SET_JELLYFIN_CREDENTIALS');
 export const setBitrate = createAction<number>('SET_BITRATE');
 export const setOnboardingStatus = createAction<boolean>('SET_ONBOARDING_STATUS');
 export const setReceivedErrorReportingAlert = createAction<void>('SET_RECEIVED_ERROR_REPORTING_ALERT');
-export const setEnablePlaybackReporting = createAction<boolean>('SET_ENABLE_PLAYBACK_REPORTING');
+export const setEnablePlaybackReporting = createAction<boolean>('SET_ENABLE_PLAYBACK_REPORTING');
+export const setColorScheme = createAction<ColorScheme>('SET_COLOR_SCHEME');

src/store/settings/index.ts

@@ -1,5 +1,6 @@
 import { createReducer } from '@reduxjs/toolkit';
-import { setReceivedErrorReportingAlert, setBitrate, setJellyfinCredentials, setOnboardingStatus, setEnablePlaybackReporting } from './actions';
+import { setReceivedErrorReportingAlert, setBitrate, setJellyfinCredentials, setOnboardingStatus, setEnablePlaybackReporting, setColorScheme } from './actions';
+import { ColorScheme } from './types';
 
 interface State {
     jellyfin?: {
@@ -12,6 +13,7 @@ interface State {
     isOnboardingComplete: boolean;
     hasReceivedErrorReportingAlert: boolean;
     enablePlaybackReporting: boolean;
+    colorScheme: ColorScheme;
 }
 
 const initialState: State = {
@@ -19,6 +21,7 @@ const initialState: State = {
     isOnboardingComplete: false,
     hasReceivedErrorReportingAlert: false,
     enablePlaybackReporting: true,
+    colorScheme: ColorScheme.System,
 };
 
 const settings = createReducer(initialState, builder => {
@@ -42,6 +45,10 @@ const settings = createReducer(initialState, builder => {
         ...state,
         enablePlaybackReporting: action.payload,
     }));
+    builder.addCase(setColorScheme, (state, action) => ({
+        ...state,
+        colorScheme: action.payload,
+    }));
 });
 
 export default settings;

src/store/settings/types.ts

@@ -0,0 +1,5 @@
+export enum ColorScheme {
+    System = 'system',
+    Light = 'light',
+    Dark = 'dark',
+}