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