feat: popup per-subreddit overrides with mode-aware light/dark toggle

Co-authored-by: Cursor <cursoragent@cursor.com>

popup/popup.css

@@ -157,3 +157,46 @@ fieldset input[type="text"] {
 .subreddit-entry .btn-remove:hover {
   color: #d9534f;
 }
+
+.section-hint {
+  font-size: 11px;
+  color: #888;
+  margin-bottom: 8px;
+}
+
+.subreddit-entry-header {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.subreddit-entry-header input[type="text"] {
+  flex: 1;
+  min-width: 0;
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  font-size: 12px;
+  font-family: monospace;
+}
+
+.subreddit-entry-mode {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.subreddit-entry-mode select {
+  width: auto;
+  padding: 2px 6px;
+  font-size: 11px;
+  margin-top: 0;
+}
+
+.subreddit-entry-colors {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}

popup/popup.html

@@ -60,6 +60,7 @@
 
     <div class="section">
       <h2>Per-Subreddit Overrides</h2>
+      <p class="section-hint">Set custom subreddit badge colors per mode.</p>
       <div id="subredditList"></div>
       <button id="addSubreddit" class="btn-secondary">+ Add Subreddit</button>
     </div>

popup/popup.js

@@ -34,72 +34,120 @@
   }
 
   function renderSubredditOverrides(overrides) {
-    const list = document.getElementById("subredditList");
+    var list = document.getElementById("subredditList");
     list.innerHTML = "";
 
-    Object.entries(overrides).forEach(function ([name, colors]) {
+    Object.entries(overrides).forEach(function (pair) {
-      addSubredditEntry(name, colors);
+      addSubredditEntry(pair[0], pair[1]);
     });
   }
 
-  function addSubredditEntry(name, colors) {
+  function addSubredditEntry(name, modeColors) {
-    const list = document.getElementById("subredditList");
+    var list = document.getElementById("subredditList");
-    const entry = document.createElement("div");
+    var entry = document.createElement("div");
     entry.className = "subreddit-entry";
 
-    const nameInput = document.createElement("input");
+    var header = document.createElement("div");
+    header.className = "subreddit-entry-header";
+
+    var nameInput = document.createElement("input");
     nameInput.type = "text";
     nameInput.placeholder = "subreddit";
     nameInput.value = name || "";
 
-    const bgInput = document.createElement("input");
+    var removeBtn = document.createElement("button");
-    bgInput.type = "color";
-    bgInput.value = colorToHex(colors?.bg);
-    bgInput.title = "Background";
-
-    const borderInput = document.createElement("input");
-    borderInput.type = "color";
-    borderInput.value = colorToHex(colors?.border);
-    borderInput.title = "Border";
-
-    const textInput = document.createElement("input");
-    textInput.type = "color";
-    textInput.value = colorToHex(colors?.text);
-    textInput.title = "Text";
-
-    const removeBtn = document.createElement("button");
     removeBtn.className = "btn-remove";
-    removeBtn.textContent = "×";
+    removeBtn.textContent = "\u00d7";
     removeBtn.addEventListener("click", function () {
       entry.remove();
       saveFromControls();
     });
 
+    header.appendChild(nameInput);
+    header.appendChild(removeBtn);
+
+    var modeRow = document.createElement("div");
+    modeRow.className = "subreddit-entry-mode";
+
+    var modeSelect = document.createElement("select");
+    modeSelect.innerHTML = '<option value="light">Light</option><option value="dark">Dark</option>';
+    modeSelect.value = "light";
+    modeRow.appendChild(modeSelect);
+
+    var colorsDiv = document.createElement("div");
+    colorsDiv.className = "subreddit-entry-colors";
+
+    var lightColors = modeColors && modeColors.light ? modeColors.light : {};
+    var darkColors = modeColors && modeColors.dark ? modeColors.dark : {};
+
+    var bgInput = document.createElement("input");
+    bgInput.type = "color";
+    bgInput.value = colorToHex(lightColors.bg);
+    bgInput.title = "Background";
+
+    var borderInput = document.createElement("input");
+    borderInput.type = "color";
+    borderInput.value = colorToHex(lightColors.border);
+    borderInput.title = "Border";
+
+    var textInput = document.createElement("input");
+    textInput.type = "color";
+    textInput.value = colorToHex(lightColors.text);
+    textInput.title = "Text";
+
+    colorsDiv.appendChild(bgInput);
+    colorsDiv.appendChild(borderInput);
+    colorsDiv.appendChild(textInput);
+
+    entry._colorState = {
+      light: { bg: bgInput.value, border: borderInput.value, text: textInput.value },
+      dark: { bg: colorToHex(darkColors.bg), border: colorToHex(darkColors.border), text: colorToHex(darkColors.text) },
+    };
+
+    modeSelect.addEventListener("change", function () {
+      var prev = modeSelect.value === "dark" ? "light" : "dark";
+      entry._colorState[prev] = { bg: bgInput.value, border: borderInput.value, text: textInput.value };
+      var next = entry._colorState[modeSelect.value];
+      bgInput.value = next.bg;
+      borderInput.value = next.border;
+      textInput.value = next.text;
+    });
+
     [nameInput, bgInput, borderInput, textInput].forEach(function (input) {
       input.addEventListener("change", saveFromControls);
     });
 
-    entry.appendChild(nameInput);
+    entry.appendChild(header);
-    entry.appendChild(bgInput);
+    entry.appendChild(modeRow);
-    entry.appendChild(borderInput);
+    entry.appendChild(colorsDiv);
-    entry.appendChild(textInput);
+
-    entry.appendChild(removeBtn);
+    entry._nameInput = nameInput;
+    entry._bgInput = bgInput;
+    entry._borderInput = borderInput;
+    entry._textInput = textInput;
+    entry._modeSelect = modeSelect;
+
     list.appendChild(entry);
   }
 
   function collectSubredditOverrides() {
-    const overrides = {};
+    var overrides = {};
-    const entries = document.querySelectorAll(".subreddit-entry");
+    var entries = document.querySelectorAll(".subreddit-entry");
     entries.forEach(function (entry) {
-      const inputs = entry.querySelectorAll("input");
+      var name = entry._nameInput.value.trim().replace(/^r\//, "");
-      const name = inputs[0].value.trim().replace(/^r\//, "");
+      if (!name) return;
-      if (name) {
+
-        overrides[name] = {
+      var currentMode = entry._modeSelect.value;
-          bg: inputs[1].value,
+      entry._colorState[currentMode] = {
-          border: inputs[2].value,
+        bg: entry._bgInput.value,
-          text: inputs[3].value,
+        border: entry._borderInput.value,
-        };
+        text: entry._textInput.value,
-      }
+      };
+
+      overrides[name] = {
+        light: entry._colorState.light,
+        dark: entry._colorState.dark,
+      };
     });
     return overrides;
   }