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 (editState.dark) entry.dark = editState.dark;
+    if (dirtyModes.light || hadOverride.light) {
+      entry.light = editState.light;
+    }
+    if (dirtyModes.dark || hadOverride.dark) {
+      entry.dark = editState.dark;
+    }
 
-    settings.subredditColors[currentSubreddit] = entry;
+    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,
   };
 })();