diff --git a/app/layout.tsx b/app/layout.tsx
index d24ef32..f2569d5 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({ children }: Props) {
             lang="ru"
             {...mantineHtmlProps}>
             <head>
-                <ColorSchemeScript />
+                <ColorSchemeScript defaultColorScheme={"auto"} />
                 <link
                     rel="shortcut icon"
                     href="/favicon.svg"
@@ -43,7 +43,7 @@ export default function RootLayout({ children }: Props) {
             <body>
                 <MantineProvider
                     theme={theme}
-                    defaultColorScheme={"dark"}>
+                    defaultColorScheme={"auto"}>
                     <Header />
                     {children}
                     <Footer />
diff --git a/components/ColorSchemeToggle/ColorSchemeToggle.tsx b/components/ColorSchemeToggle/ColorSchemeToggle.tsx
index 2759331..df89bba 100644
--- a/components/ColorSchemeToggle/ColorSchemeToggle.tsx
+++ b/components/ColorSchemeToggle/ColorSchemeToggle.tsx
@@ -11,7 +11,7 @@ import style from "./ActionToggle.module.css";
 
 export function ColorSchemeToggle() {
     const { setColorScheme } = useMantineColorScheme();
-    const computedColorScheme = useComputedColorScheme("light", {
+    const computedColorScheme = useComputedColorScheme(undefined, {
         getInitialValueInEffect: true,
     });
 
