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

fix: use Tailwind dark: prefix instead of conditional classes

Browse Source
This commit is contained in:
Hitonabi
2026-07-22 17:11:02 +02:00
parent 886cf4398e
commit 85e072a7dd
3 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/ui/src/App.tsx
+6 -6
View File
@@ -18,10 +18,10 @@ function App() {
]
return (
<div className="min-h-screen bg-slate-50 text-slate-900 font-sans transition-colors duration-300">
<div className="min-h-screen bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100 font-sans transition-colors duration-300">
<div className="flex h-screen overflow-hidden">
{/* Sidebar */}
<aside className={`w-64 flex flex-col ${theme === 'dark' ? 'bg-slate-900 text-slate-100' : 'bg-slate-900 text-slate-100'}`}>
<aside className="w-64 bg-slate-900 text-slate-100 flex flex-col dark:bg-slate-900 dark:text-slate-100">
<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">
@@ -29,7 +29,7 @@ function App() {
</div>
<div>
<h1 className="text-xl font-bold tracking-tight">Rippy</h1>
<p className="text-xs text-slate-400">Automated Ripping</p>
<p className="text-xs text-slate-400 dark:text-slate-500">Automated Ripping</p>
</div>
</div>
</div>
@@ -59,8 +59,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 rounded-lg transition-colors text-slate-400 hover:text-white hover:bg-slate-800">
<div className="p-4 border-t border-slate-800 dark:border-slate-700">
<button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-slate-400 hover:text-white hover:bg-slate-800 dark:text-slate-400 dark:hover:text-white dark:hover:bg-slate-700">
<LogOut size={20} />
<span className="text-sm">Abmelden</span>
</button>
@@ -68,7 +68,7 @@ function App() {
</aside>
{/* Main Content */}
<main className="flex-1 overflow-auto bg-slate-50/50 dark:bg-slate-50/50">
<main className="flex-1 overflow-auto bg-slate-50 dark:bg-slate-950">
<div className="max-w-7xl mx-auto p-6">
{page === 'dashboard' && <Dashboard />}
{page === 'metadata' && <MetadataPreview />}