66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import {
|
|
HeadContent,
|
|
Outlet,
|
|
Scripts,
|
|
createRootRouteWithContext,
|
|
} from "@tanstack/react-router";
|
|
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
|
|
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: [
|
|
{
|
|
charSet: "utf-8",
|
|
},
|
|
{
|
|
name: "viewport",
|
|
content: "width=device-width, initial-scale=1",
|
|
},
|
|
{
|
|
title: "My App",
|
|
},
|
|
],
|
|
links: [
|
|
{
|
|
rel: "stylesheet",
|
|
href: appCss,
|
|
},
|
|
],
|
|
}),
|
|
|
|
component: RootDocument,
|
|
});
|
|
|
|
function RootDocument() {
|
|
return (
|
|
<html lang="en" suppressHydrationWarning>
|
|
<head>
|
|
<HeadContent />
|
|
<script dangerouslySetInnerHTML={{ __html: themeScript }} />
|
|
</head>
|
|
<body>
|
|
<ThemeProvider>
|
|
<div className="grid min-h-svh grid-rows-[auto_1fr]">
|
|
<Outlet />
|
|
</div>
|
|
<Toaster richColors />
|
|
</ThemeProvider>
|
|
<TanStackRouterDevtools position="bottom-left" />
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|