feat: dark mode with theme toggle button

2026-01-31 04:23:34 -06:00 · 2025-09-13 21:11:16 -05:00
parent a732ff9a15
commit 398a1b9474
9 changed files with 161 additions and 39 deletions
@@ -3,22 +3,30 @@ import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
 import { TanstackDevtools } from "@tanstack/react-devtools";
 import { Theme } from "@radix-ui/themes";
 import "@radix-ui/themes/styles.css";
+import { ThemeProvider } from "next-themes";

 export const Route = createRootRoute({
  component: () => (
-    <Theme appearance="light" accentColor="blue" grayColor="gray">
-      <Outlet />
-      <TanstackDevtools
-        config={{
-          position: "bottom-left",
-        }}
-        plugins={[
-          {
-            name: "Tanstack Router",
-            render: <TanStackRouterDevtoolsPanel />,
-          },
-        ]}
-      />
-    </Theme>
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange={false}
+    >
+      <Theme accentColor="blue" grayColor="gray">
+        <Outlet />
+        <TanstackDevtools
+          config={{
+            position: "bottom-left",
+          }}
+          plugins={[
+            {
+              name: "Tanstack Router",
+              render: <TanStackRouterDevtoolsPanel />,
+            },
+          ]}
+        />
+      </Theme>
+    </ThemeProvider>
  ),
 });