Setup theme logic

src/components/SettingsModal.tsx

@@ -13,11 +13,11 @@ import {
   Tabs,
   useMantineColorScheme,
 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import { useColorScheme, useDisclosure } from "@mantine/hooks";
 import { notifications } from "@mantine/notifications";
 import { useLiveQuery } from "dexie-react-hooks";
 import { cloneElement, ReactElement, useEffect, useState } from "react";
-import { db } from "../db";
+import { ColorTheme, db } from "../db";
 import { config } from "../utils/config";
 import { checkOpenAIKey } from "../utils/openai";
 import {
@@ -36,7 +36,22 @@ export function SettingsModal({ children }: { children: ReactElement }) {
   const [auth, setAuth] = useState(config.defaultAuth);
   const [base, setBase] = useState("");
   const [version, setVersion] = useState("");
-  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  const [selectedTheme, setSelectedTheme] = useState<ColorTheme>("system");
+  const { toggleColorScheme } = useMantineColorScheme();
+
+  const preferredColorScheme = useColorScheme();
+
+  useEffect(() => {
+    if (selectedTheme === "system") {
+      toggleColorScheme(preferredColorScheme);
+    }
+  }, [preferredColorScheme]);
+
+  useEffect(() => {
+    toggleColorScheme(
+      selectedTheme === "system" ? preferredColorScheme : selectedTheme
+    );
+  }, [selectedTheme]);
 
   const settings = useLiveQuery(async () => {
     return db.settings.where({ id: "general" }).first();
@@ -61,8 +76,44 @@ export function SettingsModal({ children }: { children: ReactElement }) {
     if (settings?.openAiApiVersion) {
       setVersion(settings.openAiApiVersion);
     }
+    if (settings?.theme) {
+      setSelectedTheme(settings.theme);
+    }
   }, [settings]);
 
+  const onThemeChange = async (colorTheme: ColorTheme) => {
+    try {
+      setSubmitting(true);
+      await db.settings.where({ id: "general" }).modify((row) => {
+        row.theme = colorTheme;
+        console.log(row);
+      });
+      setSelectedTheme(colorTheme);
+      notifications.show({
+        title: "Saved",
+        message: "Your theme has been saved.",
+      });
+    } catch (error: any) {
+      if (error.toJSON().message === "Network Error") {
+        notifications.show({
+          title: "Error",
+          color: "red",
+          message: "No internet connection.",
+        });
+      }
+      const message = error.response?.data?.error?.message;
+      if (message) {
+        notifications.show({
+          title: "Error",
+          color: "red",
+          message,
+        });
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
   return (
     <>
       {cloneElement(children, { onClick: open })}
@@ -343,28 +394,28 @@ export function SettingsModal({ children }: { children: ReactElement }) {
               </Button>
             </Flex>
           </form>
-          {config.allowDarkModeToggle && (
+          {config.allowThemeToggle && (
             <Stack spacing={0}>
               <Text children="Theme" />
-              <Tabs variant="pills" value={colorScheme}>
+              <Tabs variant="pills" value={selectedTheme}>
                 <Tabs.List>
                   <Tabs.Tab
                     value="light"
                     icon={<IconSunHigh size="1rem" />}
                     children="Light Mode"
-                    onClick={() => toggleColorScheme()}
+                    onClick={() => onThemeChange("light")}
                   />
                   <Tabs.Tab
                     value="dark"
                     icon={<IconMoonStars size="1rem" />}
                     children="Dark Mode"
-                    onClick={() => toggleColorScheme()}
+                    onClick={() => onThemeChange("dark")}
                   />
                   <Tabs.Tab
                     value="system"
                     icon={<IconBrightnessHalf size="1rem" />}
                     children="System theme"
-                    onClick={() => toggleColorScheme()}
+                    onClick={() => onThemeChange("system")}
                   />
                 </Tabs.List>
               </Tabs>

src/db/index.ts

@@ -1,7 +1,10 @@
 import Dexie, { Table } from "dexie";
 import "dexie-export-import";
+import { ColorScheme } from "@mantine/core";
 import { config } from "../utils/config";
 
+export type ColorTheme = ColorScheme | "system";
+
 export interface Chat {
   id: string;
   description: string;
@@ -32,6 +35,7 @@ export interface Settings {
   openAiApiAuth?: 'none' | 'bearer-token' | 'api-key';
   openAiApiBase?: string;
   openAiApiVersion?: string;
+  theme?: ColorTheme;
 }
 
 export class Database extends Dexie {
@@ -58,6 +62,7 @@ export class Database extends Dexie {
         ...(config.defaultKey != '' && { openAiApiKey: config.defaultKey }),
         ...(config.defaultBase != '' && { openAiApiBase: config.defaultBase }),
         ...(config.defaultVersion != '' && { openAiApiVersion: config.defaultVersion }),
+        theme: config.defaultTheme,
       });
     });
   }

src/static/config.json

@@ -5,6 +5,7 @@
     "defaultBase": "",
     "defaultVersion": "",
     "defaultKey": "",
+	"defaultTheme": "system",
     "availableModels": [
       {
         "value": "gpt-3.5-turbo",
@@ -219,7 +220,7 @@
       }
     ],
     "showDownloadLink": true,
-    "allowDarkModeToggle": true,
+    "allowThemeToggle": true,
     "allowSettingsModal": true,
     "allowDatabaseModal": true,
     "showTwitterLink": true,

src/utils/config.ts

@@ -1,17 +1,20 @@
+import { ColorTheme } from '../db'
+
 interface Config {
     defaultModel: AvailableModel["value"];
     defaultType: 'openai' | 'custom';
     defaultAuth: 'none' | 'bearer-token' | 'api-key';
     defaultBase: string;
     defaultVersion: string;
-    defaultKey: string;
+	defaultKey: string;
+	defaultTheme: ColorTheme;
     availableModels: AvailableModel[];
     writingCharacters: WritingCharacter[];
     writingTones: string[];
     writingStyles: string[];
     writingFormats: WritingFormat[];
     showDownloadLink: boolean;
-    allowDarkModeToggle: boolean;
+    allowThemeToggle: boolean;
     allowSettingsModal: boolean;
     allowDatabaseModal: boolean;
     showTwitterLink: boolean;