diff --git a/content/tweaks/badges.js b/content/tweaks/badges.js index c100246..d32322a 100644 --- a/content/tweaks/badges.js +++ b/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) { diff --git a/content/tweaks/color-popover.js b/content/tweaks/color-popover.js index 734e398..9fb30b3 100644 --- a/content/tweaks/color-popover.js +++ b/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, }; })(); diff --git a/popup/popup.js b/popup/popup.js index 08ed774..fbcc99d 100644 --- a/popup/popup.js +++ b/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] = { - light: entry._colorState.light, - dark: entry._colorState.dark, - }; + var entryOverrides = {}; + if (entry._hadOverride.light || entry._dirtyModes.light) { + 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; }