feat: color scheme toggle

src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css

@@ -0,0 +1,26 @@
+.container {
+    @mixin dark {
+        background-color: var(--mantine-color-dark-7);
+    }
+}
+
+.icon {
+    width: rem(18px);
+    height: rem(18px);
+}
+
+.light {
+    display: block;
+}
+
+.dark {
+    display: none;
+}
+
+:global([data-mantine-color-scheme='dark']) .light {
+    display: none;
+}
+
+:global([data-mantine-color-scheme='dark']) .dark {
+    display: block;
+}

src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -1,28 +1,40 @@
 "use client";
 
-import { Button, Group, useMantineColorScheme } from "@mantine/core";
-import { modals } from "@mantine/modals";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import classNames from "classnames";
+import {
+    ActionIcon,
+    useComputedColorScheme,
+    useMantineColorScheme,
+} from "@mantine/core";
+import style from "./ColorSchemeToggle.module.css";
 
 export function ColorSchemeToggle() {
     const { setColorScheme } = useMantineColorScheme();
+    const computedColorScheme = useComputedColorScheme(undefined, {
+        getInitialValueInEffect: true,
+    });
 
-    const openTestModal = () => {
-        modals.openContextModal({
-            modal: "testModal",
-            title: "Тест",
-            withCloseButton: false,
-            innerProps: {},
-        });
+    const toggleColorScheme = () => {
+        setColorScheme(computedColorScheme === "light" ? "dark" : "light");
     };
 
     return (
-        <Group
-            justify="center"
-            mt="xl">
-            <Button onClick={() => setColorScheme("light")}>Light</Button>
-            <Button onClick={() => setColorScheme("dark")}>Dark</Button>
-            <Button onClick={() => setColorScheme("auto")}>Auto</Button>
-            <Button onClick={() => openTestModal()}>Modal</Button>
-        </Group>
+        <ActionIcon
+            onClick={toggleColorScheme}
+            variant="default"
+            size="xl"
+            radius="lg"
+            aria-label="Toggle color scheme"
+            className={style.container}>
+            <IconSun
+                className={classNames(style.icon, style.light)}
+                stroke={1.5}
+            />
+            <IconMoon
+                className={classNames(style.icon, style.dark)}
+                stroke={1.5}
+            />
+        </ActionIcon>
     );
 }