💩 테마 변경 코드 추가

sendOwlOrganization · May 4, 2023 · ec7931c · ec7931c
1 parent 1d256f7
commit ec7931c
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 17 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -0,0 +1,32 @@
+import "@/mds/style.linaria.global";
+import { Preview } from "@storybook/react";
+import { useEffect } from "react";
+import { useDarkMode } from "storybook-dark-mode";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    }
+  },
+  decorators: [
+    (Story) => {
+      const isDark = useDarkMode();
+
+      useEffect(() => {
+        const html = document.querySelector("html");
+        if (!html) return;
+        html.classList.toggle("light", !isDark);
+        html.classList.toggle("dark", isDark);
+      }, [isDark]);
+
+      return <Story />;
+    }
+  ]
+};
+
+export default preview;
diff --git a/app/ThemeSwitcher.tsx b/app/ThemeSwitcher.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+// FIXME: temporary solution
+export const ThemeSwitcher = () => {
+  const toggleTheme = () => {
+    const html = document.querySelector("html");
+    if (!html) return;
+
+    const isDark = html.classList.contains("light");
+    html.classList.toggle("light", !isDark);
+    html.classList.toggle("dark", isDark);
+  };
+
+  return <button onClick={() => toggleTheme()}>theme</button>;
+};
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import "@/mds/style.linaria.global";
 import { ReactNode } from "react";
 import Providers from "./providers";
+import { ThemeSwitcher } from "./ThemeSwitcher";
 
 export const metadata = {
   title: "Create Next App"
@@ -9,8 +10,9 @@ export const metadata = {
 // pages/_app.tsx와 pages/_document.tsx 파일 대체
 const RootLayout = ({ children }: { children: ReactNode }) => {
   return (
-    <html lang="ko">
+    <html lang="ko" className={"light"}>
       <body>
+        <ThemeSwitcher />
         <Providers>{children}</Providers>
       </body>
     </html>