From f72eadf11371918db9bd195c39ca520044ab0414 Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Wed, 1 Oct 2025 02:20:45 +0530 Subject: [PATCH] fix:fixed Flash of light screen issue (FOUC) - Added ColorModeScript (kept in body) to apply color mode before first pain - Replace invalid CSS selectors Signed-off-by: Saurabhsing21 --- app/layout.tsx | 9 ++++++--- app/styles/globals.css | 4 ++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index f7bd3fb..ad137e7 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,8 @@ import type { Metadata } from "next"; import "./styles/globals.css"; import { GeistSans } from "geist/font/sans"; +import { ColorModeScript } from "@chakra-ui/react"; +import { theme } from "./styles/theme"; import { Providers } from "./providers"; import { GoogleAnalytics } from "@next/third-parties/google"; import IconLink from "./components/IconLink"; @@ -29,14 +31,15 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - + - + + -
{children}
+
{children}
 diff --git a/app/styles/globals.css b/app/styles/globals.css index 45a27d6..88f72e7 100644 --- a/app/styles/globals.css +++ b/app/styles/globals.css @@ -45,7 +45,7 @@ html { --success-dark: 120 90% 45%; } -:root[data-theme="dark"] { +html[data-theme="dark"] { --background: var(--background-dark); --text: var(--text-dark); --border-color: var(--border-color-dark); @@ -56,7 +56,7 @@ html { --success: var(--success-dark); } -:root[data-theme="light"] { +html[data-theme="light"] { --background: var(--background-light); --text: var(--text-light); --border-color: var(--border-color-light);