feat: Implement features and continuously optimize the proxy service

- Settings page UI
- Persist settings data
- Proxy server fixes & optimizations:
  - Fixed download latency caused by Range Seek
  - Improved cache stability
  - Implemented a dual-threading model to ensure smooth playback
- Optimized styles for the homepage TopBar and SideBar
- Added theme switching functionality
- Added theme color customization feature

src/renderer/styles/variables.css

@@ -1,27 +1,12 @@
 :root {
-  /* Colors - 网易云风格配色 */
-  --color-bg-primary: #121212;
-  --color-bg-secondary: #181818;
-  --color-bg-tertiary: #282828;
-  --color-bg-elevated: #2a2a2a;
-  
-  --color-text-primary: #ffffff;
-  --color-text-secondary: #b3b3b3;
-  --color-text-muted: #737373;
-  
+  /* Theme transition */
+  --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+
+  /* Dynamic accent color (set via JS) */
   --color-accent: #ec4141;
-  --color-accent-hover: #ff5555;
-  --color-accent-soft: rgba(236, 65, 65, 0.1);
-  
-  --color-border: #2a2a2a;
-  --color-border-light: #3a3a3a;
-  
-  /* Shadows - 柔和阴影效果 */
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
-  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.16);
-  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.24);
-  --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.32);
-  
+  --color-accent-hover: color-mix(in srgb, var(--color-accent) 85%, white);
+  --color-accent-soft: color-mix(in srgb, var(--color-accent) 10%, transparent);
+
   /* Typography */
   --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
   --font-size-xs: 0.75rem;
@@ -30,20 +15,76 @@
   --font-size-lg: 1.125rem;
   --font-size-xl: 1.25rem;
   --font-size-2xl: 1.5rem;
-  
-  /* Spacing & Radius - 网易云风格大圆角 */
+
+  /* Spacing & Radius */
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 20px;
   --radius-xl: 24px;
   --radius-2xl: 32px;
   --radius-full: 9999px;
-  
+
   --sidebar-width: 240px;
   --topbar-height: 64px;
-  
+
   /* Transitions */
   --transition-fast: 0.15s ease;
   --transition-base: 0.25s ease;
   --transition-slow: 0.35s ease;
 }
+
+/* Dark Theme (default) */
+:root,
+[data-theme="dark"] {
+  --color-bg-primary: #121212;
+  --color-bg-secondary: #181818;
+  --color-bg-tertiary: #282828;
+  --color-bg-elevated: #2a2a2a;
+
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #b3b3b3;
+  --color-text-muted: #737373;
+
+  --color-border: #2a2a2a;
+  --color-border-light: #3a3a3a;
+
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.16);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.24);
+  --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.32);
+}
+
+/* Light Theme */
+[data-theme="light"] {
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: rgba(40, 50, 72, 0.03);
+  --color-bg-tertiary: #ebebeb;
+  --color-bg-elevated: #e0e0e0;
+
+  --color-text-primary: #1a1a1a;
+  --color-text-secondary: #5c5c5c;
+  --color-text-muted: #8c8c8c;
+
+  --color-border: #e0e0e0;
+  --color-border-light: #d0d0d0;
+
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.16);
+}
+
+/* Apply theme transition to common elements */
+body,
+.sidebar,
+.topbar,
+.settings-overlay,
+.settings-container,
+.settings-nav,
+.settings-content,
+.nav-item,
+.setting-item,
+.action-btn,
+.toggle-slider {
+  transition: var(--theme-transition);
+}