Match the settings popup to the browser/OS dark mode preference

popup.html

@@ -3,31 +3,58 @@
 <head>
 <meta charset="utf-8">
 <style>
+  :root {
+    color-scheme: light dark;
+    --bg: #ffffff;
+    --text: #1a1a1a;
+    --text-secondary: #555;
+    --text-muted: #777;
+    --border: #ccc;
+    --row-border: #eee;
+    --status-ok: #2a8f2a;
+    --status-error: #c0392b;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #202124;
+      --text: #e8eaed;
+      --text-secondary: #bdc1c6;
+      --text-muted: #9aa0a6;
+      --border: #5f6368;
+      --row-border: #3c4043;
+      --status-ok: #81c995;
+      --status-error: #f28b82;
+    }
+  }
   body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     width: 280px;
     padding: 16px;
-    color: #1a1a1a;
+    background: var(--bg);
+    color: var(--text);
   }
   h1 {
     font-size: 15px;
     margin: 0 0 12px;
+    color: var(--text);
   }
   label {
     display: block;
     font-size: 12px;
     font-weight: 600;
     margin-bottom: 4px;
-    color: #555;
+    color: var(--text-secondary);
   }
   select, input[type="text"] {
     width: 100%;
     padding: 6px 8px;
     font-size: 13px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border);
     border-radius: 6px;
     margin-bottom: 10px;
     box-sizing: border-box;
+    background: var(--bg);
+    color: var(--text);
   }
   #customUrlRow {
     display: none;
@@ -37,13 +64,14 @@
     align-items: center;
     justify-content: space-between;
     padding: 8px 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--row-border);
   }
   .toggle-row:first-of-type {
     border-top: none;
   }
   .toggle-row span {
     font-size: 13px;
+    color: var(--text);
   }
   .delay-row {
     padding: 0 0 10px;
@@ -53,12 +81,12 @@
     align-items: center;
     justify-content: space-between;
     font-size: 11px;
-    color: #777;
+    color: var(--text-muted);
     margin-bottom: 4px;
   }
   .delay-row-label span:last-child {
     font-weight: 600;
-    color: #555;
+    color: var(--text-secondary);
   }
   input[type="range"] {
     width: 100%;
@@ -84,11 +112,14 @@
   }
   #status {
     font-size: 11px;
-    color: #2a8f2a;
+    color: var(--status-ok);
     text-align: center;
     margin-top: 8px;
     height: 14px;
   }
+  #status.error {
+    color: var(--status-error);
+  }
 </style>
 </head>
 <body>