Added settings to choose desired UI theme.

bazarr/app/config.py

@@ -52,6 +52,7 @@ defaults = {
         'movie_default_enabled': 'False',
         'movie_default_profile': '',
         'page_size': '25',
+        'theme': 'auto',
         'page_size_manual_search': '10',
         'minimum_score_movie': '70',
         'use_embedded_subs': 'True',

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

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>
   );
 };

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",
+  },
+];

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;