fix(dark): 다크모드 새로고침시 transition 효과로 flicker 발생 방지

Author: kyechan99

src/components/layout/Provider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Global, ThemeProvider } from "@emotion/react";
-import Script from "next/script";
+import { useEffect } from "react";
 import { RecoilRoot } from "recoil";
 
 import { rootThemeSetting } from "@/utils/dom";
@@ -13,10 +13,14 @@ export const ScriptDom = () => {
   const stringifyFn = String(rootThemeSetting);
   const fnToRunOnClient = `(${stringifyFn})()`;
 
-  return <Script dangerouslySetInnerHTML={{ __html: fnToRunOnClient }} />;
+  return <script dangerouslySetInnerHTML={{ __html: fnToRunOnClient }} />;
 };
 
 export default function Provider(props: React.PropsWithChildren) {
+  useEffect(() => {
+    document.body.style.transition = "background var(--delay)";
+  }, []);
+
   return (
     <ThemeProvider theme={baseTheme}>
       <Global styles={GlobalStyle(baseTheme)} />

src/styles/GlobalStyle.tsx

@@ -39,11 +39,6 @@ const GlobalStyle = (theme: Theme) => css`
   body {
     color: var(--black);
     background-color: var(--white);
-    transition: background var(--delay);
-    -moz-transition: background var(--delay);
-    -webkit-transition: background var(--delay);
-    -ms-transition: background var(--delay);
-    -o-transition: background var(--delay);
     &.modal-open {
       overflow: hidden;
       padding-right: 1rem;

src/utils/dom.ts

@@ -16,12 +16,6 @@ export function rootThemeSetting() {
 
 export function modalOpenPadding() {
   try {
-    var root = document.documentElement;
-    var themeStorage = localStorage.getItem("theme");
-
-    if (themeStorage) {
-      root.setAttribute("data-theme", themeStorage);
-    }
   } catch (e) {
     console.log(e);
   }