monoadmin/remotelink-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add light/dark/system theme switcher

Browse Source 
- Wrap root layout with ThemeProvider (next-themes, defaultTheme=system)
- Remove hardcoded dark class from <html>
- Add ThemeToggle component with Sun/Moon/Monitor icons and checkmark
  on active selection
- Mount toggle in dashboard header next to user menu

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
monoadmin
2026-04-10 16:44:05 -07:00
parent c361922005
commit e27d4cfa58
3 changed files with 63 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/layout.tsx
View File

@@ -1,6 +1,7 @@
import type { Metadata, Viewport } from 'next'
import { Inter, JetBrains_Mono } from 'next/font/google'
import { SessionProvider } from 'next-auth/react'
import { ThemeProvider } from '@/components/theme-provider'
import './globals.css'
const inter = Inter({ subsets: ["latin"] });
@@ -41,9 +42,16 @@ export default function RootLayout({
children: React.ReactNode
}>) {
return (
<html lang="en" className="dark">
<html lang="en" suppressHydrationWarning>
<body className="font-sans antialiased">
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<SessionProvider>{children}</SessionProvider>
</ThemeProvider>
</body>
</html>
)

5
components/dashboard/header.tsx
View File

@@ -13,6 +13,7 @@ import {
import { Menu, LogOut, Settings, User as UserIcon, Monitor } from 'lucide-react'
import Link from 'next/link'
import { MobileNav } from './mobile-nav'
import { ThemeToggle } from '@/components/theme-toggle'
import { useState } from 'react'
interface Profile {
@@ -78,6 +79,9 @@ export function DashboardHeader({ user, profile }: DashboardHeaderProps) {
<h1 className="text-lg font-semibold hidden sm:block">{title}</h1>
</div>
<div className="flex items-center gap-1">
<ThemeToggle />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="flex items-center gap-2">
@@ -112,6 +116,7 @@ export function DashboardHeader({ user, profile }: DashboardHeaderProps) {
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
<MobileNav

48
components/theme-toggle.tsx Normal file
View File

@@ -0,0 +1,48 @@
'use client'
import { useTheme } from 'next-themes'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Sun, Moon, Monitor, Check } from 'lucide-react'
export function ThemeToggle() {
const { theme, setTheme } = useTheme()
const icon =
theme === 'light' ? <Sun className="h-4 w-4" /> :
theme === 'dark' ? <Moon className="h-4 w-4" /> :
<Monitor className="h-4 w-4" />
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-9 w-9">
{icon}
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme('light')} className="gap-2 cursor-pointer">
<Sun className="h-4 w-4" />
Light
{theme === 'light' && <Check className="h-3.5 w-3.5 ml-auto" />}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('dark')} className="gap-2 cursor-pointer">
<Moon className="h-4 w-4" />
Dark
{theme === 'dark' && <Check className="h-3.5 w-3.5 ml-auto" />}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('system')} className="gap-2 cursor-pointer">
<Monitor className="h-4 w-4" />
System
{theme === 'system' && <Check className="h-3.5 w-3.5 ml-auto" />}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}