feat: color scheme toggle

src/app/deals/components/Header/Header.tsx

@@ -6,6 +6,7 @@ import { Box, Group, Text } from "@mantine/core";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
+import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
 
 const Header = () => {
     const { projects, setSelectedProject, selectedProject } =
@@ -14,11 +15,14 @@ const Header = () => {
 
     const getDesktopHeader = () => {
         return (
-            <ProjectSelect
+            <>
-                data={projects}
+                <ColorSchemeToggle />
-                value={selectedProject}
+                <ProjectSelect
-                onChange={value => value && setSelectedProject(value)}
+                    data={projects}
-            />
+                    value={selectedProject}
+                    onChange={value => value && setSelectedProject(value)}
+                />
+            </>
         );
     };
 

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 { IconMoon, IconSun } from "@tabler/icons-react";
-import { modals } from "@mantine/modals";
+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 = () => {
+    const toggleColorScheme = () => {
-        modals.openContextModal({
+        setColorScheme(computedColorScheme === "light" ? "dark" : "light");
-            modal: "testModal",
-            title: "Тест",
-            withCloseButton: false,
-            innerProps: {},
-        });
     };
 
     return (
-        <Group
+        <ActionIcon
-            justify="center"
+            onClick={toggleColorScheme}
-            mt="xl">
+            variant="default"
-            <Button onClick={() => setColorScheme("light")}>Light</Button>
+            size="xl"
-            <Button onClick={() => setColorScheme("dark")}>Dark</Button>
+            radius="lg"
-            <Button onClick={() => setColorScheme("auto")}>Auto</Button>
+            aria-label="Toggle color scheme"
-            <Button onClick={() => openTestModal()}>Modal</Button>
+            className={style.container}>
-        </Group>
+            <IconSun
+                className={classNames(style.icon, style.light)}
+                stroke={1.5}
+            />
+            <IconMoon
+                className={classNames(style.icon, style.dark)}
+                stroke={1.5}
+            />
+        </ActionIcon>
     );
 }