From a0aa466e156fbf948d0c783f29d2688f97c90827 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 3 Sep 2024 15:58:52 +0200
Subject: [PATCH 1/2] Move css vars from body style tag to separate style node

---
 v2/pink-sb/src/lib/Root.svelte | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/v2/pink-sb/src/lib/Root.svelte b/v2/pink-sb/src/lib/Root.svelte
index c4084cc377..c6d8d241ae 100644
--- a/v2/pink-sb/src/lib/Root.svelte
+++ b/v2/pink-sb/src/lib/Root.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
     export let theme: Record<string, string>;
 
-    $: Object.keys(theme).forEach((key) => {
-        document.documentElement.style.setProperty(`--${key}`, theme[key]);
-    });
+    $: {
+        const cssVariables = Object.keys(theme)
+            .map((key) => `--${key}: ${theme[key]};`)
+            .join(' ');
+        const styleElement = document.createElement('style');
+        document.head.prepend(styleElement);
+        styleElement.textContent = `:root {${cssVariables}}`;
+    }
 </script>
 
 <svelte:head>

From 25b5173e9f9a2e04a596fc4a0bfa448f02159ea7 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 3 Sep 2024 16:33:49 +0200
Subject: [PATCH 2/2] Ensure style element doesn't gets re-added every trigger

---
 v2/pink-sb/src/lib/Root.svelte | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/v2/pink-sb/src/lib/Root.svelte b/v2/pink-sb/src/lib/Root.svelte
index c6d8d241ae..6eb43860ef 100644
--- a/v2/pink-sb/src/lib/Root.svelte
+++ b/v2/pink-sb/src/lib/Root.svelte
@@ -1,17 +1,13 @@
 <script lang="ts">
     export let theme: Record<string, string>;
 
-    $: {
-        const cssVariables = Object.keys(theme)
-            .map((key) => `--${key}: ${theme[key]};`)
-            .join(' ');
-        const styleElement = document.createElement('style');
-        document.head.prepend(styleElement);
-        styleElement.textContent = `:root {${cssVariables}}`;
-    }
+    $: cssVariables = Object.keys(theme)
+        .map((key) => `--${key}: ${theme[key]};`)
+        .join(' ');
 </script>
 
 <svelte:head>
+    {@html `<style>:root {${cssVariables}}</style>`}
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
     <link