init

components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -0,0 +1,26 @@
+import { ActionIcon, Group, useMantineColorScheme } from "@mantine/core";
+import { IconMoonStars, IconSun } from "@tabler/icons";
+
+export function ColorSchemeToggle() {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+
+  return (
+    <Group position="center" mt="xl">
+      <ActionIcon
+        onClick={() => toggleColorScheme()}
+        size="xl"
+        sx={(theme) => ({
+          backgroundColor:
+            theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
+          color: theme.colorScheme === "dark" ? theme.colors.yellow[4] : theme.colors.blue[6],
+        })}
+      >
+        {colorScheme === "dark" ? (
+          <IconSun size={20} stroke={1.5} />
+        ) : (
+          <IconMoonStars size={20} stroke={1.5} />
+        )}
+      </ActionIcon>
+    </Group>
+  );
+}