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

README.md

@@ -9,6 +9,7 @@ A small Chrome extension that automatically clicks "Skip Intro" and "Skip Credit
 - Toggle Skip Intro and Skip Credits independently — both on by default.
 - Optional delay (0-30s) before each is clicked, in case a show needs a few extra seconds before the credits skip feels right.
 - Settings save instantly and apply live, no reload required for toggle or delay changes.
+- The settings popup follows your browser/OS dark mode setting automatically.
 
 ## Install
 

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>

popup.js

@@ -55,9 +55,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
   function showStatus(message, isError) {
     status.textContent = message;
-    status.style.color = isError ? "#c0392b" : "#2a8f2a";
+    status.classList.toggle("error", !!isError);
     setTimeout(() => {
       status.textContent = "";
+      status.classList.remove("error");
     }, 1500);
   }
 

tests/popup.test.js

@@ -121,6 +121,31 @@ test("saving an unparseable custom URL is rejected with an error, not saved", as
   assert.strictEqual(savedCalls.length, 0, "should not save an invalid URL");
 });
 
+test("marks the status message as an error (for themed error styling) on a rejected save", async () => {
+  const { window } = loadPopupScript();
+  await wait(20);
+
+  const urlPreset = window.document.getElementById("urlPreset");
+  urlPreset.value = "custom";
+  urlPreset.dispatchEvent(new window.Event("change"));
+  window.document.getElementById("customUrl").value = "   ";
+
+  window.document.getElementById("saveBtn").click();
+  await wait(20);
+
+  assert.strictEqual(window.document.getElementById("status").classList.contains("error"), true);
+});
+
+test("does not mark the status message as an error on a successful save", async () => {
+  const { window } = loadPopupScript();
+  await wait(20);
+
+  window.document.getElementById("saveBtn").click();
+  await wait(20);
+
+  assert.strictEqual(window.document.getElementById("status").classList.contains("error"), false);
+});
+
 test("unchecking a toggle and saving persists it as false", async () => {
   const { window, savedCalls } = loadPopupScript();
   await wait(20);