fix: theme flash on load

kobaltedev · Oct 11, 2024 · 58eab9b · 58eab9b
1 parent 1764559
commit 58eab9b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/docs/src/entry-server.tsx b/docs/src/entry-server.tsx
@@ -1,4 +1,4 @@
-import { getTheme } from "@kobalte/solidbase/client";
+import { SolidBaseServerScript, getTheme } from "@kobalte/solidbase/client";
 // @refresh reload
 import { StartServer, createHandler } from "@solidjs/start/server";
 
@@ -10,6 +10,7 @@ export default createHandler(() => (
 					<meta charset="utf-8" />
 					<meta name="viewport" content="width=device-width, initial-scale=1" />
 					<link rel="icon" href="/favicon.ico" />
+					<SolidBaseServerScript />
 					{assets}
 				</head>
 				<body>

diff --git a/src/client/index.tsx b/src/client/index.tsx
@@ -48,4 +48,20 @@ function Layout(rootProps: RouteSectionProps) {
 	);
 }
 
+export function SolidBaseServerScript() {
+	return (
+		<script>
+			{`
+				function getThemeCookie() {
+					if (!document.cookie) return undefined;
+					const match = document.cookie.match(new RegExp(\`\\\\W?theme=(?<theme>\\\\w+)\`));
+					return match?.groups?.theme;
+				}
+
+				console.log("data-theme", getThemeCookie() ?? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"));
+			`}
+		</script>
+	);
+}
+
 export { getTheme, setTheme } from "./theme";