Add light theme and fix hardcoded styles

- Add light theme CSS variables in styles.css
- Add 'Light' option to settings in index.html
- Update theme manager defaults in js/storage.js
- Replace hardcoded colors with CSS variables for logo and player bar
- Add support for explicit badge text color customization

index.html

@@ -47,7 +47,7 @@
             <div>
                 <div class="sidebar-logo">
 <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="14.75 14.75 70.5 70.5" >
-  <g fill="white" >
+  <g fill="currentColor" >
     <path d="M38.25 14.75H85.25V61.75H61.75V38.25H38.25ZM14.75 38.25H38.25V61.75H61.75V85.25H14.75Z"  />
   </g>
 </svg>
@@ -236,8 +236,10 @@
                         </div>
                     </div>
                     <div class="theme-picker" id="theme-picker">
-                        <div class="theme-option" data-theme="monochrome">Black</div>
+                        <div class="theme-option" data-theme="system">System</div>
+                        <div class="theme-option" data-theme="light">Light</div>
                         <div class="theme-option" data-theme="dark">Dark</div>
+                        <div class="theme-option" data-theme="monochrome">Black</div>
                         <div class="theme-option" data-theme="ocean">Ocean</div>
                         <div class="theme-option" data-theme="purple">Purple</div>
                         <div class="theme-option" data-theme="forest">Forest</div>

js/storage.js

@@ -229,8 +229,9 @@ export const themeManager = {
     CUSTOM_THEME_KEY: 'monochrome-custom-theme',
 
     defaultThemes: {
-        monochrome: {},
+        light: {},
         dark: {},
+        monochrome: {},
         ocean: {},
         purple: {},
         forest: {}
@@ -238,15 +239,21 @@ export const themeManager = {
 
     getTheme() {
         try {
-            return localStorage.getItem(this.STORAGE_KEY) || 'monochrome';
+            return localStorage.getItem(this.STORAGE_KEY) || 'system';
         } catch (e) {
-            return 'monochrome';
+            return 'system';
         }
     },
 
     setTheme(theme) {
         localStorage.setItem(this.STORAGE_KEY, theme);
-        document.documentElement.setAttribute('data-theme', theme);
+        
+        if (theme === 'system') {
+            const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+        } else {
+            document.documentElement.setAttribute('data-theme', theme);
+        }
     },
 
     getCustomTheme() {
@@ -318,3 +325,12 @@ export const lyricsSettings = {
         localStorage.setItem(this.DOWNLOAD_WITH_TRACKS, enabled ? 'true' : 'false');
     }
 };
+
+// System theme listener
+if (typeof window !== 'undefined' && window.matchMedia) {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+        if (themeManager.getTheme() === 'system') {
+            document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
+        }
+    });
+}

styles.css

@@ -114,6 +114,27 @@
     --explicit-badge: #f59e0b;
 }
 
+:root[data-theme="light"] {
+    --background: #ffffff;
+    --foreground: #000000;
+    --card: #f4f4f5;
+    --card-foreground: #000000;
+    --primary: #2563eb;
+    --primary-foreground: #ffffff;
+    --secondary: #e4e4e7;
+    --secondary-foreground: #000000;
+    --muted: #e4e4e7;
+    --muted-foreground: #71717a;
+    --border: #e4e4e7;
+    --input: #e4e4e7;
+    --ring: #2563eb;
+    --highlight: #2563eb;
+    --highlight-rgb: 37, 99, 235;
+    --active-highlight: var(--highlight);
+    --explicit-badge: #000000;
+    --explicit-badge-foreground: #ffffff;
+}
+
 *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
@@ -178,7 +199,6 @@ kbd {
     flex-direction: column;
     gap: 2rem;
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 2000;
 }
 
 .main-content {
@@ -190,7 +210,7 @@ kbd {
 
 .now-playing-bar {
     grid-area: player;
-    background-color: #050505;
+    background-color: var(--card);
     border-top: 1px solid var(--border);
     padding: var(--spacing-md) var(--spacing-lg);
     display: grid;
@@ -491,7 +511,7 @@ kbd {
     align-items: center;
     justify-content: center;
     background-color: var(--explicit-badge);
-    color: #000;
+    color: var(--explicit-badge-foreground, #000);
     font-size: 0.65rem;
     font-weight: 700;
     padding: 0.15rem 0.35rem;
@@ -1850,6 +1870,7 @@ input:checked + .slider::before {
         height: 100%;
         transform: translateX(-100%);
         box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+        z-index: 2000;
     }
 
     .sidebar.is-open {