GKaszewski/pocket-chords
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-04-08 03:56:05 +02:00
parent 582bdbd901
commit bef3bb8fed
2 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/app/components/bottom-nav.tsx
View File

@@ -1,11 +1,15 @@
import { NavLink } from "react-router"; 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 { cn } from "~/lib/utils";
import { Button } from "~/components/ui/button";
export function BottomNav() { export function BottomNav() {
const { resolvedTheme, setTheme } = useTheme();
return ( return (
<nav className="border-t bg-background shrink-0"> <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 <NavLink
to="/" to="/"
end end
@@ -21,6 +25,20 @@ export function BottomNav() {
<Music className="w-5 h-5" /> <Music className="w-5 h-5" />
<span>Library</span> <span>Library</span>
</NavLink> </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> </div>
</nav> </nav>
); );

13
app/app/root.tsx
View File

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