light/dark mode

frontend/style.css

@@ -1,15 +1,16 @@
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
 :root {
-    --bg-primary: #0a0e27;
+    --bg-primary: #000000;
-    --bg-secondary: #141829;
+    --bg-secondary: rgba(0, 0, 0, 0.85);
-    --bg-tertiary: #1a1f3a;
+    --bg-tertiary: rgba(255, 255, 255, 0.05);
-    --text-primary: #e8eaf6;
+    --text-primary: #ffffff;
-    --text-secondary: #b0b0c0;
+    --text-secondary: rgba(255, 255, 255, 0.8);
-    --accent: #6366f1;
+    --accent: #ffffff;
-    --accent-hover: #818cf8;
+    --accent-hover: #e6e6e6;
-    --border: #2a2f4a;
+    --border: rgba(255, 255, 255, 0.1);
     --shadow: rgba(0, 0, 0, 0.4);
+    color-scheme: dark;
 }
 
 html, body { height: 100%; }
@@ -27,16 +28,21 @@ body.drawer-open {
     overflow: hidden;
 }
 
+body:not(.theme-light) {
+    color-scheme: dark;
+}
+
 body.theme-light {
-    --bg-primary: #f6f7fb;
+    --bg-primary: #ffffff;
-    --bg-secondary: #ffffff;
+    --bg-secondary: rgba(0, 0, 0, 0.08);
-    --bg-tertiary: #eef1f7;
+    --bg-tertiary: rgba(0, 0, 0, 0.07);
-    --text-primary: #0f172a;
+    --text-primary: #000000;
-    --text-secondary: #475569;
+    --text-secondary: rgba(0, 0, 0, 0.7);
-    --accent: #2563eb;
+    --accent: #000000;
-    --accent-hover: #1d4ed8;
+    --accent-hover: #1a1a1a;
-    --border: #e2e8f0;
+    --border: rgba(0, 0, 0, 0.08);
-    --shadow: rgba(15, 23, 42, 0.12);
+    --shadow: rgba(0, 0, 0, 0.1);
+    color-scheme: light;
 }
 
 /* Top Bar */
@@ -52,6 +58,7 @@ body.theme-light {
     z-index: 100;
     border-bottom: 1px solid var(--border);
     gap: 24px;
+    backdrop-filter: blur(12px);
 }
 
 .logo {
@@ -82,7 +89,7 @@ body.theme-light {
     outline: none;
     border-color: var(--accent);
     background: var(--bg-tertiary);
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
 }
 
 .search-container input::placeholder {
@@ -128,7 +135,7 @@ body.theme-light {
 }
 
 body.theme-light .icon-svg {
-    filter: invert(20%) saturate(0%);
+    filter: invert(0%) saturate(0%);
 }
 
 body.theme-light .icon-btn:hover .icon-svg {
@@ -175,6 +182,12 @@ body.theme-light .icon-btn:hover .icon-svg {
     border-left: 1px solid var(--border);
     display: flex;
     flex-direction: column;
+    backdrop-filter: blur(15px);
+}
+
+body.theme-light .sidebar {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
 }
 
 .sidebar.open {
@@ -284,13 +297,65 @@ body.theme-light .icon-btn:hover .icon-svg {
     color: var(--text-primary);
     cursor: pointer;
     font-size: 14px;
+    color-scheme: dark;
+    appearance: none;
+    background-image:
+        linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
+        linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%),
+        linear-gradient(to right, transparent, transparent);
+    background-position:
+        calc(100% - 16px) calc(1em + 1px),
+        calc(100% - 11px) calc(1em + 1px),
+        100% 0;
+    background-size:
+        5px 5px,
+        5px 5px,
+        2.5em 2.5em;
+    background-repeat: no-repeat;
+}
+
+.setting-item select:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
+}
+
+body.theme-light .setting-item select:focus {
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
+}
+
+.setting-item select,
+.setting-item select option,
+.setting-item select optgroup {
+    background-color: #0a0a0a;
+    color: #ffffff;
+}
+
+body.theme-light .setting-item select {
+    color-scheme: light;
+}
+
+body.theme-light .setting-item select,
+body.theme-light .setting-item select option,
+body.theme-light .setting-item select optgroup {
+    background-color: #ffffff;
+    color: #000000;
+}
+.setting-item select option {
+    background: #0a0a0a;
+    color: #ffffff;
+}
+
+body.theme-light .setting-item select option {
+    background: #ffffff;
+    color: #000000;
 }
 
 /* Overlay */
 .sidebar-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.4);
+    background: rgba(0, 0, 0, 0.6);
     display: none;
     z-index: 1000;
     transition: opacity 0.3s ease;
@@ -327,6 +392,7 @@ body.theme-light .icon-btn:hover .icon-svg {
     display: flex;
     flex-direction: column;
     height: 100%;
+    border: 1px solid var(--border);
 }
 
 .video-card:hover {