feat: adaptive themeing

src/seqta/ui/colors/Manager.ts

@@ -1,8 +1,10 @@
 import browser from "webextension-polyfill";
+import Color from "color";
 import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour";
 import { lightenAndPaleColor } from "./lightenAndPaleColor";
 import ColorLuminance from "./ColorLuminance";
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+import { getAdaptiveColour } from "@/seqta/utils/adaptiveThemeColour";
 
 import darkLogo from "@/resources/icons/betterseqta-light-full.png";
 import lightLogo from "@/resources/icons/betterseqta-dark-full.png";
@@ -13,13 +15,7 @@ const setCSSVar = (varName: any, value: any) =>
 const applyProperties = (props: any) =>
   Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
 
-export function updateAllColors() {
-  // Determine the color to use
-  const selectedColor =
-    settingsState.selectedColor !== ""
-      ? settingsState.selectedColor
-      : "#007bff";
-
+function applyColorsWith(selectedColor: string) {
   if (settingsState.transparencyEffects) {
     document.documentElement.classList.add("transparencyEffects");
   }
@@ -28,7 +24,7 @@ export function updateAllColors() {
   const commonProps = {
     "--better-sub": "#161616",
     "--better-alert-highlight": "#c61851",
-    "--better-main": settingsState.selectedColor,
+    "--better-main": selectedColor,
   };
 
   // Mode-based properties, applied if storedSetting is provided
@@ -79,3 +75,29 @@ export function updateAllColors() {
     }
   }
 }
+
+function toSoftGradient(hex: string): string {
+  const base = Color(hex);
+  const analogous = base.rotate(30).lighten(0.25).saturate(0.15);
+  const mid = base.mix(analogous, 0.5).hex();
+  return `linear-gradient(135deg, ${hex} 0%, ${mid} 50%, ${analogous.hex()} 100%)`;
+}
+
+export async function updateAllColors() {
+  let effectiveColor =
+    settingsState.selectedColor !== ""
+      ? settingsState.selectedColor
+      : "#007bff";
+
+  if (settingsState.adaptiveThemeColour) {
+    const adaptiveColor = await getAdaptiveColour();
+    if (adaptiveColor) {
+      effectiveColor =
+        settingsState.adaptiveThemeGradient
+          ? toSoftGradient(adaptiveColor)
+          : adaptiveColor;
+    }
+  }
+
+  applyColorsWith(effectiveColor);
+}