tuning ui and adding adaptive themeing to extension

extension/popup/popup.css

@@ -1,12 +1,75 @@
+/* Light theme (default) */
 :root {
   --primary-color: #1976d2;
+  --primary-hover: #1565c0;
   --success-color: #4caf50;
   --warning-color: #ff9800;
   --error-color: #f44336;
   --bg-color: #ffffff;
+  --bg-secondary: #f5f5f5;
+  --bg-hover: #f5f9ff;
   --text-color: #212121;
   --text-secondary: #757575;
   --border-color: #e0e0e0;
+  --alert-warning-bg: #fff8e1;
+  --alert-warning-border: #ffcc02;
+  --alert-warning-text: #795548;
+  --status-success-bg: #e8f5e9;
+  --status-success-text: #2e7d32;
+  --status-success-border: #a5d6a7;
+  --status-error-bg: #ffebee;
+  --status-error-text: #c62828;
+  --status-error-border: #ef9a9a;
+}
+
+/* Dark theme */
+[data-theme="dark"] {
+  --primary-color: #64b5f6;
+  --primary-hover: #42a5f5;
+  --success-color: #81c784;
+  --warning-color: #ffb74d;
+  --error-color: #e57373;
+  --bg-color: #1e1e1e;
+  --bg-secondary: #2d2d2d;
+  --bg-hover: #2a3a4a;
+  --text-color: #e0e0e0;
+  --text-secondary: #9e9e9e;
+  --border-color: #424242;
+  --alert-warning-bg: #3d3224;
+  --alert-warning-border: #8b6914;
+  --alert-warning-text: #ffcc02;
+  --status-success-bg: #1b3d1b;
+  --status-success-text: #81c784;
+  --status-success-border: #2e7d32;
+  --status-error-bg: #3d1b1b;
+  --status-error-text: #e57373;
+  --status-error-border: #c62828;
+}
+
+/* Auto-detect system theme preference */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --primary-color: #64b5f6;
+    --primary-hover: #42a5f5;
+    --success-color: #81c784;
+    --warning-color: #ffb74d;
+    --error-color: #e57373;
+    --bg-color: #1e1e1e;
+    --bg-secondary: #2d2d2d;
+    --bg-hover: #2a3a4a;
+    --text-color: #e0e0e0;
+    --text-secondary: #9e9e9e;
+    --border-color: #424242;
+    --alert-warning-bg: #3d3224;
+    --alert-warning-border: #8b6914;
+    --alert-warning-text: #ffcc02;
+    --status-success-bg: #1b3d1b;
+    --status-success-text: #81c784;
+    --status-success-border: #2e7d32;
+    --status-error-bg: #3d1b1b;
+    --status-error-text: #e57373;
+    --status-error-border: #c62828;
+  }
 }
 
 * {
@@ -91,7 +154,7 @@ body {
 
 .platform-card:hover:not(.disabled) {
   border-color: var(--primary-color);
-  background: #f5f9ff;
+  background: var(--bg-hover);
 }
 
 .platform-card.disabled {
@@ -176,17 +239,17 @@ body {
 }
 
 .btn-primary:hover {
-  background: #1565c0;
+  background: var(--primary-hover);
 }
 
 .btn-secondary {
-  background: #f5f5f5;
+  background: var(--bg-secondary);
   color: var(--text-color);
   border: 1px solid var(--border-color);
 }
 
 .btn-secondary:hover {
-  background: #eeeeee;
+  background: var(--border-color);
 }
 
 .btn:disabled {
@@ -205,7 +268,7 @@ body {
 }
 
 .btn-icon:hover {
-  background: #f5f5f5;
+  background: var(--bg-secondary);
   color: var(--text-color);
 }
 
@@ -234,9 +297,9 @@ body {
 }
 
 .alert-warning {
-  background: #fff8e1;
-  border: 1px solid #ffcc02;
-  color: #795548;
+  background: var(--alert-warning-bg);
+  border: 1px solid var(--alert-warning-border);
+  color: var(--alert-warning-text);
 }
 
 .status-message {
@@ -247,21 +310,21 @@ body {
 }
 
 .status-message.success {
-  background: #e8f5e9;
-  color: #2e7d32;
-  border: 1px solid #a5d6a7;
+  background: var(--status-success-bg);
+  color: var(--status-success-text);
+  border: 1px solid var(--status-success-border);
 }
 
 .status-message.error {
-  background: #ffebee;
-  color: #c62828;
-  border: 1px solid #ef9a9a;
+  background: var(--status-error-bg);
+  color: var(--status-error-text);
+  border: 1px solid var(--status-error-border);
 }
 
 .status-message.warning {
-  background: #fff8e1;
-  color: #795548;
-  border: 1px solid #ffcc02;
+  background: var(--alert-warning-bg);
+  color: var(--alert-warning-text);
+  border: 1px solid var(--alert-warning-border);
 }
 
 .footer {
@@ -274,7 +337,7 @@ body {
 
 .version {
   font-size: 11px;
-  color: #9e9e9e;
+  color: var(--text-secondary);
 }
 
 .hidden {

extension/popup/popup.html

@@ -7,7 +7,7 @@
 <body>
   <div class="popup-container">
     <header class="header">
-      <img src="../icons/icon-32.png" alt="GallerySubscriber" class="logo">
+      <img src="../icons/icon.svg" alt="GallerySubscriber" class="logo">
       <h1>GallerySubscriber</h1>
       <span id="connection-status" class="status-indicator" title="Disconnected"></span>
     </header>