From 2a8b566839a0f1ed8716eb82d78a77f192701ccc Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 14 Mar 2024 10:22:41 +0000
Subject: [PATCH] add theme variables to head

---
 packages/modal-ui/src/utils/ThemeUtil.ts | 26 ++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/modal-ui/src/utils/ThemeUtil.ts b/packages/modal-ui/src/utils/ThemeUtil.ts
index abb164d..9ec8911 100644
--- a/packages/modal-ui/src/utils/ThemeUtil.ts
+++ b/packages/modal-ui/src/utils/ThemeUtil.ts
@@ -91,18 +91,28 @@ export const ThemeUtil = {
   },
 
   setTheme() {
-    const root: HTMLElement | null = document.querySelector(':root')
+    const headTag = document.getElementsByTagName('head')[0]
+    const styleTag = document.createElement('style')
+
     const { themeVariables } = ThemeCtrl.state
 
-    if (root) {
-      const variables = {
-        ...themeModeVariables(),
-        ...themeVariablesPresets(),
-        ...themeVariables
-      }
+    const variables = {
+      ...themeModeVariables(),
+      ...themeVariablesPresets(),
+      ...themeVariables
+    }
 
-      Object.entries(variables).forEach(([key, val]) => root.style.setProperty(key, val))
+    const styleValues = Object.entries(variables)
+      .map(([key, val]) => `${key}: ${val};`)
+      .join('\n')
+
+    styleTag.innerHTML = `
+    :root {
+      ${styleValues}
     }
+    `
+
+    headTag.appendChild(styleTag)
   },
 
   globalCss: css`