tuning ui and adding adaptive themeing to extension

extension/options/options.html

@@ -4,8 +4,10 @@
   <meta charset="UTF-8">
   <title>GallerySubscriber Settings</title>
   <style>
+    /* Light theme (default) */
     :root {
       --primary-color: #1976d2;
+      --primary-hover: #1565c0;
       --success-color: #4caf50;
       --error-color: #f44336;
       --bg-color: #f5f5f5;
@@ -13,6 +15,64 @@
       --text-color: #212121;
       --text-secondary: #757575;
       --border-color: #e0e0e0;
+      --input-bg: #ffffff;
+      --btn-secondary-bg: #f5f5f5;
+      --btn-secondary-hover: #eeeeee;
+      --instructions-bg: #e3f2fd;
+      --instructions-title: #1565c0;
+      --code-bg: rgba(0,0,0,0.08);
+      --result-success-bg: #e8f5e9;
+      --result-success-text: #2e7d32;
+      --result-error-bg: #ffebee;
+      --result-error-text: #c62828;
+    }
+
+    /* Dark theme */
+    [data-theme="dark"] {
+      --primary-color: #64b5f6;
+      --primary-hover: #42a5f5;
+      --success-color: #81c784;
+      --error-color: #e57373;
+      --bg-color: #121212;
+      --card-bg: #1e1e1e;
+      --text-color: #e0e0e0;
+      --text-secondary: #9e9e9e;
+      --border-color: #424242;
+      --input-bg: #2d2d2d;
+      --btn-secondary-bg: #2d2d2d;
+      --btn-secondary-hover: #3d3d3d;
+      --instructions-bg: #1a2a3a;
+      --instructions-title: #64b5f6;
+      --code-bg: rgba(255,255,255,0.1);
+      --result-success-bg: #1b3d1b;
+      --result-success-text: #81c784;
+      --result-error-bg: #3d1b1b;
+      --result-error-text: #e57373;
+    }
+
+    /* Auto-detect system theme preference */
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme="light"]) {
+        --primary-color: #64b5f6;
+        --primary-hover: #42a5f5;
+        --success-color: #81c784;
+        --error-color: #e57373;
+        --bg-color: #121212;
+        --card-bg: #1e1e1e;
+        --text-color: #e0e0e0;
+        --text-secondary: #9e9e9e;
+        --border-color: #424242;
+        --input-bg: #2d2d2d;
+        --btn-secondary-bg: #2d2d2d;
+        --btn-secondary-hover: #3d3d3d;
+        --instructions-bg: #1a2a3a;
+        --instructions-title: #64b5f6;
+        --code-bg: rgba(255,255,255,0.1);
+        --result-success-bg: #1b3d1b;
+        --result-success-text: #81c784;
+        --result-error-bg: #3d1b1b;
+        --result-error-text: #e57373;
+      }
     }
 
     * {
@@ -80,6 +140,8 @@
       border: 1px solid var(--border-color);
       border-radius: 6px;
       font-size: 14px;
+      background: var(--input-bg);
+      color: var(--text-color);
       transition: border-color 0.15s;
     }
 
@@ -122,17 +184,17 @@
     }
 
     .btn-primary:hover {
-      background: #1565c0;
+      background: var(--primary-hover);
     }
 
     .btn-secondary {
-      background: #f5f5f5;
+      background: var(--btn-secondary-bg);
       color: var(--text-color);
       border: 1px solid var(--border-color);
     }
 
     .btn-secondary:hover {
-      background: #eeeeee;
+      background: var(--btn-secondary-hover);
     }
 
     .btn:disabled {
@@ -159,13 +221,13 @@
     }
 
     .result.success {
-      background: #e8f5e9;
-      color: #2e7d32;
+      background: var(--result-success-bg);
+      color: var(--result-success-text);
     }
 
     .result.error {
-      background: #ffebee;
-      color: #c62828;
+      background: var(--result-error-bg);
+      color: var(--result-error-text);
     }
 
     .connection-test {
@@ -179,7 +241,7 @@
       width: 10px;
       height: 10px;
       border-radius: 50%;
-      background: #9e9e9e;
+      background: var(--text-secondary);
     }
 
     .status-dot.connected {
@@ -191,7 +253,7 @@
     }
 
     .instructions {
-      background: #e3f2fd;
+      background: var(--instructions-bg);
       border-radius: 6px;
       padding: 16px;
       margin-bottom: 16px;
@@ -201,7 +263,7 @@
       font-size: 14px;
       font-weight: 600;
       margin-bottom: 8px;
-      color: #1565c0;
+      color: var(--instructions-title);
     }
 
     .instructions ol {
@@ -215,7 +277,7 @@
     }
 
     .instructions code {
-      background: rgba(0,0,0,0.08);
+      background: var(--code-bg);
       padding: 2px 6px;
       border-radius: 3px;
       font-family: monospace;