Move theme selection 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,6 +10,8 @@ import {
   Select,
   Stack,
   Text,
+  Tabs,
+  useMantineColorScheme,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { notifications } from "@mantine/notifications";
@@ -18,6 +20,11 @@ import { cloneElement, ReactElement, useEffect, useState } from "react";
 import { 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,7 @@ 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 settings = useLiveQuery(async () => {
     return db.settings.where({ id: "general" }).first();
@@ -335,6 +343,33 @@ export function SettingsModal({ children }: { children: ReactElement }) {
               </Button>
             </Flex>
           </form>
+          {config.allowDarkModeToggle && (
+            <Stack spacing={0}>
+              <Text children="Theme" />
+              <Tabs variant="pills" value={colorScheme}>
+                <Tabs.List>
+                  <Tabs.Tab
+                    value="light"
+                    icon={<IconSunHigh size="1rem" />}
+                    children="Light Mode"
+                    onClick={() => toggleColorScheme()}
+                  />
+                  <Tabs.Tab
+                    value="dark"
+                    icon={<IconMoonStars size="1rem" />}
+                    children="Dark Mode"
+                    onClick={() => toggleColorScheme()}
+                  />
+                  <Tabs.Tab
+                    value="system"
+                    icon={<IconBrightnessHalf size="1rem" />}
+                    children="System theme"
+                    onClick={() => toggleColorScheme()}
+                  />
+                </Tabs.List>
+              </Tabs>
+            </Stack>
+          )}
         </Stack>
       </Modal>
     </>