stuff 2: electric boogaloo

_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."
     },

_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."
     },

_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."
     },

_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."
     },

_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."
     },

_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を使用してください。"
     },

_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."
     },

_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": "Выберите пресет или используйте свою ссылку на изображение."
     },

_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."
     },

_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。"
     },

_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": "選擇預設背景，或使用你自己的圖片網址。"
     },

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;}

html/popup.html

@@ -1485,6 +1485,22 @@
                     <input type="range" min="50" max="200" step="1" id="customBackgroundScale">
                 </div>
                 <input style="width:85%;" class="card-input" id="customBackgroundLink" placeholder="https://...">
+                <!-- Solid colour: when set it wins over the presets and the image URL -->
+                <div id="customBackgroundSolidRow" style="margin-top:12px;">
+                    <span class="sub-text" style="font-weight:600; color:#e2e2e2;" data-i18n="solid_color">Solid color</span>
+                    <div style="display:flex;align-items:center;gap:8px;margin-top:6px;">
+                        <input type="color" id="customBackgroundColorPicker" class="background-color-picker" value="#1e2a38" data-i18n-title="solid_color" title="Solid color">
+                        <input class="card-input" id="customBackgroundColorHex" maxlength="7" style="width:110px;margin:0;" data-i18n-placeholder="solid_color_hex" placeholder="#1e2a38">
+                        <button type="button" class="opacity-reset-btn" id="clearCustomBackgroundColor" title="Clear" data-i18n-title="clear_background">
+                            <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                        </button>
+                    </div>
+                </div>
+                <!-- Only meaningful with a colour set -->
+                <div class="sub-option" id="customBackgroundColorTransparencyRow" style="margin-top:8px;display:none;">
+                    <input type="checkbox" id="customBackgroundColorTransparent" name="customBackgroundColorTransparent">
+                    <label for="customBackgroundColorTransparent" class="sub-text" data-i18n="bg_transparency">Background transparency</label>
+                </div>
                 <button id="clearCustomBackground" class="big-button" style="margin-top: 8px;" data-i18n="clear_background">Clear Background</button>
             </div>
             <div class="sub-option" style="margin-top:10px;">

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,

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 = `
+    // Solid colour: one flat fill, no image rules. The transparency opt-in is not
-        #wrapper {
+    // about the colour — it decides whether the page's surfaces turn see-through over
-            background-image: url(${backgroundUrl}) !important;
+    // 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;

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();