From e47d5c52ffc4f7eb673edbb958ed87574346e7d4 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@getsession.org>
Date: Fri, 20 Feb 2026 17:22:26 +1100
Subject: [PATCH] chore: make the css vars be a root instead of html style
 itself

---
 ts/themes/globals.tsx            | 29 +++++++++++++++++++++++++----
 ts/themes/switchPrimaryColor.tsx |  3 ++-
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx
index 060785ae5c..53895a0bb9 100644
--- a/ts/themes/globals.tsx
+++ b/ts/themes/globals.tsx
@@ -179,14 +179,35 @@ export function getThemeValue(key: ThemeKeys) {
   return getComputedStyle(document.documentElement).getPropertyValue(key);
 }
 
+let themeStyleEl: HTMLStyleElement | null = null;
+const themeVariables = new Map<string, string>();
+
+function getOrCreateThemeStyleEl(): HTMLStyleElement {
+  if (!themeStyleEl) {
+    themeStyleEl = document.createElement('style');
+    themeStyleEl.id = 'session-theme-variables';
+    document.head.appendChild(themeStyleEl);
+  }
+  return themeStyleEl;
+}
+
+function rebuildThemeStyleEl() {
+  const el = getOrCreateThemeStyleEl();
+  const declarations = [...themeVariables.entries()].map(([k, v]) => `  ${k}: ${v};`).join('\n');
+  el.textContent = `:root {\n${declarations}\n}`;
+}
+
 export function setThemeValues(variables: Theme) {
   // eslint-disable-next-line no-restricted-syntax
   for (const [key, value] of Object.entries(variables)) {
-    document.documentElement.style.setProperty(
-      key,
-      typeof value === 'string' ? value : value.toString()
-    );
+    themeVariables.set(key, typeof value === 'string' ? value : value.toString());
   }
+  rebuildThemeStyleEl();
+}
+
+export function setSingleThemeValue(key: ThemeKeys, value: string) {
+  themeVariables.set(key, value);
+  rebuildThemeStyleEl();
 }
 
 // These are only set once in the global style (at root).
diff --git a/ts/themes/switchPrimaryColor.tsx b/ts/themes/switchPrimaryColor.tsx
index ca583739cc..241307c4ce 100644
--- a/ts/themes/switchPrimaryColor.tsx
+++ b/ts/themes/switchPrimaryColor.tsx
@@ -2,6 +2,7 @@ import { Dispatch } from '@reduxjs/toolkit';
 import { find } from 'lodash';
 import { applyPrimaryColor } from '../state/ducks/primaryColor';
 import { COLORS, ColorsType, getPrimaryColors, PrimaryColorStateType } from './constants/colors';
+import { setSingleThemeValue } from './globals';
 
 export function findPrimaryColorId(hexCode: string): PrimaryColorStateType | undefined {
   const primaryColors = getPrimaryColors();
@@ -13,7 +14,7 @@ export async function switchPrimaryColorTo(color: PrimaryColorStateType, dispatc
     await window.Events.setPrimaryColorSetting(color);
   }
 
-  document.documentElement.style.setProperty(
+  setSingleThemeValue(
     '--primary-color',
     COLORS.PRIMARY[`${color.toUpperCase() as keyof ColorsType['PRIMARY']}`]
   );