1import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";
2import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
3import { TanStackDevtools } from "@tanstack/react-devtools";
4import Footer from "../components/Footer";
5import Header from "../components/Header";
6
7import appCss from "../styles.css?url";
8
9const THEME_INIT_SCRIPT = `(function(){try{var stored=window.localStorage.getItem('theme');var mode=(stored==='light'||stored==='dark'||stored==='auto')?stored:'auto';var prefersDark=window.matchMedia('(prefers-color-scheme: dark)').matches;var resolved=mode==='auto'?(prefersDark?'dark':'light'):mode;var root=document.documentElement;root.classList.remove('light','dark');root.classList.add(resolved);if(mode==='auto'){root.removeAttribute('data-theme')}else{root.setAttribute('data-theme',mode)}root.style.colorScheme=resolved;}catch(e){}})();`;
10
11export const Route = createRootRoute({
12 head: () => ({
13 meta: [
14 {
15 charSet: "utf-8",
16 },
17 {
18 name: "viewport",
19 content: "width=device-width, initial-scale=1",
20 },
21 {
22 title: "TanStack Start Starter",
23 },
24 ],
25 links: [
26 {
27 rel: "stylesheet",
28 href: appCss,
29 },
30 ],
31 }),
32 shellComponent: RootDocument,
33});
34
35function RootDocument({ children }: { children: React.ReactNode }) {
36 return (
37 <html lang="en" suppressHydrationWarning>
38 <head>
39 <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
40 <HeadContent />
41 </head>
42 <body className="font-sans antialiased [overflow-wrap:anywhere] selection:bg-[rgba(79,184,178,0.24)]">
43 <Header />
44 {children}
45 <Footer />
46 <TanStackDevtools
47 config={{
48 position: "bottom-right",
49 }}
50 plugins={[
51 {
52 name: "Tanstack Router",
53 render: <TanStackRouterDevtoolsPanel />,
54 },
55 ]}
56 />
57 <Scripts />
58 </body>
59 </html>
60 );
61}