rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-11 09:51:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(dark-mode): add tanstack start guide

Browse Source
This commit is contained in:
Ray
2026-04-14 15:29:26 -04:00
parent 84d1d476b1
commit a757e80242
3 changed files with 200 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/v4/content/docs/dark-mode/index.mdx
View File

File diff suppressed because one or more lines are too long

2
apps/v4/content/docs/dark-mode/meta.json
View File

@@ -1,4 +1,4 @@
{
"title": "Dark mode",
"pages": ["index", "next", "vite", "astro", "remix"]
"pages": ["index", "next", "vite", "astro", "remix", "tanstack-start"]
}

183
apps/v4/content/docs/dark-mode/tanstack-start.mdx Normal file
View File

@@ -0,0 +1,183 @@
---
title: TanStack Start
description: Adding dark mode to your TanStack Start app.
---
<Steps>
## Create a theme provider
TanStack Start uses `ScriptOnce` from `@tanstack/react-router` to inject a script that runs before React hydrates, preventing flash of unstyled content (FOUC).
```tsx title="components/theme-provider.tsx" showLineNumbers
import { createContext, useContext, useEffect, useState } from "react"
import { ScriptOnce } from "@tanstack/react-router"
type Theme = "dark" | "light" | "system"
type ThemeProviderProps = {
children: React.ReactNode
defaultTheme?: Theme
storageKey?: string
}
type ThemeProviderState = {
theme: Theme
setTheme: (theme: Theme) => void
}
const themeScript = `(function(){try{var t=localStorage.getItem('theme');if(t!=='light'&&t!=='dark'&&t!=='system'){t='system'}var d=matchMedia('(prefers-color-scheme: dark)').matches;var r=t==='system'?(d?'dark':'light'):t;var e=document.documentElement;e.classList.add(r);e.style.colorScheme=r}catch(e){}})();`
const ThemeProviderContext = createContext<ThemeProviderState>({
theme: "system",
setTheme: () => {},
})
export function ThemeProvider({
children,
defaultTheme = "system",
storageKey = "theme",
}: ThemeProviderProps) {
const [theme, setThemeState] = useState<Theme>(defaultTheme)
useEffect(() => {
const stored = localStorage.getItem(storageKey)
if (stored === "light" || stored === "dark" || stored === "system") {
setThemeState(stored)
}
}, [storageKey])
useEffect(() => {
const root = document.documentElement
root.classList.remove("light", "dark")
const resolved =
theme === "system"
? window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light"
: theme
root.classList.add(resolved)
root.style.colorScheme = resolved
}, [theme])
useEffect(() => {
if (theme !== "system") return undefined
const media = window.matchMedia("(prefers-color-scheme: dark)")
const onChange = () => {
const root = document.documentElement
root.classList.remove("light", "dark")
const resolved = media.matches ? "dark" : "light"
root.classList.add(resolved)
root.style.colorScheme = resolved
}
media.addEventListener("change", onChange)
return () => media.removeEventListener("change", onChange)
}, [theme])
const setTheme = (next: Theme) => {
localStorage.setItem(storageKey, next)
setThemeState(next)
}
return (
<ThemeProviderContext value={{ theme, setTheme }}>
<ScriptOnce>{themeScript}</ScriptOnce>
{children}
</ThemeProviderContext>
)
}
export function useTheme() {
const context = useContext(ThemeProviderContext)
if (context === undefined)
throw new Error("useTheme must be used within a ThemeProvider")
return context
}
```
## Wrap your root layout
Add the `ThemeProvider` to your root layout and add the `suppressHydrationWarning` prop to the `html` tag.
```tsx {8,19,24-26} title="src/routes/__root.tsx" showLineNumbers
import {
createRootRoute,
HeadContent,
Outlet,
Scripts,
} from "@tanstack/react-router"
import { ThemeProvider } from "@/components/theme-provider"
export const Route = createRootRoute({
head: () => ({
// ...
}),
component: RootComponent,
})
function RootComponent() {
return (
<html lang="en" suppressHydrationWarning>
<head>
<HeadContent />
</head>
<body>
<ThemeProvider defaultTheme="system" storageKey="theme">
<Outlet />
</ThemeProvider>
<Scripts />
</body>
</html>
)
}
```
## Add a mode toggle
Place a mode toggle on your site to toggle between light and dark mode.
```tsx title="components/mode-toggle.tsx" showLineNumbers
import { Moon, Sun } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useTheme } from "@/components/theme-provider"
export function ModeToggle() {
const { setTheme } = useTheme()
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("light")}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
```
</Steps>