From 7965f95930f1ea38168dbf9ad458ffd74aa5794a Mon Sep 17 00:00:00 2001 From: xx7412421-cloud Date: Sun, 21 Jun 2026 06:57:40 +0800 Subject: [PATCH 1/5] docs: document theme bootstrapping Documents the pre-hydration theme script approach for StableRoute-Org/Stableroute-frontend#27. --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index 3ab7b96..1498416 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,13 @@ Next.js app for [StableRoute](https://github.com/your-org/stableroute) — Stell | `npm test` | Run Jest tests | | `npm run lint` | Next.js ESLint | +## Theme bootstrapping + +The root layout includes a tiny inline script that reads `stableroute.theme` +before React hydrates. It applies the `dark` class to `` immediately for +stored dark preferences and for `system` when `prefers-color-scheme: dark` +matches, which avoids a light-to-dark flash on first paint. + ## CI/CD On every push/PR to `main`, GitHub Actions runs: From 8eea7ee86708d8906ca218c2d30c4086ba921da9 Mon Sep 17 00:00:00 2001 From: xx7412421-cloud Date: Sun, 21 Jun 2026 06:58:13 +0800 Subject: [PATCH 2/5] feat: add pre-hydration theme script Injects the theme initialization script before paint for StableRoute-Org/Stableroute-frontend#27. --- src/app/layout.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a926a30..28ce5c2 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,6 +3,7 @@ import "./globals.css"; import { Header } from "@/components/Header"; import { Footer } from "@/components/Footer"; import { ToastProvider } from "@/components/ToastProvider"; +import { buildThemeInitScript } from "@/lib/themeScript"; export const metadata: Metadata = { title: { @@ -28,8 +29,13 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { + const themeInitScript = buildThemeInitScript(); + return ( - + + +