From 1c140c7153d7bdd18cfeac38b4019851f4c2c512 Mon Sep 17 00:00:00 2001 From: Guy Sandler Date: Sun, 25 Oct 2026 18:06:24 -0700 Subject: [PATCH] stuff 2: electric boogaloo --- _locales/de/messages.json | 9 ++++ _locales/en/messages.json | 9 ++++ _locales/es/messages.json | 9 ++++ _locales/fr/messages.json | 9 ++++ _locales/it/messages.json | 9 ++++ _locales/ja/messages.json | 9 ++++ _locales/pt_PT/messages.json | 9 ++++ _locales/ru/messages.json | 9 ++++ _locales/sv/messages.json | 9 ++++ _locales/zh_CN/messages.json | 9 ++++ _locales/zh_TW/messages.json | 9 ++++ css/popup.css | 5 +++ html/popup.html | 16 +++++++ js/background.js | 2 + js/content.js | 67 ++++++++++++++++++++-------- js/popup.js | 84 ++++++++++++++++++++++++++++++++++-- 16 files changed, 251 insertions(+), 22 deletions(-) diff --git a/_locales/de/messages.json b/_locales/de/messages.json index 141eb56..80ba8cc 100644 --- a/_locales/de/messages.json +++ b/_locales/de/messages.json @@ -281,6 +281,15 @@ "custom_background": { "message": "Benutzerdefinierter Hintergrund" }, + "solid_color": { + "message": "Einfarbiger Hintergrund" + }, + "solid_color_hex": { + "message": "#1e2a38" + }, + "bg_transparency": { + "message": "Transparente Elemente" + }, "custom_background_desc": { "message": "Wähle eine Voreinstellung oder verwende deine eigene Bild-URL." }, diff --git a/_locales/en/messages.json b/_locales/en/messages.json index a6f3854..d124913 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -281,6 +281,15 @@ "custom_background": { "message": "Custom Background" }, + "solid_color": { + "message": "Solid color" + }, + "solid_color_hex": { + "message": "#1e2a38" + }, + "bg_transparency": { + "message": "Transparent elements" + }, "custom_background_desc": { "message": "Pick a preset or use your own image url." }, diff --git a/_locales/es/messages.json b/_locales/es/messages.json index 254dc92..619f35f 100644 --- a/_locales/es/messages.json +++ b/_locales/es/messages.json @@ -281,6 +281,15 @@ "custom_background": { "message": "Fondo personalizado" }, + "solid_color": { + "message": "Color sólido" + }, + "solid_color_hex": { + "message": "#1e2a38" + }, + "bg_transparency": { + "message": "Elementos transparentes" + }, "custom_background_desc": { "message": "Elige un preajuste o usa la URL de tu propia imagen." }, diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json index 43ac00f..4dc8cfb 100644 --- a/_locales/fr/messages.json +++ b/_locales/fr/messages.json @@ -281,6 +281,15 @@ "custom_background": { "message": "Arrière-plan personnalisé" }, + "solid_color": { + "message": "Couleur unie" + }, + "solid_color_hex": { + "message": "#1e2a38" + }, + "bg_transparency": { + "message": "Éléments transparents" + }, "custom_background_desc": { "message": "Choisissez un préréglage ou utilisez l'URL de votre propre image." }, diff --git a/_locales/it/messages.json b/_locales/it/messages.json index 2011d47..45a24d6 100644 --- a/_locales/it/messages.json +++ b/_locales/it/messages.json @@ -281,6 +281,15 @@ "custom_background": { "message": "Sfondo personalizzato" }, + "solid_color": { + "message": "Colore pieno" + }, + "solid_color_hex": { + "message": "#1e2a38" + }, + "bg_transparency": { + "message": "Elementi trasparenti" + }, "custom_background_desc": { "message": "Scegli un preset o usa l'URL della tua immagine." }, diff --git a/_locales/ja/messages.json b/_locales/ja/messages.json index 98b67fc..599f9ae 100644 --- a/_locales/ja/messages.json +++ b/_locales/ja/messages.json @@ -281,6 +281,15 @@ "custom_background": { "message": "カスタム背景" }, + "solid_color": { + "message": "単色" + }, + "solid_color_hex": { + "message": "#1e2a38" + }, + "bg_transparency": { + "message": "要素を透過" + }, "custom_background_desc": { "message": "プリセットを選ぶか、自分の画像URLを使用してください。" }, diff --git a/_locales/pt_PT/messages.json b/_locales/pt_PT/messages.json index a657c16..04eb68a 100644 --- a/_locales/pt_PT/messages.json +++ b/_locales/pt_PT/messages.json @@ -281,6 +281,15 @@ "custom_background": { "message": "Fundo personalizado" }, + "solid_color": { + "message": "Cor sólida" + }, + "solid_color_hex": { + "message": "#1e2a38" + }, + "bg_transparency": { + "message": "Elementos transparentes" + }, "custom_background_desc": { "message": "Escolhe uma predefinição ou usa o URL da tua própria imagem." }, diff --git a/_locales/ru/messages.json b/_locales/ru/messages.json index 84e2732..efa87fb 100644 --- a/_locales/ru/messages.json +++ b/_locales/ru/messages.json @@ -281,6 +281,15 @@ "custom_background": { "message": "Свой фон" }, + "solid_color": { + "message": "Сплошной цвет" + }, + "solid_color_hex": { + "message": "#1e2a38" + }, + "bg_transparency": { + "message": "Прозрачные элементы" + }, "custom_background_desc": { "message": "Выберите пресет или используйте свою ссылку на изображение." }, diff --git a/_locales/sv/messages.json b/_locales/sv/messages.json index 1264a45..f39fce9 100644 --- a/_locales/sv/messages.json +++ b/_locales/sv/messages.json @@ -281,6 +281,15 @@ "custom_background": { "message": "Anpassad bakgrund" }, + "solid_color": { + "message": "Enfärgad" + }, + "solid_color_hex": { + "message": "#1e2a38" + }, + "bg_transparency": { + "message": "Genomskinliga element" + }, "custom_background_desc": { "message": "Välj en förinställning eller använd din egen bild-URL." }, diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json index 8c20396..f6f22ed 100644 --- a/_locales/zh_CN/messages.json +++ b/_locales/zh_CN/messages.json @@ -281,6 +281,15 @@ "custom_background": { "message": "自定义背景" }, + "solid_color": { + "message": "纯色" + }, + "solid_color_hex": { + "message": "#1e2a38" + }, + "bg_transparency": { + "message": "元素透明" + }, "custom_background_desc": { "message": "选择预设，或使用你自己的图片 URL。" }, diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json index c0904ce..b86eafc 100644 --- a/_locales/zh_TW/messages.json +++ b/_locales/zh_TW/messages.json @@ -281,6 +281,15 @@ "custom_background": { "message": "自訂背景" }, + "solid_color": { + "message": "純色" + }, + "solid_color_hex": { + "message": "#1e2a38" + }, + "bg_transparency": { + "message": "元素透明" + }, "custom_background_desc": { "message": "選擇預設背景，或使用你自己的圖片網址。" }, diff --git a/css/popup.css b/css/popup.css index c5e808f..818521e 100644 --- a/css/popup.css +++ b/css/popup.css @@ -179,6 +179,11 @@ h2 {margin-top: 20px;font-weight:600} .theme-button-creator {font-size:10px;white-space:nowrap} .theme-button-title {font-weight: 600;font-size:12px;white-space:nowrap;} .background-preset-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px;} +/* a solid colour outranks the presets, so they are inert until it is cleared */ +.background-preset-grid.is-disabled {opacity: .45; filter: grayscale(1); pointer-events: none;} +.background-color-picker {width: 38px; height: 30px; padding: 0; border: none; border-radius: 7px; background: var(--inputbg); cursor: pointer;} +.background-color-picker::-webkit-color-swatch-wrapper {padding: 2px;} +.background-color-picker::-webkit-color-swatch {border: none; border-radius: 5px;} .background-preset-card {min-height: 96px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; border-radius: 8px;} .background-preset-card.selected {outline: 2px solid #56Caf0; outline-offset: 2px;} .background-preset-scale {font-size:10px;white-space:nowrap;opacity:0.9;} diff --git a/html/popup.html b/html/popup.html index c6dfeab..1fe236c 100644 --- a/html/popup.html +++ b/html/popup.html @@ -1485,6 +1485,22 @@ + +
+ Solid color +
+ + + +
+
+ +
diff --git a/js/background.js b/js/background.js index 8c257ed..88c1a0f 100644 --- a/js/background.js +++ b/js/background.js @@ -150,6 +150,8 @@ chrome.runtime.onInstalled.addListener(function () { "cardHeight": 146, "customCardStyles": false, "customBackgroundLink": "", + "customBackgroundColor": "", + "customBackgroundColorTransparent": false, "customBackgroundScale": 100, "customBackgroundDaily": false, "customBackgroundNasaDaily": false, diff --git a/js/content.js b/js/content.js index 570ab04..95322fd 100644 --- a/js/content.js +++ b/js/content.js @@ -492,8 +492,16 @@ async function getActiveCustomBackground() { "customBackgroundNasaDaily", "customBackgroundLink", "customBackgroundScale", + "customBackgroundColor", + "customBackgroundColorTransparent", ]); + // A solid colour always wins over the image sources. + const color = normalizeBackgroundColor(syncOpts.customBackgroundColor); + if (color) { + return { color, transparent: syncOpts.customBackgroundColorTransparent === true }; + } + if (syncOpts.customBackgroundNasaDaily === true) { return await getNasaDailyBackground(); } @@ -518,6 +526,16 @@ async function getActiveCustomBackground() { return null; } +// Accepts "#1e2a38", "1e2a38" or "#abc"; anything else is "no colour". +function normalizeBackgroundColor(value) { + const hex = String(value || "").trim().replace(/^#/, ""); + if (/^[0-9a-f]{3}$/i.test(hex)) { + return "#" + hex.split("").map(c => c + c).join("").toLowerCase(); + } + if (/^[0-9a-f]{6}$/i.test(hex)) return "#" + hex.toLowerCase(); + return ""; +} + async function getDailyBackgroundPreset() { const today = new Date(); const dateStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`; @@ -1431,6 +1449,8 @@ function applyOptionsChanges(changes) { debouncedApplyAestheticChanges(); break; case "customBackgroundLink": + case "customBackgroundColor": + case "customBackgroundColorTransparent": applyCustomBackground(); break; case "bg_opacity": @@ -1583,19 +1603,30 @@ async function applyCustomBackground() { const cardOpacity = Math.max(0, Math.min(100, Number(options.card_opacity ?? 80))); const cardBlur = Math.max(0, Math.min(30, Number(options.card_blur ?? 8))); const cardTransparent = 100 - cardOpacity; - style.textContent = ` - #wrapper { - background-image: url(${backgroundUrl}) !important; + // Solid colour: one flat fill, no image rules. The transparency opt-in is not + // about the colour — it decides whether the page's surfaces turn see-through over + // it (the glass treatment an image background always gets). + const solid = activeBackground.color || ""; + const surfaceTransparent = solid + ? (activeBackground.transparent ? bgTransparent : 0) + : bgTransparent; + const wrapperBackground = solid + ? `background-image: none !important; + background-color: ${solid} !important;` + : `background-image: url(${backgroundUrl}) !important; background-repeat: no-repeat !important; background-position: center center !important; - background-attachment: fixed !important; + background-attachment: fixed !important;`; + style.textContent = ` + #wrapper { + ${wrapperBackground} } - @media (orientation: landscape) { + ${solid ? "" : `@media (orientation: landscape) { #wrapper { background-size: ${fitToScreen ? 'cover' : backgroundScale + '% auto'} !important; } } @media (orientation: portrait) { #wrapper { background-size: cover !important; } - } + }`} .ic-Dashboard-header__layout { background: none !important; border-radius: 5px; @@ -1605,7 +1636,7 @@ async function applyCustomBackground() { margin-left: -35px !important; margin-right: -35px !important; box-sizing: border-box !important; - background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important; + background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${surfaceTransparent}%) !important; border: 1px solid color-mix(in srgb, var(--bcborders) 60%, transparent) !important; border-radius: 10px !important; position: sticky !important; @@ -1617,7 +1648,7 @@ async function applyCustomBackground() { /* glass day groups so a background image shows through between day cards */ #dashboard-planner .planner-day, #dashboard-planner .planner-empty-days { - background: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important; + background: color-mix(in srgb, var(--bcbackground-0), transparent ${surfaceTransparent}%) !important; backdrop-filter: blur(${bgBlur}px) !important; -webkit-backdrop-filter: blur(${bgBlur}px) !important; border-radius: 12px !important; @@ -1644,14 +1675,14 @@ async function applyCustomBackground() { #right-side-wrapper { backdrop-filter: blur(${bgBlur}px) !important; -webkit-backdrop-filter: blur(${bgBlur}px) !important; - background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%); + background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${surfaceTransparent}%); border-radius: 5px; } /* tint the whole #left-side column (the inner frame only wraps the links) */ #left-side { backdrop-filter: blur(${bgBlur}px) !important; -webkit-backdrop-filter: blur(${bgBlur}px) !important; - background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important; + background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${surfaceTransparent}%) !important; } /* #right-side sub-text keeps Canvas gray in light mode; recolor for contrast */ .recent_feedback .event-details { @@ -1736,14 +1767,14 @@ async function applyCustomBackground() { border-radius: 0 !important; } #assignments.ui-tabs-panel { - background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important; + background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${surfaceTransparent}%) !important; backdrop-filter: blur(${bgBlur}px) !important; -webkit-backdrop-filter: blur(${bgBlur}px) !important; border-radius: 5px !important; } /* InstUI flex View ships an opaque surface; give it the glass treatment */ .css-fiozi7-view--flex-flex { - background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important; + background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${surfaceTransparent}%) !important; backdrop-filter: blur(${bgBlur}px) !important; -webkit-backdrop-filter: blur(${bgBlur}px) !important; border-radius: 5px !important; @@ -1770,7 +1801,7 @@ async function applyCustomBackground() { } /* threads toolbar sits under the header panel; same glass treatment */ .css-1n94jrf-view { - background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important; + background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${surfaceTransparent}%) !important; backdrop-filter: blur(${bgBlur}px) !important; -webkit-backdrop-filter: blur(${bgBlur}px) !important; border-radius: 5px !important; @@ -1786,7 +1817,7 @@ async function applyCustomBackground() { #content { margin: 36px 48px 48px !important; padding: 10px !important; - background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important; + background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${surfaceTransparent}%) !important; backdrop-filter: blur(${bgBlur}px) !important; -webkit-backdrop-filter: blur(${bgBlur}px) !important; border-radius: 5px !important; @@ -1797,7 +1828,7 @@ async function applyCustomBackground() { #content { margin: 36px 48px 48px !important; padding: 10px !important; - background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important; + background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${surfaceTransparent}%) !important; backdrop-filter: blur(${bgBlur}px) !important; -webkit-backdrop-filter: blur(${bgBlur}px) !important; border-radius: 5px !important; @@ -1809,7 +1840,7 @@ async function applyCustomBackground() { .ic-Layout-contentMain { margin: 26px 38px 38px !important; padding: 10px !important; - background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important; + background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${surfaceTransparent}%) !important; backdrop-filter: blur(${bgBlur}px) !important; -webkit-backdrop-filter: blur(${bgBlur}px) !important; border-radius: 10px !important; @@ -1822,7 +1853,7 @@ async function applyCustomBackground() { it" signal -- and without it the tint above never lands, leaving dark text straight on the background image. */ #content:not(.ic-Layout-contentMain) { - background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important; + background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${surfaceTransparent}%) !important; backdrop-filter: blur(${bgBlur}px) !important; -webkit-backdrop-filter: blur(${bgBlur}px) !important; border-radius: 10px !important; @@ -1838,7 +1869,7 @@ async function applyCustomBackground() { } ${isConversationsPage() ? ` .css-1nh4pc4-view-flexItem { - background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important; + background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${surfaceTransparent}%) !important; backdrop-filter: blur(${bgBlur}px) !important; -webkit-backdrop-filter: blur(${bgBlur}px) !important; border-radius: 5px !important; diff --git a/js/popup.js b/js/popup.js index f09fcf3..90e7db0 100644 --- a/js/popup.js +++ b/js/popup.js @@ -219,7 +219,7 @@ const exportLayout = ["full_width", "center_cards", "condensed_cards", "equal_he const exportSidebar = ["better_sidebar", "sidebar_scale"]; const exportTodo = ["better_todo", "todo_hide_feedback", "todo_hide_read", "todo_full_height", "todo_celebrations_enabled", "todo_celebrations", "todo_celebration_amount", "todo_progress_rings", "todo_timeframe", "todo_timeframe_custom_past", "todo_timeframe_custom_future", "todo_hr24", "todo_separate_scrollbar", "todo_alternate_colors", "todo_ignore_card_colors", "todo_remove_icons", "todo_show_scores", "hover_preview"]; const exportGpa = ["gpa_calc", "gpa_calc_prepend", "gpa_calc_cumulative", "gpa_calc_weighted", "gpa_calc_show_on_hover"]; -const exportBackground = ["customBackgroundLink", "customBackgroundScale", "customBackgroundDaily", "customBackgroundNasaDaily", "fitImageToScreen", "card_transparency", "bg_opacity", "sidebar_opacity", "bg_blur", "sidebar_blur", "card_opacity", "card_blur"]; +const exportBackground = ["customBackgroundLink", "customBackgroundScale", "customBackgroundDaily", "customBackgroundNasaDaily", "customBackgroundColor", "customBackgroundColorTransparent", "fitImageToScreen", "card_transparency", "bg_opacity", "sidebar_opacity", "bg_blur", "sidebar_blur", "card_opacity", "card_blur"]; // Master "On/off toggles": every visual toggle, minus GPA/schedule/productivity. const exportToggles = ["dark_mode", "quiz_safe_mode", "grade_analytics", "grade_analytics_zones"].concat(exportCardColorToggles, exportLayout, exportSidebar, exportTodo); const fontsDropdownStateKey = "fonts_dropdown_open"; @@ -401,6 +401,8 @@ const defaultOptions = { "card_grid_flex": false, "customCardStyles": false, "customBackgroundLink": "", + "customBackgroundColor": "", + "customBackgroundColorTransparent": false, "customBackgroundScale": 100, "customBackgroundDaily": false, "customBackgroundNasaDaily": false, @@ -1106,6 +1108,73 @@ function setupCustomBackgroundLink(initial) { }); } +// Accepts "#1e2a38", "1e2a38" or "#abc"; anything else means "no colour". +function normalizeBackgroundColor(value) { + const hex = String(value || "").trim().replace(/^#/, ""); + if (/^[0-9a-f]{3}$/i.test(hex)) return "#" + hex.split("").map(c => c + c).join("").toLowerCase(); + if (/^[0-9a-f]{6}$/i.test(hex)) return "#" + hex.toLowerCase(); + return ""; +} + +function currentBackgroundColor() { + return normalizeBackgroundColor(document.querySelector("#customBackgroundColorHex")?.value || ""); +} + +// Solid colour area: hex field + picker, either one sets it. The colour outranks the +// presets and the image URL, so those are greyed out while it is set. +function setupCustomBackgroundColor(initial) { + const hexEl = document.querySelector("#customBackgroundColorHex"); + const picker = document.querySelector("#customBackgroundColorPicker"); + const clearBtn = document.querySelector("#clearCustomBackgroundColor"); + const transparency = document.querySelector("#customBackgroundColorTransparent"); + if (!hexEl || !picker) return; + + const initialColor = normalizeBackgroundColor(initial); + if (initialColor) { + hexEl.value = initialColor; + picker.value = initialColor; + } + chrome.storage.sync.get("customBackgroundColorTransparent", sync => { + if (transparency) transparency.checked = sync.customBackgroundColorTransparent === true; + }); + + const commit = (raw, { writeField = false } = {}) => { + const color = normalizeBackgroundColor(raw); + if (color) { + if (writeField || !hexEl.value) hexEl.value = color; + picker.value = color; + } else if (writeField) { + hexEl.value = ""; + } + chrome.storage.sync.set({ "customBackgroundColor": color }); + syncSolidBackgroundState(); + toggleOpacityOptions(); + }; + + hexEl.addEventListener("input", (e) => commit(e.target.value)); + hexEl.addEventListener("blur", (e) => commit(e.target.value, { writeField: true })); + picker.addEventListener("input", (e) => commit(e.target.value, { writeField: true })); + clearBtn?.addEventListener("click", () => { + hexEl.value = ""; + chrome.storage.sync.set({ "customBackgroundColor": "" }); + syncSolidBackgroundState(); + toggleOpacityOptions(); + }); + transparency?.addEventListener("change", function () { + chrome.storage.sync.set({ "customBackgroundColorTransparent": this.checked }); + }); + syncSolidBackgroundState(); +} + +// Grey the presets out while a colour is set, and only offer transparency with one. +function syncSolidBackgroundState() { + const hasColor = currentBackgroundColor() !== ""; + const presets = document.getElementById("background-presets"); + if (presets) presets.classList.toggle("is-disabled", hasColor); + const transparencyRow = document.getElementById("customBackgroundColorTransparencyRow"); + if (transparencyRow) transparencyRow.style.display = hasColor ? "flex" : "none"; +} + function setupCustomBackgroundScale(initial) { const el = document.querySelector("#customBackgroundScale"); const output = document.querySelector("#customBackgroundScaleValue"); @@ -1139,7 +1208,7 @@ function syncCustomBackgroundDailyState(isDaily) { manualControls.style.filter = isDaily ? "grayscale(1)" : "none"; } - ["customBackgroundLink", "customBackgroundScale", "clearCustomBackground"].forEach(id => { + ["customBackgroundLink", "customBackgroundScale", "clearCustomBackground", "customBackgroundColorHex", "customBackgroundColorPicker", "clearCustomBackgroundColor"].forEach(id => { const el = document.getElementById(id); if (el) el.disabled = isDaily; }); @@ -1152,6 +1221,7 @@ function syncCustomBackgroundDailyState(isDaily) { } function renderBackgroundPresetSelection() { + syncSolidBackgroundState(); const isDaily = document.querySelector("#customBackgroundDaily")?.checked === true || document.querySelector("#customBackgroundNasaDaily")?.checked === true; const dailyPreset = isDaily ? getDailyBackgroundPreset() : null; const currentLink = isDaily ? (dailyPreset?.url || "") : (document.querySelector("#customBackgroundLink")?.value || ""); @@ -1211,7 +1281,7 @@ function customBackgroundActive() { const link = document.querySelector("#customBackgroundLink"); const daily = document.querySelector("#customBackgroundDaily"); const nasa = document.querySelector("#customBackgroundNasaDaily"); - return (link && link.value.trim() !== "") || (daily && daily.checked) || (nasa && nasa.checked); + return (currentBackgroundColor() !== "") || (link && link.value.trim() !== "") || (daily && daily.checked) || (nasa && nasa.checked); } function toggleOpacityOptions() { @@ -2127,6 +2197,10 @@ async function setup() { { identifier: "customBackgroundScale", setup: (initial) => setupCustomBackgroundScale(initial), + }, + { + identifier: "customBackgroundColor", + setup: (initial) => setupCustomBackgroundColor(initial), }, { identifier: "todo_celebrations", @@ -2795,8 +2869,10 @@ async function setup() { document.getElementById("clearCustomBackground").addEventListener("click", () => { - chrome.storage.sync.set({ "customBackgroundLink": "", "customBackgroundScale": 100 }); + chrome.storage.sync.set({ "customBackgroundLink": "", "customBackgroundScale": 100, "customBackgroundColor": "" }); document.querySelector("#customBackgroundLink").value = ""; + document.querySelector("#customBackgroundColorHex").value = ""; + syncSolidBackgroundState(); document.querySelector("#customBackgroundScale").value = 100; document.querySelector("#customBackgroundScaleValue").textContent = "100%"; renderBackgroundPresetSelection();