Pada dokumentasi Shadcn UI belum terdapat panduan penerapan dark mode untuk aplikasi berbasis TanStack Start.
Pada skenario ini, next-themes dapat digunakan.
Setelah menyiapkan aplikasi dan menginstal next-themes, pada _root.tsx, gunakan <ThemeProvider> untuk mengapit isi dari body tag.
// __root.tsx
...
function RootDocument({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<HeadContent />
</head>
<body>
<ThemeProvider
attribute='class'
defaultTheme='system'
enableSystem
disableTransitionOnChange
>
<Header />
{children}
</ThemeProvider>
...
Tinggalkan Balasan