projects/linker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed theme

Browse Source
This commit is contained in:
Taken
2025-06-26 18:37:48 +02:00
parent 7390964d56
commit 8ab33d96f9
3 changed files with 71 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/(public)/layout.tsx
View File

@@ -1,4 +1,5 @@
import { UserDropdown } from "@/components/auth/user-dropdown" import { UserDropdown } from "@/components/auth/user-dropdown"
import { ThemeToggle } from "@/components/theme-toggle"
import Link from "next/link" import Link from "next/link"
import { ReactNode } from "react" import { ReactNode } from "react"
@@ -9,18 +10,19 @@ export default function PublicLayout({
}) { }) {
return ( return (
<> <>
<nav className="bg-white shadow-sm border-b"> <nav className="bg-background shadow-sm border-b border-border">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16"> <div className="flex justify-between items-center h-16">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Link href="/"> <Link href="/">
<h1 className="text-xl font-bold text-gray-900 hover:text-gray-700 transition-colors cursor-pointer"> <h1 className="text-xl font-bold text-foreground hover:text-muted-foreground transition-colors cursor-pointer">
Linker Linker
</h1> </h1>
</Link> </Link>
</div> </div>
<div> <div className="flex items-center gap-2">
<ThemeToggle />
<UserDropdown /> <UserDropdown />
</div> </div>
</div> </div>

3
src/app/layout.tsx
View File

@@ -1,6 +1,7 @@
import { ReactNode } from "react" import { ReactNode } from "react"
import "./globals.css" import "./globals.css"
import { Toaster } from "@/components/ui/sonner" import { Toaster } from "@/components/ui/sonner"
import { ThemeProvider } from "next-themes"
export default function RootLayout({ export default function RootLayout({
children children
@@ -10,8 +11,10 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body className="antialiased"> <body className="antialiased">
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children} {children}
<Toaster /> <Toaster />
</ThemeProvider>
</body> </body>
</html> </html>
) )

61
src/components/theme-toggle.tsx Normal file
View File

@@ -0,0 +1,61 @@
"use client"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Monitor, Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
export function ThemeToggle() {
const { theme, setTheme } = useTheme()
const [mounted, setMounted] = useState(false)
// Prevent hydration mismatch
useEffect(() => {
setMounted(true)
}, [])
if (!mounted) {
return (
<Button variant="outline" size="icon" disabled>
<Sun className="h-[1.2rem] w-[1.2rem]" />
</Button>
)
}
const getIcon = () => {
switch (theme) {
case "light":
return <Sun className="h-[1.2rem] w-[1.2rem]" />
case "dark":
return <Moon className="h-[1.2rem] w-[1.2rem]" />
default:
return <Monitor className="h-[1.2rem] w-[1.2rem]" />
}
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
{getIcon()}
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("light")}>
<Sun className="mr-2 h-4 w-4" />
<span>Light</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
<Moon className="mr-2 h-4 w-4" />
<span>Dark</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
<Monitor className="mr-2 h-4 w-4" />
<span>System</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}