dsh-background-by-model 0.5.1 → 0.5.3

package/lib/client.js

@@ -78,7 +78,9 @@ window.__ModuleLoader__.load({
 			ruleEmptyHint: "这条规则还没有图片，不会被匹配到，也不会作为兜底",
 			ruleColor: "主题色",
 			ruleColorNone: "系统主题",
-			ruleColorNoneHint: "未设颜色时跟随系统主题",
+			ruleColorNoneHint: "未设颜色时跟随系统主题：界面用宿主的配色，壁纸与各部位的透明度、模糊照旧生效",
+			ruleColorPick: "自定义颜色",
+			ruleColorPickHint: "优先从本图取色，取不到就用默认色",
 			ruleColorExtract: "从本图提取",
 			ruleLayout: "布局模式",
 			ruleFraming: "取景",
@@ -183,7 +185,9 @@ window.__ModuleLoader__.load({
 			ruleEmptyHint: "This rule has no image — it can neither match nor serve as the fallback",
 			ruleColor: "Theme color",
 			ruleColorNone: "System theme",
-			ruleColorNoneHint: "Without a color this rule follows the system theme",
+			ruleColorNoneHint: "Without a color this rule follows the system theme: the host palette paints the interface while the wallpaper and every opacity/blur slider keep working",
+			ruleColorPick: "Custom color",
+			ruleColorPickHint: "Extracts from this image when it can, otherwise uses a default color",
 			ruleColorExtract: "Extract from image",
 			ruleLayout: "Layout mode",
 			ruleFraming: "Framing",
@@ -1341,6 +1345,24 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/wallpaper.ts
+		/**
+		* `data-ds-dark-theme` value the plugin writes while it forces its own dark
+		* palette. The host treats the attribute as a boolean (`toggleAttribute`), so a
+		* plugin-specific value still matches every `body[data-ds-dark-theme]` rule
+		* while staying distinguishable from the host's own write — which is what lets
+		* `releaseOwnScheme` hand the flag back without clobbering the host's scheme.
+		*/
+		const OWN_SCHEME = "dsh-background-by-model";
+		const DARK_ATTR = "data-ds-dark-theme";
+		/**
+		* Marker on <html> while the plugin owns a palette. The dialog/trajectory rules
+		* below redirect NO-fallback tokens (`--dsw-alias-bg-layer-*`) to plugin-owned
+		* variables, so they may only match while those variables are actually written:
+		* without the gate a palette-less state would leave them reading a
+		* guaranteed-invalid value (transparent panels) instead of handing the surface
+		* back to the host untouched.
+		*/
+		const THEMED_ATTR = "data-dab-themed";
 		let wpEl = null;
 		let appliedTokenNames = [];
 		let tokenStyleEl = null;
@@ -1356,6 +1378,22 @@ window.__ModuleLoader__.load({
 			if (tokenStyleEl) tokenStyleEl.textContent = "";
 			for (const name of appliedTokenNames) document.body.style.removeProperty(name);
 			appliedTokenNames = [];
+			baseTokenKey = "";
+			lastBgKey = "";
+		}
+		/** Drop every surface the plugin owns: the variables the scoped
+		*  dialog/trajectory rules read, and the inline backgrounds written onto the
+		*  AppFrame columns. Used when no palette is available and at teardown — without
+		*  it the last color's surfaces outlive the color that produced them. */
+		function clearOwnedSurfaces() {
+			discoverParts();
+			const root = document.documentElement;
+			for (const name of OWNED_SURFACE_VARS) root.style.removeProperty(name);
+			for (const el of [
+				frameEl,
+				centerEl,
+				detailsEl
+			]) el?.style.removeProperty("background");
 		}
 		const OPACITY_TOKEN_GROUPS = [
 			{
@@ -1392,6 +1430,142 @@ window.__ModuleLoader__.load({
 			"--dsw-menu-surface-fill": "--dsh-any-op-menu"
 		};
 		let baseTokenKey = "";
+		const HOST_SURFACE_TOKENS = Object.keys(OPACITY_VARS);
+		/** Plugin-owned variables the scoped dialog/trajectory rules read. */
+		const SETTINGS_SURFACE_VARS = [
+			"--dsh-any-bg-settings-surface",
+			"--dsh-any-bg-settings-layer-1",
+			"--dsh-any-bg-settings-layer-2",
+			"--dsh-any-bg-settings-layer-3"
+		];
+		const TRAJECTORY_SURFACE_VARS = [
+			"--dsh-any-traj-layer-1",
+			"--dsh-any-traj-layer-2",
+			"--dsh-any-traj-layer-3"
+		];
+		const OWNED_SURFACE_VARS = [...SETTINGS_SURFACE_VARS, ...TRAJECTORY_SURFACE_VARS];
+		let hostProbe = null;
+		/** Resolve any color the engine understands (hex, rgb()/hsl(), a var() chain,
+		*  color-mix(), …) to its USED value: only a used color can be re-emitted with
+		*  an alpha. Returns null when the engine rejects the value. */
+		function resolveCssColor(raw) {
+			const value = raw.trim();
+			if (value === "") return null;
+			if (hostProbe === null) {
+				hostProbe = document.createElement("span");
+				hostProbe.setAttribute("aria-hidden", "true");
+				hostProbe.style.cssText = "position:absolute;width:0;height:0;pointer-events:none";
+			}
+			if (!hostProbe.isConnected) document.body.appendChild(hostProbe);
+			hostProbe.style.color = "";
+			hostProbe.style.color = value;
+			if (hostProbe.style.color === "") return null;
+			return getComputedStyle(hostProbe).color || null;
+		}
+		/** Read the host's own surface colors out of the live cascade. */
+		function readHostPalette() {
+			const sheet = tokenStyleEl;
+			const muted = sheet !== null && sheet.isConnected && !sheet.disabled;
+			if (muted) sheet.disabled = true;
+			try {
+				const computed = getComputedStyle(document.body);
+				const tokens = {};
+				for (const name of HOST_SURFACE_TOKENS) {
+					const used = resolveCssColor(computed.getPropertyValue(name));
+					if (used !== null) tokens[name] = used;
+				}
+				return tokens["--dsw-alias-bg-base"] === void 0 ? null : {
+					own: false,
+					tokens
+				};
+			} finally {
+				if (muted) sheet.disabled = false;
+			}
+		}
+		let hostPaletteCache = null;
+		const HOST_PALETTE_TTL_MS = 1e3;
+		function invalidateHostPalette() {
+			hostPaletteCache = null;
+		}
+		function hostPalette() {
+			const now = Date.now();
+			if (hostPaletteCache !== null && now - hostPaletteCache.at < HOST_PALETTE_TTL_MS) return hostPaletteCache.palette;
+			const read = readHostPalette();
+			hostPaletteCache = {
+				at: now,
+				palette: read
+			};
+			return read;
+		}
+		/** The palette every surface is currently painted from. */
+		function palette() {
+			if (!rHasColor()) return hostPalette();
+			const [h, s, l] = rColor();
+			return {
+				own: true,
+				tokens: genTokens(h, s, l).tokens
+			};
+		}
+		/** A resolved color with a new alpha. The plugin's own tokens are `hsl()` and
+		*  the host's alias tokens resolve to hex, both of which `toRgba` parses; a host
+		*  publishing an already-composited value (`color(…)`, `oklab(…)`, …) cannot be
+		*  parsed there, and emitting it unchanged would paint an OPAQUE surface — the
+		*  one outcome the transparent-surface design must never fall back to. Those go
+		*  through `color-mix` instead. */
+		function withAlpha(color, alpha) {
+			const converted = toRgba(color, alpha);
+			if (/^(rgb|hsl)a?\(/i.test(converted)) return converted;
+			return `color-mix(in srgb, ${color} ${Math.round(Math.max(0, Math.min(1, alpha)) * 100)}%, transparent)`;
+		}
+		/**
+		* The color scheme the HOST's own preference resolves to, pushed in by the
+		* browser half (the theme service knows it, custom themes included). `null`
+		* means "unknown", which is the only case where the plugin falls back to the
+		* preference the host's boot script published and to the OS query itself.
+		*/
+		let hostSchemeDark = null;
+		function setHostScheme(dark) {
+			hostSchemeDark = dark;
+		}
+		function resolveHostDark() {
+			if (typeof hostSchemeDark === "boolean") return hostSchemeDark;
+			const source = document.documentElement.dataset.dsThemeSource;
+			if (source === "dark") return true;
+			if (source === "light") return false;
+			try {
+				return window.matchMedia("(prefers-color-scheme: dark)").matches;
+			} catch {
+				return false;
+			}
+		}
+		/**
+		* Keep `data-ds-dark-theme` in the HOST's own form (a boolean attribute) while
+		* the plugin does not own a palette.
+		*
+		* The plugin overwrites that flag whenever it owns a palette — including
+		* REMOVING it to force a light one — and the host only re-projects the flag on a
+		* theme change. So a flag the plugin dropped can stick: the host keeps painting
+		* its light palette on a dark system, the readback then hands those light
+		* surfaces back to the plugin, and the interface stays light until some
+		* unrelated event happens to re-run an apply. Restoring the flag from the
+		* resolved scheme closes that hole, and the write is skipped when it already
+		* matches so this never churns the theme observer.
+		*/
+		function adoptHostScheme() {
+			const dark = resolveHostDark();
+			const current = document.body.getAttribute(DARK_ATTR);
+			if (dark) {
+				if (current !== "") document.body.setAttribute(DARK_ATTR, "");
+			} else if (current !== null) document.body.removeAttribute(DARK_ATTR);
+		}
+		/** Re-read the host palette and repaint from it when it moved. Called while a
+		*  color-less rule is active (the host can re-project its palette at any time,
+		*  with no event of ours to hang a repaint on). */
+		function refreshSystemTheme() {
+			adoptHostScheme();
+			invalidateHostPalette();
+			applyCustomTokens(rOps());
+		}
 		let pendingOps = null;
 		let tokensRaf = null;
 		function applyCustomTokens(ops) {
@@ -1407,26 +1581,38 @@ window.__ModuleLoader__.load({
 		}
 		let lastBgKey = "";
 		function applyCustomTokensNow(ops) {
+			const src = palette();
+			if (src === null) {
+				clearCustomTokens();
+				clearOwnedSurfaces();
+				adoptHostScheme();
+				return;
+			}
+			const { own, tokens } = src;
 			const [h, s, l] = rColor();
-			const { tokens } = genTokens(h, s, l);
 			try {
-				const forceDark = l < .55;
-				if (`${h}|${s}|${l}` !== baseTokenKey) {
-					baseTokenKey = `${h}|${s}|${l}`;
-					if (forceDark) document.body.setAttribute("data-ds-dark-theme", "dsh-background-by-model");
-					else document.body.removeAttribute("data-ds-dark-theme");
-					const decls = [`color-scheme:${forceDark ? "dark" : "light"}`];
+				const forceDark = own && l < .55;
+				const key = own ? `own:${h}|${s}|${l}` : `host:${HOST_SURFACE_TOKENS.map((n) => tokens[n] ?? "").join("|")}`;
+				if (key !== baseTokenKey) {
+					if (own) {
+						if (forceDark) document.body.setAttribute(DARK_ATTR, OWN_SCHEME);
+						else document.body.removeAttribute(DARK_ATTR);
+					} else adoptHostScheme();
+					const decls = own ? [`color-scheme:${forceDark ? "dark" : "light"}`] : [];
 					for (const [name, value] of Object.entries(tokens)) {
 						const opVar = OPACITY_VARS[name];
 						decls.push(`${name}:${opVar !== void 0 ? `var(${opVar})` : value}!important`);
 					}
 					ensureTokenStyle().textContent = `body{${decls.join(";")}}`;
-					for (const name of appliedTokenNames) document.body.style.removeProperty(name);
-					appliedTokenNames = Object.keys(tokens);
+					if (own) {
+						for (const name of appliedTokenNames) document.body.style.removeProperty(name);
+						appliedTokenNames = Object.keys(tokens);
+					}
+					baseTokenKey = key;
 				}
 				const root = document.documentElement;
-				for (const g of OPACITY_TOKEN_GROUPS) for (const name of g.names) root.style.setProperty(OPACITY_VARS[name], toRgba(tokens[name] ?? "#000", ops[g.part]));
-				root.style.setProperty("--dsh-any-op-menu-cordis", toRgba(tokens["--dsw-specific-menu"] ?? "#000", ops.input));
+				for (const g of OPACITY_TOKEN_GROUPS) for (const name of g.names) root.style.setProperty(OPACITY_VARS[name], withAlpha(tokens[name] ?? "#000", ops[g.part]));
+				root.style.setProperty("--dsh-any-op-menu-cordis", withAlpha(tokens["--dsw-specific-menu"] ?? "#000", ops.input));
 				const bgKey = `${baseTokenKey}|${ops.bg}`;
 				if (bgKey !== lastBgKey) {
 					lastBgKey = bgKey;
@@ -1435,45 +1621,48 @@ window.__ModuleLoader__.load({
 			} catch {}
 		}
 		const SETTINGS_PANEL_SEL = "[role=\"dialog\"][aria-modal=\"true\"][aria-labelledby]";
-		const SETTINGS_STYLE_RULE = `${SETTINGS_PANEL_SEL}{background:var(--dsh-any-bg-settings-surface,var(--dsw-alias-bg-layer-2));backdrop-filter:var(--dsh-any-blur-settings,none);--dsw-alias-bg-layer-1:var(--dsh-any-bg-settings-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-bg-settings-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-bg-settings-layer-3)}${SETTINGS_PANEL_SEL} .dab-card{backdrop-filter:var(--dsh-any-blur-card-panels,none);-webkit-backdrop-filter:var(--dsh-any-blur-card-panels,none)}`;
+		const SETTINGS_STYLE_RULE = `${SETTINGS_PANEL_SEL}{background:var(--dsh-any-bg-settings-surface,var(--dsw-alias-bg-layer-2));backdrop-filter:var(--dsh-any-blur-settings,none);}html[${THEMED_ATTR}] ${SETTINGS_PANEL_SEL}{--dsw-alias-bg-layer-1:var(--dsh-any-bg-settings-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-bg-settings-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-bg-settings-layer-3)}${SETTINGS_PANEL_SEL} .dab-card{backdrop-filter:var(--dsh-any-blur-card-panels,none);-webkit-backdrop-filter:var(--dsh-any-blur-card-panels,none)}`;
 		const INPUT_BLUR_RULE = "[data-composer-card],[data-cordis-panel]{-webkit-backdrop-filter:var(--dsh-any-input-blur,none);backdrop-filter:var(--dsh-any-input-blur,none)}[data-cordis-panel]{--dsw-specific-menu:var(--dsh-any-op-menu-cordis)!important}";
 		function applyInputBlur(px) {
 			if (px > 0) document.documentElement.style.setProperty("--dsh-any-input-blur", `blur(${px}px)`);
 			else document.documentElement.style.removeProperty("--dsh-any-input-blur");
 		}
 		function applySettingsOverrides(op) {
-			const [h, s, l] = rColor();
-			const tokens = genTokens(h, s, l).tokens;
-			const layer1 = tokens["--dsw-alias-bg-layer-1"];
-			const layer2 = tokens["--dsw-alias-bg-layer-2"];
-			const layer3 = tokens["--dsw-alias-bg-layer-3"];
-			if (layer2 !== void 0) document.documentElement.style.setProperty("--dsh-any-bg-settings-surface", toRgba(layer2, op));
-			if (layer1 !== void 0) document.documentElement.style.setProperty("--dsh-any-bg-settings-layer-1", toRgba(layer1, op));
-			if (layer2 !== void 0) document.documentElement.style.setProperty("--dsh-any-bg-settings-layer-2", toRgba(layer2, op));
-			if (layer3 !== void 0) document.documentElement.style.setProperty("--dsh-any-bg-settings-layer-3", toRgba(layer3, op));
-		}
-		const TRAJECTORY_STYLE_RULE = "[data-conversation-composer-overlay]{--dsw-alias-bg-layer-1:var(--dsh-any-traj-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-traj-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-traj-layer-3)}";
+			const tokens = palette()?.tokens ?? {};
+			const root = document.documentElement;
+			const write = (name, token) => {
+				const value = tokens[token];
+				if (value === void 0) root.style.removeProperty(name);
+				else root.style.setProperty(name, withAlpha(value, op));
+			};
+			write("--dsh-any-bg-settings-surface", "--dsw-alias-bg-layer-2");
+			write("--dsh-any-bg-settings-layer-1", "--dsw-alias-bg-layer-1");
+			write("--dsh-any-bg-settings-layer-2", "--dsw-alias-bg-layer-2");
+			write("--dsh-any-bg-settings-layer-3", "--dsw-alias-bg-layer-3");
+		}
+		const TRAJECTORY_STYLE_RULE = `html[${THEMED_ATTR}] [data-conversation-composer-overlay]{--dsw-alias-bg-layer-1:var(--dsh-any-traj-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-traj-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-traj-layer-3)}`;
 		function applyTrajectoryOverrides(op) {
-			const [h, s, l] = rColor();
-			const tokens = genTokens(h, s, l).tokens;
-			const layer1 = tokens["--dsw-alias-bg-layer-1"];
-			const layer2 = tokens["--dsw-alias-bg-layer-2"];
-			const layer3 = tokens["--dsw-alias-bg-layer-3"];
-			if (layer1 !== void 0) document.documentElement.style.setProperty("--dsh-any-traj-layer-1", toRgba(layer1, op));
-			if (layer2 !== void 0) document.documentElement.style.setProperty("--dsh-any-traj-layer-2", toRgba(layer2, op));
-			if (layer3 !== void 0) document.documentElement.style.setProperty("--dsh-any-traj-layer-3", toRgba(layer3, op));
+			const tokens = palette()?.tokens ?? {};
+			const root = document.documentElement;
+			const write = (name, token) => {
+				const value = tokens[token];
+				if (value === void 0) root.style.removeProperty(name);
+				else root.style.setProperty(name, withAlpha(value, op));
+			};
+			write("--dsh-any-traj-layer-1", "--dsw-alias-bg-layer-1");
+			write("--dsh-any-traj-layer-2", "--dsw-alias-bg-layer-2");
+			write("--dsh-any-traj-layer-3", "--dsw-alias-bg-layer-3");
 		}
 		const RIGHTBAR_STYLE_RULE = "div[data-sidebar-right-panel]:not(:has([data-dockkit-content],[data-dockkit-empty]))[data-sidebar-right-open],div[data-sidebar-right-panel] [data-dockkit-content]:not([data-dockkit-float]),div[data-sidebar-right-panel] [data-dockkit-empty]{background:var(--dsh-any-bg-rightbar,var(--dsw-alias-bg-base))!important}div[data-sidebar-right-panel][data-sidebar-right-open]{-webkit-backdrop-filter:var(--dsh-any-blur-rightbar,none);backdrop-filter:var(--dsh-any-blur-rightbar,none)}";
 		/** Paint the file-preview panel's surface from its own slider. */
 		function applyRightbarOverrides(op) {
 			const root = document.documentElement;
-			if (!rHasColor()) {
+			const base = palette()?.tokens["--dsw-alias-bg-base"];
+			if (base === void 0) {
 				root.style.removeProperty("--dsh-any-bg-rightbar");
 				return;
 			}
-			const [h, s, l] = rColor();
-			const base = genTokens(h, s, l).tokens["--dsw-alias-bg-base"];
-			if (base !== void 0) root.style.setProperty("--dsh-any-bg-rightbar", toRgba(base, op));
+			root.style.setProperty("--dsh-any-bg-rightbar", withAlpha(base, op));
 		}
 		/** Extra backdrop frost for the file-preview panel (0 = no frost of its own). */
 		function applyRightbarBlur(px) {
@@ -1542,14 +1731,20 @@ window.__ModuleLoader__.load({
 		*  reducing the main-bg opacity stacked a second alpha onto the sidebar; moving
 		*  the alpha onto the columns keeps the sidebar owned by its own slider. */
 		function applyPartOpacities(ops) {
-			if (!rHasColor()) return;
 			discoverParts();
 			if (frameEl === null) return;
-			const [h, s, l] = rColor();
-			const base = genTokens(h, s, l).tokens["--dsw-alias-bg-base"];
+			const base = palette()?.tokens["--dsw-alias-bg-base"];
+			if (base === void 0) {
+				for (const el of [
+					frameEl,
+					centerEl,
+					detailsEl
+				]) el?.style.removeProperty("background");
+				return;
+			}
 			frameEl.style.background = "transparent";
-			if (centerEl !== null) centerEl.style.background = base !== void 0 ? toRgba(base, ops.bg) : "transparent";
-			if (detailsEl !== null) detailsEl.style.background = base !== void 0 ? toRgba(base, ops.bg) : "transparent";
+			if (centerEl !== null) centerEl.style.background = withAlpha(base, ops.bg);
+			if (detailsEl !== null) detailsEl.style.background = withAlpha(base, ops.bg);
 		}
 		/** Blur of the option panels inside the settings dialog (.dab-card), owned by
 		*  the "dialog option panel" (card) blur slider. Written as a plugin-owned
@@ -1762,8 +1957,7 @@ window.__ModuleLoader__.load({
 		function applyViewCards() {
 			discoverParts();
 			if (centerEl === null) return;
-			const [h, s, l] = rColor();
-			const surface = genTokens(h, s, l).tokens["--dsw-alias-bg-layer-1"];
+			const surface = palette()?.tokens["--dsw-alias-bg-layer-1"];
 			VIEW_CARDS.forEach((spec, i) => {
 				const target = discoverViewTarget(i, spec);
 				if (target === null) return;
@@ -1773,8 +1967,8 @@ window.__ModuleLoader__.load({
 				if (!plain) {
 					if (!target.hasAttribute(spec.mark)) stashCardPrev(target, spec.prev, false);
 					const borderAlpha = opacity > 0 ? Math.min(1, opacity * 1.5) : blurPx > 0 ? .35 : 0;
-					target.style.background = surface !== void 0 ? toRgba(surface, opacity) : "transparent";
-					target.style.border = surface !== void 0 ? `1px solid ${toRgba(surface, borderAlpha)}` : "1px solid transparent";
+					target.style.background = surface !== void 0 ? withAlpha(surface, opacity) : "transparent";
+					target.style.border = surface !== void 0 ? `1px solid ${withAlpha(surface, borderAlpha)}` : "1px solid transparent";
 					target.style.borderRadius = "16px";
 					target.style.padding = "18px";
 				}
@@ -1806,31 +2000,38 @@ window.__ModuleLoader__.load({
 		let themeRaf = 0;
 		function reassertScheme() {
 			const [, , l] = rColor();
-			if (l < .55) document.body.setAttribute("data-ds-dark-theme", "dsh-background-by-model");
-			else document.body.removeAttribute("data-ds-dark-theme");
+			if (l < .55) document.body.setAttribute(DARK_ATTR, OWN_SCHEME);
+			else document.body.removeAttribute(DARK_ATTR);
 			applyCustomTokens(rOps());
 		}
 		/** Re-assert the plugin's forced scheme whenever the host strips it, so a
-		*  refresh / cold-load / set-change never flashes a light frame. */
+		*  refresh / cold-load / set-change never flashes a light frame. Also the point
+		*  where a host-side scheme flip is noticed while a color-less rule runs: that
+		*  rule paints from the host palette, so the readback is dropped and the
+		*  surfaces are re-emitted from the new one. */
 		function watchThemeResets() {
 			if (themeObserver !== null || typeof MutationObserver === "undefined") return () => void 0;
 			themeObserver = new MutationObserver(() => {
-				if (document.body.getAttribute("data-ds-dark-theme") === "dsh-background-by-model") return;
-				if (!rHasColor()) return;
+				invalidateHostPalette();
+				if (document.body.getAttribute(DARK_ATTR) === "dsh-background-by-model") return;
+				if (!rHasColor()) {
+					applyCustomTokens(rOps());
+					return;
+				}
 				if (themeRaf !== 0) return;
 				themeRaf = requestAnimationFrame(() => {
 					themeRaf = 0;
-					if (document.body.getAttribute("data-ds-dark-theme") === "dsh-background-by-model") return;
+					if (document.body.getAttribute(DARK_ATTR) === "dsh-background-by-model") return;
 					reassertScheme();
 				});
 			});
 			themeObserver.observe(document.body, {
 				attributes: true,
-				attributeFilter: ["data-ds-dark-theme"]
+				attributeFilter: [DARK_ATTR]
 			});
 			themeObserver.observe(document.documentElement, {
 				attributes: true,
-				attributeFilter: ["data-ds-dark-theme"]
+				attributeFilter: [DARK_ATTR]
 			});
 			return () => {
 				themeObserver?.disconnect();
@@ -2072,16 +2273,20 @@ window.__ModuleLoader__.load({
 			const url = rWp();
 			if (url) applyImageWp(url);
 			else if (wpEl !== null) dropWpContainer();
-			if (rHasColor()) {
-				applyCustomTokens(rOps());
-				applySettingsOverrides(rSop());
-				applyTrajectoryOverrides(rTrajectoryOpacity());
-			} else {
+			if (!rHasColor() && !baseTokenKey.startsWith("host:")) {
+				clearCustomTokens();
+				invalidateHostPalette();
+			}
+			if (!rHasColor()) adoptHostScheme();
+			const src = palette();
+			document.documentElement.toggleAttribute(THEMED_ATTR, src !== null);
+			if (src === null) {
 				clearCustomTokens();
-				document.body.removeAttribute("data-ds-dark-theme");
-				baseTokenKey = "";
-				lastBgKey = "";
+				clearOwnedSurfaces();
 			}
+			applyCustomTokens(rOps());
+			applySettingsOverrides(rSop());
+			applyTrajectoryOverrides(rTrajectoryOpacity());
 			applyRightbarOverrides(rRightbarOpacity());
 			applyPartBlurs(rBlurs());
 		}
@@ -2091,23 +2296,17 @@ window.__ModuleLoader__.load({
 			tokenStyleEl?.remove();
 			tokenStyleEl = null;
 			removeViewCards();
-			document.body.removeAttribute("data-ds-dark-theme");
+			document.documentElement.removeAttribute(THEMED_ATTR);
 			document.body.style.removeProperty("color-scheme");
-			document.documentElement.style.removeProperty("--dsh-any-bg-settings-surface");
-			document.documentElement.style.removeProperty("--dsh-any-bg-settings-layer-1");
-			document.documentElement.style.removeProperty("--dsh-any-bg-settings-layer-2");
-			document.documentElement.style.removeProperty("--dsh-any-bg-settings-layer-3");
-			document.documentElement.style.removeProperty("--dsh-any-traj-layer-1");
-			document.documentElement.style.removeProperty("--dsh-any-traj-layer-2");
-			document.documentElement.style.removeProperty("--dsh-any-traj-layer-3");
+			clearOwnedSurfaces();
+			adoptHostScheme();
+			invalidateHostPalette();
 			document.documentElement.style.removeProperty("--dsh-any-blur-settings");
 			document.documentElement.style.removeProperty("--dsh-any-blur-card-panels");
 			document.documentElement.style.removeProperty("--dsh-any-input-blur");
 			document.documentElement.style.removeProperty("--dsh-any-bg-rightbar");
 			document.documentElement.style.removeProperty("--dsh-any-blur-rightbar");
 			for (const v of Object.values(OPACITY_VARS)) document.documentElement.style.removeProperty(v);
-			baseTokenKey = "";
-			lastBgKey = "";
 			if (tokensRaf !== null) {
 				cancelAnimationFrame(tokensRaf);
 				tokensRaf = null;
@@ -2119,9 +2318,6 @@ window.__ModuleLoader__.load({
 			setBlur(sidebarEl, 0);
 			setBlur(centerEl, 0);
 			setBlur(detailsEl, 0);
-			if (frameEl !== null) frameEl.style.removeProperty("background");
-			if (centerEl !== null) centerEl.style.removeProperty("background");
-			if (detailsEl !== null) detailsEl.style.removeProperty("background");
 			stopWatchingParts();
 		}
 		//#endregion
@@ -3919,6 +4115,23 @@ window.__ModuleLoader__.load({
 					setExtracting(false);
 				}
 			};
+			/**
+			* Leaving "follow the system theme" must not hand the user a color that has
+			* nothing to do with the wallpaper they just picked, so this tries the image
+			* first and only falls back to the seed. (`extractColor` is the same pass the
+			* extract button runs and returns false when nothing vivid was found.)
+			*/
+			const onPickColor = async () => {
+				if (url !== null) {
+					setExtracting(true);
+					try {
+						if (await p.extractColor(rule.id)) return;
+					} catch {} finally {
+						setExtracting(false);
+					}
+				}
+				p.setRule(rule.id, { color: SEED_COLOR });
+			};
 			const cls = `dab-rule${active ? " is-active" : ""}${rule.enabled ? "" : " is-off"}`;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: cls,
@@ -4110,25 +4323,34 @@ window.__ModuleLoader__.load({
 									className: "dab-rule-section-title",
 									children: t("ruleColor")
 								}),
-								rule.color === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "dab-chip-row",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-										type: "button",
-										className: "dab-btn",
-										onClick: () => p.setRule(rule.id, { color: SEED_COLOR }),
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropletIcon, { size: 14 }), t("ruleColorNone")]
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-										type: "button",
-										className: "dab-btn",
-										disabled: url === null || extracting,
-										onClick: () => void onExtract(),
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SparkleIcon, { size: 14 }), extracting ? t("extracting") : t("ruleColorExtract")]
-									})]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "dab-hint",
-									style: { marginTop: 8 },
-									children: t("ruleColorNoneHint")
-								})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+								rule.color === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "dab-chip-row",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: "dab-btn",
+											disabled: extracting,
+											onClick: () => void onPickColor(),
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropletIcon, { size: 14 }), extracting ? t("extracting") : t("ruleColorPick")]
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: "dab-btn",
+											disabled: url === null || extracting,
+											onClick: () => void onExtract(),
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SparkleIcon, { size: 14 }), extracting ? t("extracting") : t("ruleColorExtract")]
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "dab-hint",
+										style: { marginTop: 8 },
+										children: t("ruleColorNoneHint")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "dab-hint",
+										style: { marginTop: 6 },
+										children: t("ruleColorPickHint")
+									})
+								] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										style: {
 											display: "flex",
@@ -4522,7 +4744,7 @@ window.__ModuleLoader__.load({
 			const styleEl = document.createElement("style");
 			styleEl.dataset.plugin = "dsh-background-by-model";
 			markOwnSheet(styleEl);
-			styleEl.textContent = `body[data-ds-dark-theme="dsh-background-by-model"]::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,255,255,0.03) 0%,transparent 60%)}${SETTINGS_STYLE_RULE}${TRAJECTORY_STYLE_RULE}${RIGHTBAR_STYLE_RULE}${INPUT_BLUR_RULE}[data-composer-card] textarea::placeholder,[data-composer-card] input::placeholder,[data-composer-card] [contenteditable]::placeholder,[data-cordis-panel] input::placeholder,[data-cordis-panel] textarea::placeholder,.dab-input::placeholder,.dab-input textarea::placeholder,.dab-input input::placeholder{color:var(--dsh-any-placeholder,var(--dsw-alias-label-caption,#8a8f98))!important;font-style:italic;opacity:.85}`;
+			styleEl.textContent = `body[data-ds-dark-theme="${OWN_SCHEME}"]::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,255,255,0.03) 0%,transparent 60%)}${SETTINGS_STYLE_RULE}${TRAJECTORY_STYLE_RULE}${RIGHTBAR_STYLE_RULE}${INPUT_BLUR_RULE}[data-composer-card] textarea::placeholder,[data-composer-card] input::placeholder,[data-composer-card] [contenteditable]::placeholder,[data-cordis-panel] input::placeholder,[data-cordis-panel] textarea::placeholder,.dab-input::placeholder,.dab-input textarea::placeholder,.dab-input input::placeholder{color:var(--dsh-any-placeholder,var(--dsw-alias-label-caption,#8a8f98))!important;font-style:italic;opacity:.85}`;
 			document.head.appendChild(styleEl);
 			ctx.effect(() => () => {
 				styleEl?.parentNode?.removeChild(styleEl);
@@ -4562,20 +4784,38 @@ window.__ModuleLoader__.load({
 				rev++;
 				bound?.sync(rWp(), rev, rulesRev, modelLabel !== "" ? modelLabel : modelText, modelSource, modelNote, activeRuleId, activeMatched);
 			};
+			/**
+			* Publish the scheme the host's own preference resolves to. The theme service
+			* is the only place that knows it (a custom active theme included); the
+			* wallpaper layer needs it to hand `data-ds-dark-theme` back in the host's own
+			* form while a color-less rule follows that theme, instead of leaving the flag
+			* off — which pins the host to its LIGHT palette on a dark system.
+			*/
+			const syncHostScheme = () => {
+				try {
+					setHostScheme(ctx.theme.getTheme().active.colorScheme === "dark");
+				} catch {
+					setHostScheme(null);
+				}
+			};
 			/** Resolve the active rule for the current model and repaint everything. */
 			const applyActive = () => {
 				const { rule, matched } = matchRule(cfg.rules, modelText);
 				setActive(rule === null ? null : rule.id, matched);
 				const color = rule === null ? null : rule.color;
 				if (skinTimer !== null) window.clearTimeout(skinTimer);
-				skinTimer = window.setTimeout(() => {
+				if (color === null) {
+					skinTimer = null;
+					dropCustom();
+				} else skinTimer = window.setTimeout(() => {
 					skinTimer = null;
-					if (color === null) dropCustom();
-					else registerCustom(color[0], color[1], color[2]);
+					registerCustom(color[0], color[1], color[2]);
 				}, 60);
+				syncHostScheme();
 				applyWp();
 				sync();
 			};
+			syncHostScheme();
 			applyWp();
 			sync();
 			watchParts();
@@ -4625,6 +4865,7 @@ window.__ModuleLoader__.load({
 				teardownWp();
 			}, "dsh-background-by-model: wp cleanup");
 			ctx.effect(() => ctx.on("theme/change", () => {
+				syncHostScheme();
 				if (activeRuleColor() !== null) {
 					const snapshot = ctx.theme.getTheme();
 					if (snapshot.preference !== CUSTOM_ID && snapshot.themes.some((t) => t.id === CUSTOM_ID)) ctx.theme.setTheme(CUSTOM_ID);
@@ -4927,6 +5168,7 @@ window.__ModuleLoader__.load({
 				navIconObserver = null;
 			}, "dsh-background-by-model: nav icon watch");
 			const restoreSaved = () => {
+				syncHostScheme();
 				const color = activeRuleColor();
 				if (color !== null) {
 					const snapshot = ctx.theme.getTheme();
@@ -4940,8 +5182,12 @@ window.__ModuleLoader__.load({
 				restoreTimers.forEach((id) => window.clearTimeout(id));
 			}, "dsh-background-by-model: boot restore");
 			const watchdogId = window.setInterval(() => {
+				syncHostScheme();
 				const color = activeRuleColor();
-				if (color === null) return;
+				if (color === null) {
+					refreshSystemTheme();
+					return;
+				}
 				const snapshot = ctx.theme.getTheme();
 				let changed = false;
 				if (!snapshot.themes.some((t) => t.id === CUSTOM_ID)) {