Hitonabi/rippy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): implement dark mode with theme toggle

Browse Source 
- Add global theme state in App.tsx with localStorage persistence
- Implement dark mode CSS variables in index.css
- Add theme toggle button in sidebar navigation
- Update Dashboard with dark mode support for stats cards and badges
- Update Settings page with dark mode for main layout and toggles

This implements the core dark mode functionality with separation of
concerns - theme state is managed globally in App.tsx and passed down
to child components as props.
This commit is contained in:
Hitonabi
2026-07-21 22:18:59 +02:00
parent ba2429612a
commit 43dfce5233
4 changed files with 200 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/ui/src/App.tsx
+36 -6
View File
@@ -1,5 +1,5 @@
import { useState } from 'react'
import { LayoutDashboard, Disc, Settings, LogOut } from 'lucide-react'
import { useState, useEffect } from 'react'
import { LayoutDashboard, Disc, Settings, LogOut, Sun, Moon } from 'lucide-react'
import Dashboard from './pages/Dashboard'
import MetadataPreview from './pages/MetadataPreview'
import SettingsPage from './pages/Settings'
@@ -8,6 +8,26 @@ type Page = 'dashboard' | 'metadata' | 'settings'
function App() {
const [page, setPage] = useState<Page>('dashboard')
const [darkMode, setDarkMode] = useState(false)
useEffect(() => {
const savedTheme = localStorage.getItem('theme')
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
setDarkMode(true)
document.documentElement.setAttribute('data-theme', 'dark')
} else {
document.documentElement.setAttribute('data-theme', 'light')
}
}, [])
const toggleTheme = () => {
const newTheme = darkMode ? 'light' : 'dark'
setDarkMode(!darkMode)
localStorage.setItem('theme', newTheme)
document.documentElement.setAttribute('data-theme', newTheme)
}
const navItems = [
{ id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
@@ -19,7 +39,7 @@ function App() {
<div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
<div className="flex h-screen overflow-hidden">
{/* Sidebar */}
<aside className="w-64 bg-slate-900 text-white flex flex-col">
<aside className={`w-64 ${darkMode ? 'bg-slate-900' : 'bg-slate-900'} text-white flex flex-col`}>
<div className="p-6">
<div className="flex items-center gap-3">
<div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl">
@@ -32,6 +52,14 @@ function App() {
</div>
</div>
<button
onClick={toggleTheme}
className="mx-3 flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800/50 text-slate-400 hover:bg-slate-700 hover:text-white transition-all duration-200"
title={darkMode ? 'Light Mode' : 'Dark Mode'}
>
{darkMode ? <Sun size={18} /> : <Moon size={18} />}
</button>
<nav className="flex-1 px-3 py-2 space-y-1">
{navItems.map((item) => (
<button
@@ -40,7 +68,9 @@ function App() {
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${
page === item.id
? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/30'
: 'text-slate-400 hover:bg-slate-800 hover:text-white'
: darkMode
? 'text-slate-400 hover:bg-slate-800 hover:text-white'
: 'text-slate-400 hover:bg-slate-700 hover:text-white'
}`}
>
<item.icon size={20} />
@@ -49,8 +79,8 @@ function App() {
))}
</nav>
<div className="p-4 border-t border-slate-800">
<button className="w-full flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors">
<div className={`p-4 border-t ${darkMode ? 'border-slate-800' : 'border-slate-700'}`}>
<button className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${darkMode ? 'text-slate-400 hover:text-white hover:bg-slate-800' : 'text-slate-400 hover:text-white hover:bg-slate-700'}`}>
<LogOut size={20} />
<span className="text-sm">Abmelden</span>
</button>