From ec7931cf63d245e8762703014dec98753a753f68 Mon Sep 17 00:00:00 2001 From: Sangbin Lee Date: Fri, 5 May 2023 01:57:19 +0900 Subject: [PATCH] =?UTF-8?q?:poop:=20=ED=85=8C=EB=A7=88=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EC=BD=94=EB=93=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.ts | 16 ---------------- .storybook/preview.tsx | 32 ++++++++++++++++++++++++++++++++ app/ThemeSwitcher.tsx | 15 +++++++++++++++ app/layout.tsx | 4 +++- 4 files changed, 50 insertions(+), 17 deletions(-) delete mode 100644 .storybook/preview.ts create mode 100644 .storybook/preview.tsx create mode 100644 app/ThemeSwitcher.tsx diff --git a/.storybook/preview.ts b/.storybook/preview.ts deleted file mode 100644 index f794ba3..0000000 --- a/.storybook/preview.ts +++ /dev/null @@ -1,16 +0,0 @@ -import "@/mds/style.linaria.global"; -import { Preview } from "@storybook/react"; - -const preview: Preview = { - parameters: { - actions: { argTypesRegex: "^on[A-Z].*" }, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/ - } - } - } -}; - -export default preview; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx new file mode 100644 index 0000000..279e98a --- /dev/null +++ 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 ; + } + ] +}; + +export default preview; diff --git a/app/ThemeSwitcher.tsx b/app/ThemeSwitcher.tsx new file mode 100644 index 0000000..7169912 --- /dev/null +++ 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 ; +}; diff --git a/app/layout.tsx b/app/layout.tsx index 84178e0..3c0e2a5 100644 --- 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 ( - + + {children}