fix:fixed Flash of light screen issue (FOUC) (#184)

Saurabhsing21 · JeelRajodiya · web-flow · commit 904f6fc6761a · 2025-11-02T17:37:54.000+05:30
* 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 &lt;saurabhsingh881888@gmail.com&gt;

* feat: add TypeScript declaration for CSS modules

* fix: change initial color mode to dark in theme configuration

* fix: remove suppressHydrationWarning from HTML and body tags in layout

* style: kept :root in the globals

---------

Signed-off-by: Saurabhsing21 &lt;saurabhsingh881888@gmail.com&gt;
Co-authored-by: JeelRajodiya &lt;jeelrajodiyajeel@gmail.com&gt;
diff --git a/app/globals.d.ts b/app/globals.d.ts
@@ -0,0 +1 @@
+declare module '*.css';
diff --git 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";
@@ -34,9 +36,10 @@ export default function RootLayout({
       <head>
         <IconLink />
       </head>
-      <body className={GeistSans.className}>
+      <body>
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
         <Providers>
-          <main>{children}</main>
+          <main className={GeistSans.className}>{children}</main>
         </Providers>
       </body>
     </html>
diff --git a/app/styles/globals.css b/app/styles/globals.css
@@ -2,6 +2,8 @@ body {
   /* padding: 16px; */
   height: 100%;
   margin: 0;
+  background-color: hsl(var(--background));
+  color: hsl(var(--text));
 }
 html {
   height: 100%;
diff --git a/app/styles/theme.ts b/app/styles/theme.ts
@@ -150,7 +150,7 @@ const Modal = {
 
 export const theme = extendTheme({
   config: {
-    initialColorMode: "light",
+    initialColorMode: "dark",
     useSystemColorMode: true,
   },
   styles: {

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,8 @@ body {`
`2`	`2`	`/* padding: 16px; */`
`3`	`3`	`height: 100%;`
`4`	`4`	`margin: 0;`
	`5`	`+ background-color: hsl(var(--background));`
	`6`	`+ color: hsl(var(--text));`
`5`	`7`	`}`
`6`	`8`	`html {`
`7`	`9`	`height: 100%;`