jntn/zendegi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add dark theme toggle

Browse Source
This commit is contained in:
Jonatan Granqvist
2026-03-02 13:00:30 +01:00
parent 9d5ea49d85
commit de0be12aab
10 changed files with 125 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/web/src/routes/__root.tsx
View File

@@ -10,11 +10,16 @@ import Header from "../components/header";
import appCss from "../index.css?url";
import type { QueryClient } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/sonner";
import { ThemeProvider } from "@/lib/theme";
export interface RouterAppContext {
queryClient: QueryClient;
}
// Inline script that runs before paint to avoid a flash of wrong theme.
// Reads localStorage; falls back to system preference; falls back to dark.
const themeScript = `(function(){try{var t=localStorage.getItem("zendegi-theme");if(!t){t=window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light"}if(t==="dark"){document.documentElement.classList.add("dark")}else{document.documentElement.classList.remove("dark")}}catch(e){}})();`;
export const Route = createRootRouteWithContext<RouterAppContext>()({
head: () => ({
meta: [
@@ -42,16 +47,19 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
function RootDocument() {
return (
<html lang="en" className="dark">
<html lang="en">
<head>
<HeadContent />
<script dangerouslySetInnerHTML={{ __html: themeScript }} />
</head>
<body>
<div className="grid min-h-svh grid-rows-[auto_1fr]">
<Header />
<Outlet />
</div>
<Toaster richColors />
<ThemeProvider>
<div className="grid min-h-svh grid-rows-[auto_1fr]">
<Header />
<Outlet />
</div>
<Toaster richColors />
</ThemeProvider>
<TanStackRouterDevtools position="bottom-left" />
<Scripts />
</body>