update

app/component/Settings/Theme.tsx

@@ -0,0 +1,47 @@
+import {
+  Box,
+  Center,
+  SegmentedControl,
+  useMantineColorScheme,
+} from "@mantine/core";
+import { TbMoon, TbRobot, TbSun } from "react-icons/tb";
+
+export function ThemeSetting() {
+  const { colorScheme, setColorScheme } = useMantineColorScheme();
+
+  return (
+    <SegmentedControl
+      value={colorScheme}
+      onChange={(v) => setColorScheme(v as any)}
+      data={[
+        {
+          value: "light",
+          label: (
+            <Center>
+              <TbSun size="1rem" />
+              <Box ml={10}>Light</Box>
+            </Center>
+          ),
+        },
+        {
+          value: "auto",
+          label: (
+            <Center>
+              <TbRobot size="1rem" />
+              <Box ml={10}>Auto</Box>
+            </Center>
+          ),
+        },
+        {
+          value: "dark",
+          label: (
+            <Center>
+              <TbMoon size="1rem" />
+              <Box ml={10}>Dark</Box>
+            </Center>
+          ),
+        },
+      ]}
+    />
+  );
+}