dark theme

purescraps · May 17, 2024 · d0346b6 · d0346b6
1 parent a7a26fe
commit d0346b6
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 1 deletion.
diff --git a/docs/app/app-layout.tsx b/docs/app/app-layout.tsx
@@ -5,6 +5,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { usePathname } from 'next/navigation';
 import { DocsAnchor } from '../src/components/DocsAnchor';
 import { DocsNavLink } from '../src/components/DocsNavLink';
+import { ColorSchemeToggle } from '../src/components/ColorSchemeToggle';
 
 export function AppLayout({ children }: { children: React.ReactNode }) {
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
@@ -36,6 +37,8 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
               </>
             </DocsAnchor>
 
+            <ColorSchemeToggle />
+
             <DocsAnchor
               href="/playground"
               pos={{ sm: 'relative', md: 'absolute' }}

diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -1,4 +1,4 @@
-import { MantineProvider } from '@mantine/core';
+import { ColorSchemeScript, MantineProvider } from '@mantine/core';
 import type { Metadata } from 'next';
 
 import { theme } from './theme';
@@ -15,6 +15,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <head>
+        <ColorSchemeScript />
+      </head>
       <body>
         <MantineProvider theme={theme}>{children}</MantineProvider>
       </body>

diff --git a/docs/src/components/ColorSchemeToggle.tsx b/docs/src/components/ColorSchemeToggle.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import {
+  MantineColorScheme,
+  Switch,
+  rem,
+  useMantineColorScheme,
+  useMantineTheme,
+} from '@mantine/core';
+import { IconMoonStars, IconSun } from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+
+export function ColorSchemeToggle() {
+  const { setColorScheme, colorScheme } = useMantineColorScheme();
+  const theme = useMantineTheme();
+  // nextjs, isClient'ı kullanmazsak sunucu tarafında da bu bileşeni derlemeye çalışıyor.
+  // html çıktısı sunucu ve istemci tarafında farklı olduğu için de hydration error diye hata veriyor.
+  // her ne kadar en üstte use client, demiş olsak da nextjs bu bileşeni sunucu tarafında da derlemeye çalışıyor.
+  // ben de kendilerinin önerdiği çözümü kullandım:
+  // https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const sunIcon = (
+    <IconSun
+      style={{ width: rem(16), height: rem(16) }}
+      stroke={2.5}
+      color={theme.colors.yellow[4]}
+    />
+  );
+
+  const moonIcon = (
+    <IconMoonStars
+      style={{ width: rem(16), height: rem(16) }}
+      stroke={2.5}
+      color={theme.colors.blue[6]}
+    />
+  );
+
+  if (!isClient) {
+    return <></>;
+  }
+
+  return (
+    <Switch
+      size="md"
+      color="dark.4"
+      onLabel={sunIcon}
+      offLabel={moonIcon}
+      defaultChecked={colorScheme === 'light'}
+      onChange={(ev) => {
+        const selectedColorScheme: MantineColorScheme = ev.currentTarget.checked
+          ? 'light'
+          : 'dark';
+
+        setColorScheme(selectedColorScheme);
+      }}
+    />
+  );
+}