fix: only persist edited/existing mode overrides, refresh popover theme on dark mode toggle

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

content/tweaks/badges.js

@@ -156,6 +156,10 @@
       const subredditName = container.getAttribute("data-rt-subreddit");
       applyColorsToContainer(container, settings, subredditName);
     });
+
+    if (window.RedditTweaks.colorPopover && window.RedditTweaks.colorPopover.refreshTheme) {
+      window.RedditTweaks.colorPopover.refreshTheme(settings);
+    }
   }
 
   function apply(settings) {

content/tweaks/color-popover.js

@@ -6,6 +6,8 @@
   var currentAnchor = null;
   var editState = { light: null, dark: null };
   var selectedMode = "light";
+  var dirtyModes = { light: false, dark: false };
+  var hadOverride = { light: false, dark: false };
 
   var els = {};
 
@@ -103,6 +105,7 @@
     els.resetBtn.addEventListener("click", resetToDefault);
 
     els.modeSelect.addEventListener("change", function () {
+      markModeDirty(selectedMode);
       storeCurrentEdits();
       selectedMode = els.modeSelect.value;
       loadModeIntoInputs();
@@ -114,11 +117,13 @@
       (function (prop) {
         var row = els.rows[prop];
         row.swatch.addEventListener("input", function () {
+          markModeDirty(selectedMode);
           row.hex.value = row.swatch.value;
           row.hex.classList.remove("rt-input-error");
           updatePreview();
         });
         row.hex.addEventListener("input", function () {
+          markModeDirty(selectedMode);
           if (hexValid(row.hex.value)) {
             row.swatch.value = row.hex.value;
             row.hex.classList.remove("rt-input-error");
@@ -166,6 +171,15 @@
     return getDefaultsForMode(settings, mode);
   }
 
+  function markModeDirty(mode) {
+    dirtyModes[mode] = true;
+  }
+
+  function resetTracking() {
+    dirtyModes = { light: false, dark: false };
+    hadOverride = { light: false, dark: false };
+  }
+
   function storeCurrentEdits() {
     editState[selectedMode] = {
       bg: els.rows.bg.swatch.value,
@@ -239,6 +253,11 @@
     currentSubreddit = subredditName;
     currentAnchor = badgeEl;
 
+    resetTracking();
+    var existingEntry = settings.subredditColors[subredditName];
+    hadOverride.light = !!(existingEntry && existingEntry.light);
+    hadOverride.dark = !!(existingEntry && existingEntry.dark);
+
     var helpers = getHelpers();
     selectedMode = helpers.getColorPrefix(settings);
 
@@ -261,6 +280,7 @@
     currentSubreddit = null;
     currentAnchor = null;
     editState = { light: null, dark: null };
+    resetTracking();
   }
 
   async function save() {
@@ -271,10 +291,18 @@
     var settings = await window.RedditTweaks.loadSettings();
     var entry = settings.subredditColors[currentSubreddit] || {};
 
-    if (editState.light) entry.light = editState.light;
+    if (dirtyModes.light || hadOverride.light) {
-    if (editState.dark) entry.dark = editState.dark;
+      entry.light = editState.light;
+    }
+    if (dirtyModes.dark || hadOverride.dark) {
+      entry.dark = editState.dark;
+    }
 
+    if (!entry.light && !entry.dark) {
+      delete settings.subredditColors[currentSubreddit];
+    } else {
       settings.subredditColors[currentSubreddit] = entry;
+    }
     await window.RedditTweaks.saveSettings(settings);
     close();
   }
@@ -286,15 +314,22 @@
     delete settings.subredditColors[currentSubreddit];
     await window.RedditTweaks.saveSettings(settings);
 
+    resetTracking();
     editState.light = getDefaultsForMode(settings, "light");
     editState.dark = getDefaultsForMode(settings, "dark");
     loadModeIntoInputs();
     updatePreview();
   }
 
+  function refreshTheme(settings) {
+    if (!popoverEl || !popoverEl.classList.contains("rt-popover-visible")) return;
+    applyDarkModeToPopover(settings);
+  }
+
   window.RedditTweaks = window.RedditTweaks || {};
   window.RedditTweaks.colorPopover = {
     open: open,
     close: close,
+    refreshTheme: refreshTheme,
   };
 })();

popup/popup.js

@@ -103,9 +103,15 @@
       light: { bg: bgInput.value, border: borderInput.value, text: textInput.value },
       dark: { bg: colorToHex(darkColors.bg), border: colorToHex(darkColors.border), text: colorToHex(darkColors.text) },
     };
+    entry._hadOverride = {
+      light: !!(modeColors && modeColors.light),
+      dark: !!(modeColors && modeColors.dark),
+    };
+    entry._dirtyModes = { light: false, dark: false };
 
     modeSelect.addEventListener("change", function () {
       var prev = modeSelect.value === "dark" ? "light" : "dark";
+      entry._dirtyModes[prev] = true;
       entry._colorState[prev] = { bg: bgInput.value, border: borderInput.value, text: textInput.value };
       var next = entry._colorState[modeSelect.value];
       bgInput.value = next.bg;
@@ -114,7 +120,12 @@
     });
 
     [nameInput, bgInput, borderInput, textInput].forEach(function (input) {
-      input.addEventListener("change", saveFromControls);
+      input.addEventListener("change", function () {
+        if (input !== nameInput) {
+          entry._dirtyModes[modeSelect.value] = true;
+        }
+        saveFromControls();
+      });
     });
 
     entry.appendChild(header);
@@ -144,10 +155,17 @@
         text: entry._textInput.value,
       };
 
-      overrides[name] = {
+      var entryOverrides = {};
-        light: entry._colorState.light,
+      if (entry._hadOverride.light || entry._dirtyModes.light) {
-        dark: entry._colorState.dark,
+        entryOverrides.light = entry._colorState.light;
-      };
+      }
+      if (entry._hadOverride.dark || entry._dirtyModes.dark) {
+        entryOverrides.dark = entry._colorState.dark;
+      }
+
+      if (entryOverrides.light || entryOverrides.dark) {
+        overrides[name] = entryOverrides;
+      }
     });
     return overrides;
   }