Add system theme to the settings

src/components/App.tsx

@@ -3,7 +3,7 @@ import {
   ColorSchemeProvider,
   MantineProvider,
 } from "@mantine/core";
-import { useHotkeys, useLocalStorage } from "@mantine/hooks";
+import { useColorScheme, useHotkeys, useLocalStorage } from "@mantine/hooks";
 import { Notifications } from "@mantine/notifications";
 import {
   createHashHistory,
@@ -18,11 +18,11 @@ const history = createHashHistory();
 const location = new ReactLocation({ history });
 
 export function App() {
-  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const preferredColorScheme = useColorScheme();
 
   const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
     key: "mantine-color-scheme",
-    defaultValue: prefersDark ? "dark" : "light",
+    defaultValue: preferredColorScheme,
     getInitialValueInEffect: true,
   });
 

src/components/Layout.tsx

@@ -21,11 +21,9 @@ import {
   IconBrandTwitter,
   IconDatabase,
   IconMessage,
-  IconMoonStars,
   IconPlus,
   IconSearch,
   IconSettings,
-  IconSunHigh,
   IconX,
 } from "@tabler/icons-react";
 import { Link, Outlet, useNavigate, useRouter } from "@tanstack/react-location";
@@ -187,23 +185,6 @@ export function Layout() {
           </Navbar.Section>
           <Navbar.Section sx={{ borderTop: border }} p="xs">
             <Center>
-              {config.allowDarkModeToggle && (
-                <Tooltip
-                  label={colorScheme === "dark" ? "Light Mode" : "Dark Mode"}
-                >
-                  <ActionIcon
-                    sx={{ flex: 1 }}
-                    size="xl"
-                    onClick={() => toggleColorScheme()}
-                  >
-                    {colorScheme === "dark" ? (
-                      <IconSunHigh size={20} />
-                    ) : (
-                      <IconMoonStars size={20} />
-                    )}
-                  </ActionIcon>
-                </Tooltip>
-              )}
               {config.allowSettingsModal && (
                 <SettingsModal>
                   <Tooltip label="Settings">

src/components/SettingsModal.tsx

@@ -10,14 +10,21 @@ import {
   Select,
   Stack,
   Text,
+  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 {
+  IconBrightnessHalf,
+  IconMoonStars,
+  IconSunHigh,
+} from "@tabler/icons-react";
 
 export function SettingsModal({ children }: { children: ReactElement }) {
   const [opened, { open, close }] = useDisclosure(false);
@@ -29,6 +36,22 @@ export function SettingsModal({ children }: { children: ReactElement }) {
   const [auth, setAuth] = useState(config.defaultAuth);
   const [base, setBase] = useState("");
   const [version, setVersion] = useState("");
+  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();
@@ -53,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 })}
@@ -335,6 +394,33 @@ export function SettingsModal({ children }: { children: ReactElement }) {
               </Button>
             </Flex>
           </form>
+          {config.allowThemeToggle && (
+            <Stack spacing={0}>
+              <Text children="Theme" />
+              <Tabs variant="pills" value={selectedTheme}>
+                <Tabs.List>
+                  <Tabs.Tab
+                    value="light"
+                    icon={<IconSunHigh size="1rem" />}
+                    children="Light Mode"
+                    onClick={() => onThemeChange("light")}
+                  />
+                  <Tabs.Tab
+                    value="dark"
+                    icon={<IconMoonStars size="1rem" />}
+                    children="Dark Mode"
+                    onClick={() => onThemeChange("dark")}
+                  />
+                  <Tabs.Tab
+                    value="system"
+                    icon={<IconBrightnessHalf size="1rem" />}
+                    children="System theme"
+                    onClick={() => onThemeChange("system")}
+                  />
+                </Tabs.List>
+              </Tabs>
+            </Stack>
+          )}
         </Stack>
       </Modal>
     </>

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;