diff --git a/src/css/injected.scss b/src/css/injected.scss
index 261552c2..9c5fe51c 100644
--- a/src/css/injected.scss
+++ b/src/css/injected.scss
@@ -1,3 +1,4 @@
+
 @use "sass:meta";
 @import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600,700");
 
@@ -2609,7 +2610,7 @@ body {
 
 [class*="MessageList__unread___"] {
   position: relative;
-  background: rgb(228 225 225);
+  background: var(--background-secondary, rgb(228 225 225));
 }
 
 .dark [class*="MessageList__unread___"] {
@@ -2735,7 +2736,7 @@ body {
 [class*="MessageList__MessageList___"]
   > ol
   > li[class*="MessageList__selected___"] {
-  background: rgb(228 225 225);
+  background: var(--background-secondary, rgb(228 225 225));
   color: var(--text-primary);
   box-shadow: none !important;
   position: relative;
diff --git a/src/seqta/ui/colors/Manager.ts b/src/seqta/ui/colors/Manager.ts
index 2adccfbf..71740da9 100644
--- a/src/seqta/ui/colors/Manager.ts
+++ b/src/seqta/ui/colors/Manager.ts
@@ -165,6 +165,17 @@ function applyColorsWith(selectedColor: string) {
     }
   }
 
+  // Let themes opt-in to overriding only adaptive accent output.
+  // A theme can define `--adaptive-better-main` from adaptive channel bindings.
+  if (settingsState.selectedTheme && settingsState.adaptiveThemeColour) {
+    const adaptiveOverride = getComputedStyle(document.documentElement)
+      .getPropertyValue("--adaptive-better-main")
+      .trim();
+    if (adaptiveOverride) {
+      setCSSVar("--better-main", adaptiveOverride);
+    }
+  }
+
   let alliframes = document.getElementsByTagName("iframe");
 
   for (let i = 0; i < alliframes.length; i++) {