Added settings to choose desired UI theme.

4 files changed, 40 insertions, 3 deletions

diff --git a/frontend/src/App/theme.tsx b/frontend/src/App/theme.tsx
index 0fe2be9d5..947b4f7a8 100644
--- a/frontend/src/App/theme.tsx
+++ b/frontend/src/App/theme.tsx
@@ -1,3 +1,4 @@
+import { useSystemSettings } from "@/apis/hooks";
 import {
   ColorScheme,
   ColorSchemeProvider,
@@ -34,7 +35,19 @@ const theme: MantineThemeOverride = {
 };
 
 function useAutoColorScheme() {
-  const preferredColorScheme = useColorScheme();
+  const settings = useSystemSettings();
+  const settingsColorScheme = settings.data?.general.theme;
+
+  let preferredColorScheme: ColorScheme = useColorScheme();
+  switch (settingsColorScheme) {
+    case "light":
+      preferredColorScheme = "light" as ColorScheme;
+      break;
+    case "dark":
+      preferredColorScheme = "dark" as ColorScheme;
+      break;
+  }
+
   const [colorScheme, setColorScheme] = useState(preferredColorScheme);
 
   // automatically switch dark/light theme
diff --git a/frontend/src/pages/Settings/UI/index.tsx b/frontend/src/pages/Settings/UI/index.tsx
index 9cb2de367..c7b6ada1b 100644
--- a/frontend/src/pages/Settings/UI/index.tsx
+++ b/frontend/src/pages/Settings/UI/index.tsx
@@ -1,12 +1,12 @@
 import { uiPageSizeKey } from "@/utilities/storage";
 import { FunctionComponent } from "react";
 import { Layout, Section, Selector } from "../components";
-import { pageSizeOptions } from "./options";
+import { colorSchemeOptions, pageSizeOptions } from "./options";
 
 const SettingsUIView: FunctionComponent = () => {
   return (
     <Layout name="Interface">
-      <Section header="UI">
+      <Section header="List View">
         <Selector
           label="Page Size"
           options={pageSizeOptions}
@@ -14,6 +14,14 @@ const SettingsUIView: FunctionComponent = () => {
           defaultValue={50}
         ></Selector>
       </Section>
+      <Section header="Style">
+        <Selector
+          label="Theme"
+          options={colorSchemeOptions}
+          settingKey="settings-general-theme"
+          defaultValue={"auto"}
+        ></Selector>
+      </Section>
     </Layout>
   );
 };
diff --git a/frontend/src/pages/Settings/UI/options.ts b/frontend/src/pages/Settings/UI/options.ts
index 57c79c588..47687c657 100644
--- a/frontend/src/pages/Settings/UI/options.ts
+++ b/frontend/src/pages/Settings/UI/options.ts
@@ -26,3 +26,18 @@ export const pageSizeOptions: SelectorOption<number>[] = [
     value: 1000,
   },
 ];
+
+export const colorSchemeOptions: SelectorOption<string>[] = [
+  {
+    label: "Auto",
+    value: "auto",
+  },
+  {
+    label: "Light",
+    value: "light",
+  },
+  {
+    label: "Dark",
+    value: "dark",
+  },
+];
diff --git a/frontend/src/types/settings.d.ts b/frontend/src/types/settings.d.ts
index 127386118..dc4ed89b5 100644
--- a/frontend/src/types/settings.d.ts
+++ b/frontend/src/types/settings.d.ts
@@ -57,6 +57,7 @@ declare namespace Settings {
     path_mappings: [string, string][];
     path_mappings_movie: [string, string][];
     page_size: number;
+    theme: string;
     port: number;
     upgrade_subs: boolean;
     postprocessing_cmd?: string;