feat: Themes can adapt to colour

src/seqta/ui/colors/Manager.ts

@@ -5,6 +5,7 @@ import { lightenAndPaleColor } from "./lightenAndPaleColor";
 import ColorLuminance from "./ColorLuminance";
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 import { getAdaptiveColour } from "@/seqta/utils/adaptiveThemeColour";
+import { getCustomThemeAdaptiveCssVariables } from "@/seqta/ui/colors/customThemeAdaptiveBindings";
 
 import darkLogo from "@/resources/icons/betterseqta-light-full.png";
 import lightLogo from "@/resources/icons/betterseqta-dark-full.png";
@@ -127,6 +128,12 @@ function applyColorsWith(selectedColor: string) {
   // Apply all the properties
   applyProperties({ ...commonProps, ...modeProps, ...dynamicProps });
 
+  if (settingsState.selectedTheme) {
+    for (const name of getCustomThemeAdaptiveCssVariables()) {
+      setCSSVar(name, selectedColor);
+    }
+  }
+
   let alliframes = document.getElementsByTagName("iframe");
 
   for (let i = 0; i < alliframes.length; i++) {

src/seqta/ui/colors/customThemeAdaptiveBindings.ts

@@ -0,0 +1,40 @@
+/** Tracks which author-declared CSS variables mirror the effective accent; not persisted in settings storage. */
+
+const VALID_CUSTOM_PROP = /^--[a-zA-Z0-9_-]{1,120}$/;
+
+let boundNames: string[] = [];
+
+export function normalizeAdaptiveCssVariableNames(
+  names: string[] | undefined,
+): string[] {
+  if (!names?.length) return [];
+  const out: string[] = [];
+  const seen = new Set<string>();
+  for (const raw of names) {
+    const s = raw.trim();
+    if (!VALID_CUSTOM_PROP.test(s) || seen.has(s)) continue;
+    seen.add(s);
+    out.push(s);
+  }
+  return out;
+}
+
+export function setCustomThemeAdaptiveCssVariables(
+  names: string[] | undefined,
+): void {
+  for (const n of boundNames) {
+    document.documentElement.style.removeProperty(n);
+  }
+  boundNames = normalizeAdaptiveCssVariableNames(names);
+}
+
+export function getCustomThemeAdaptiveCssVariables(): string[] {
+  return boundNames;
+}
+
+export function clearCustomThemeAdaptiveCssVariables(): void {
+  for (const n of boundNames) {
+    document.documentElement.style.removeProperty(n);
+  }
+  boundNames = [];
+}

src/seqta/utils/listeners/StorageChanges.ts

@@ -20,6 +20,7 @@ export class StorageChangeHandler {
     settingsState.register("adaptiveThemeColourTransition", () =>
       void updateAllColors(),
     );
+    settingsState.register("selectedTheme", () => void updateAllColors());
     settingsState.register("DarkMode", this.handleDarkModeChange.bind(this));
     settingsState.register("onoff", this.handleOnOffChange.bind(this));
     settingsState.register("shortcuts", this.handleShortcutsChange.bind(this));