feat(app): add dark/light theme switcher via next-themes

2026-04-08 03:56:05 +02:00
parent 582bdbd901
commit bef3bb8fed
2 changed files with 28 additions and 7 deletions
--- a/app/app/components/bottom-nav.tsx
+++ b/app/app/components/bottom-nav.tsx
@@ -1,11 +1,15 @@
 import { NavLink } from "react-router";
-import { Music } from "lucide-react";
+import { Music, Sun, Moon } from "lucide-react";
+import { useTheme } from "next-themes";
 import { cn } from "~/lib/utils";
+import { Button } from "~/components/ui/button";

 export function BottomNav() {
+  const { resolvedTheme, setTheme } = useTheme();
+
  return (
    <nav className="border-t bg-background shrink-0">
-      <div className="max-w-lg mx-auto flex">
+      <div className="max-w-lg mx-auto flex items-center">
        <NavLink
          to="/"
          end
@@ -21,6 +25,20 @@ export function BottomNav() {
          <Music className="w-5 h-5" />
          <span>Library</span>
        </NavLink>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          className="mr-2 text-muted-foreground hover:text-foreground"
+          onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+          aria-label="Toggle theme"
+        >
+          {resolvedTheme === "dark" ? (
+            <Sun className="w-5 h-5" />
+          ) : (
+            <Moon className="w-5 h-5" />
+          )}
+        </Button>
      </div>
    </nav>
  );
--- a/app/app/root.tsx
+++ b/app/app/root.tsx
@@ -6,6 +6,7 @@ import {
  Scripts,
  ScrollRestoration,
 } from "react-router";
+import { ThemeProvider } from "next-themes";

 import type { Route } from "./+types/root";
 import "./app.css";
@@ -34,11 +35,13 @@ export function Layout({ children }: { children: React.ReactNode }) {
        <Links />
      </head>
      <body>
-        <TooltipProvider>
-          {children}
-          <ScrollRestoration />
-          <Scripts />
-        </TooltipProvider>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <TooltipProvider>
+            {children}
+            <ScrollRestoration />
+            <Scripts />
+          </TooltipProvider>
+        </ThemeProvider>
      </body>
    </html>
  );