From f72eadf11371918db9bd195c39ca520044ab0414 Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Wed, 1 Oct 2025 02:20:45 +0530 Subject: [PATCH 1/5] 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); From 04120a88828e3bb6df74eaf0d6db893252a571cc Mon Sep 17 00:00:00 2001 From: JeelRajodiya Date: Sun, 2 Nov 2025 17:17:53 +0530 Subject: [PATCH 2/5] feat: add TypeScript declaration for CSS modules --- app/globals.d.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 app/globals.d.ts diff --git a/app/globals.d.ts b/app/globals.d.ts new file mode 100644 index 0000000..35306c6 --- /dev/null +++ b/app/globals.d.ts @@ -0,0 +1 @@ +declare module '*.css'; From 9e0b1df790a4c19dfd8d6920e35857a8c38b1e3b Mon Sep 17 00:00:00 2001 From: JeelRajodiya Date: Sun, 2 Nov 2025 17:36:00 +0530 Subject: [PATCH 3/5] fix: change initial color mode to dark in theme configuration --- app/styles/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/styles/theme.ts b/app/styles/theme.ts index 3c35492..4ab7f90 100644 --- 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: { From 914542237b76ae2efd43d74676f6f3e616cb0d03 Mon Sep 17 00:00:00 2001 From: JeelRajodiya Date: Sun, 2 Nov 2025 17:36:12 +0530 Subject: [PATCH 4/5] fix: remove suppressHydrationWarning from HTML and body tags in layout --- app/layout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index ad137e7..eda4bba 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -31,12 +31,12 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - + - +
{children}
From 427587bf43c8d3ed87c3b2c9ec987a9a83c2acd3 Mon Sep 17 00:00:00 2001 From: JeelRajodiya Date: Sun, 2 Nov 2025 17:37:24 +0530 Subject: [PATCH 5/5] style: kept :root in the globals --- app/styles/globals.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/styles/globals.css b/app/styles/globals.css index 88f72e7..c13828d 100644 --- 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%; @@ -45,7 +47,7 @@ html { --success-dark: 120 90% 45%; } -html[data-theme="dark"] { +:root[data-theme="dark"] { --background: var(--background-dark); --text: var(--text-dark); --border-color: var(--border-color-dark); @@ -56,7 +58,7 @@ html[data-theme="dark"] { --success: var(--success-dark); } -html[data-theme="light"] { +:root[data-theme="light"] { --background: var(--background-light); --text: var(--text-light); --border-color: var(--border-color-light);