feat: manually switch color scheme

2022-12-24 23:58:31 +01:00
parent cabaee588b
commit ef21bac59b
4 changed files with 140 additions and 28 deletions
--- a/frontend/src/components/account/ThemeSwitcher.tsx
+++ b/frontend/src/components/account/ThemeSwitcher.tsx
@@ -0,0 +1,67 @@
+import {
+  Box,
+  Center,
+  ColorScheme,
+  SegmentedControl,
+  Stack,
+  useMantineColorScheme,
+} from "@mantine/core";
+import { useColorScheme } from "@mantine/hooks";
+import { useState } from "react";
+import { TbDeviceLaptop, TbMoon, TbSun } from "react-icons/tb";
+import usePreferences from "../../hooks/usePreferences";
+
+const ThemeSwitcher = () => {
+  const preferences = usePreferences();
+  const [colorScheme, setColorScheme] = useState(
+    preferences.get("colorScheme")
+  );
+  const { toggleColorScheme } = useMantineColorScheme();
+  const systemColorScheme = useColorScheme();
+
+  return (
+    <Stack>
+      <SegmentedControl
+        value={colorScheme}
+        onChange={(value) => {
+          preferences.set("colorScheme", value);
+          setColorScheme(value);
+          toggleColorScheme(
+            value == "system" ? systemColorScheme : (value as ColorScheme)
+          );
+        }}
+        data={[
+          {
+            label: (
+              <Center>
+                <TbMoon size={16} />
+                <Box ml={10}>Dark</Box>
+              </Center>
+            ),
+            value: "dark",
+          },
+          {
+            label: (
+              <Center>
+                <TbSun size={16} />
+                <Box ml={10}>Light</Box>
+              </Center>
+            ),
+            value: "light",
+          },
+          {
+            label: (
+              <Center>
+                <TbDeviceLaptop size={16} />
+                <Box ml={10}>System</Box>
+              </Center>
+            ),
+            value: "system",
+          },
+        ]}
+      />
+    </Stack>
+  );
+};
+
+export default ThemeSwitcher;