feat(ui): implement dark mode with theme toggle
- 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
@@ -33,8 +33,12 @@ export default function SettingsPage() {
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [saved, setSaved] = useState(false)
|
||||
const [darkMode, setDarkMode] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem('theme')
|
||||
setDarkMode(savedTheme === 'dark')
|
||||
|
||||
const loadSettings = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${import.meta.env.VITE_API_URL}/settings`)
|
||||
@@ -73,27 +77,27 @@ export default function SettingsPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl space-y-6">
|
||||
<div className={`max-w-4xl space-y-6 ${darkMode ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-3xl font-bold text-slate-900">Einstellungen</h1>
|
||||
<p className="text-slate-500">Konfiguriere Rippy nach deinen Wünschen</p>
|
||||
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Einstellungen</h1>
|
||||
<p className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Konfiguriere Rippy nach deinen Wünschen</p>
|
||||
</div>
|
||||
|
||||
{saved && (
|
||||
<div className="p-4 bg-emerald-50 border border-emerald-200 rounded-lg flex items-center gap-3 text-emerald-700">
|
||||
<div className={`p-4 rounded-lg flex items-center gap-3 font-medium ${darkMode ? 'bg-emerald-900/30 border border-emerald-700 text-emerald-400' : 'bg-emerald-50 border border-emerald-200 text-emerald-700'}`}>
|
||||
<CheckCircle className="flex-shrink-0" size={24} />
|
||||
<span className="font-medium">Einstellungen erfolgreich gespeichert!</span>
|
||||
<span>Einstellungen erfolgreich gespeichert!</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<div className={`rounded-xl shadow-sm overflow-hidden ${darkMode ? 'bg-slate-800 border border-slate-700' : 'bg-white border border-slate-200'}`}>
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-slate-200">
|
||||
<TabButton icon={Disc} label="Ripping" isActive={true} />
|
||||
<TabButton icon={Cpu} label="Verarbeitung" isActive={false} />
|
||||
<TabButton icon={Database} label="Datenbank" isActive={false} />
|
||||
<TabButton icon={Globe} label="APIs" isActive={false} />
|
||||
<TabButton icon={AlertCircle} label="Benachrichtigungen" isActive={false} />
|
||||
<div className={`flex ${darkMode ? 'border-slate-700' : 'border-slate-200'} border-b`}>
|
||||
<TabButton icon={Disc} label="Ripping" isActive={true} darkMode={darkMode} />
|
||||
<TabButton icon={Cpu} label="Verarbeitung" isActive={false} darkMode={darkMode} />
|
||||
<TabButton icon={Database} label="Datenbank" isActive={false} darkMode={darkMode} />
|
||||
<TabButton icon={Globe} label="APIs" isActive={false} darkMode={darkMode} />
|
||||
<TabButton icon={AlertCircle} label="Benachrichtigungen" isActive={false} darkMode={darkMode} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
@@ -119,10 +123,11 @@ export default function SettingsPage() {
|
||||
<Toggle
|
||||
checked={settings.ripAllTracks}
|
||||
onChange={(v) => handleChange('ripAllTracks', v)}
|
||||
darkMode={darkMode}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
|
||||
<div className={`flex items-center justify-between p-4 ${darkMode ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-purple-100 rounded-lg">
|
||||
<Disc className="text-purple-600" size={20} />
|
||||
@@ -135,10 +140,11 @@ export default function SettingsPage() {
|
||||
<Toggle
|
||||
checked={settings.mainFeatureOnly}
|
||||
onChange={(v) => handleChange('mainFeatureOnly', v)}
|
||||
darkMode={darkMode}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
|
||||
<div className={`flex items-center justify-between p-4 ${darkMode ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-emerald-100 rounded-lg">
|
||||
<Disc className="text-emerald-600" size={20} />
|
||||
@@ -151,6 +157,7 @@ export default function SettingsPage() {
|
||||
<Toggle
|
||||
checked={settings.autoEject}
|
||||
onChange={(v) => handleChange('autoEject', v)}
|
||||
darkMode={darkMode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,17 +172,17 @@ export default function SettingsPage() {
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-slate-700">
|
||||
<label className={`block text-sm font-medium ${darkMode ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
Hauptverzeichnis
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={settings.outputDir}
|
||||
onChange={(e) => handleChange('outputDir', e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
|
||||
className={`w-full px-3 py-2 ${darkMode ? 'bg-slate-800 border-slate-600 text-slate-200 focus:ring-indigo-500' : 'bg-white border-slate-300 text-slate-900 focus:ring-indigo-600'} border rounded-lg focus:ring-2 focus:border-transparent transition-all`}
|
||||
placeholder="/app/media"
|
||||
/>
|
||||
<p className="text-xs text-slate-500">Basisverzeichnis für alle Ausgaben</p>
|
||||
<p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Basisverzeichnis für alle Ausgaben</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
@@ -308,13 +315,13 @@ export default function SettingsPage() {
|
||||
)
|
||||
}
|
||||
|
||||
function TabButton({ icon: Icon, label, isActive }: { icon: any, label: string, isActive: boolean }) {
|
||||
function TabButton({ icon: Icon, label, isActive, darkMode }: { icon: any, label: string, isActive: boolean, darkMode: boolean }) {
|
||||
return (
|
||||
<button
|
||||
className={`px-6 py-3 text-sm font-medium transition-colors border-b-2 ${
|
||||
isActive
|
||||
? 'border-indigo-600 text-indigo-600'
|
||||
: 'border-transparent text-slate-500 hover:text-slate-700'
|
||||
? `${darkMode ? 'border-indigo-500 text-indigo-400' : 'border-indigo-600 text-indigo-600'}`
|
||||
: `${darkMode ? 'border-transparent text-slate-400 hover:text-slate-300' : 'border-transparent text-slate-500 hover:text-slate-700'}`
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
@@ -322,12 +329,12 @@ function TabButton({ icon: Icon, label, isActive }: { icon: any, label: string,
|
||||
)
|
||||
}
|
||||
|
||||
function Toggle({ checked, onChange }: { checked: boolean, onChange: (v: boolean) => void }) {
|
||||
function Toggle({ checked, onChange, darkMode }: { checked: boolean, onChange: (v: boolean) => void, darkMode: boolean }) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => onChange(!checked)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
||||
checked ? 'bg-indigo-600' : 'bg-slate-300'
|
||||
checked ? 'bg-indigo-600' : darkMode ? 'bg-slate-600' : 'bg-slate-300'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
|
||||
Reference in New Issue
Block a user