fix: theme provider to inject theme in head (#5435)

matthprost · lisalupi · commit ce6c0f416472 · 2025-08-28T14:42:50.000+02:00
diff --git a/.changeset/neat-regions-repair.md b/.changeset/neat-regions-repair.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<ThemeProvider />` to inject theme variable in the `<head>` of the page
diff --git a/packages/ui/src/theme/ThemeProvider.tsx b/packages/ui/src/theme/ThemeProvider.tsx
@@ -3,7 +3,7 @@
 import { consoleLightTheme, theme as themeContract } from '@ultraviolet/themes'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type { ReactNode } from 'react'
-import { createContext, useContext } from 'react'
+import { createContext, useContext, useEffect } from 'react'
 
 const ThemeContext = createContext(consoleLightTheme)
 
@@ -31,14 +31,37 @@ type ThemeProviderProps = {
 }
 
 /**
- * ThemeProvider will apply generated global CSS variables to the application.
+ * ThemeProvider will apply generated global CSS variables to the application in the `<head>`.
  * If no theme is provided, it will default to `lightTheme`.
  */
 export const ThemeProvider = ({
   children,
   theme = consoleLightTheme,
-}: ThemeProviderProps) => (
-  <ThemeContext.Provider value={theme}>
-    <div style={assignInlineVars(themeContract, theme)}>{children}</div>
-  </ThemeContext.Provider>
-)
+}: ThemeProviderProps) => {
+  useEffect(() => {
+    const styleId = 'uv-theme'
+    const existingStyle = document.getElementById(styleId)
+    const cssVars = assignInlineVars(themeContract, theme)
+    const cssString = `:root { ${Object.entries(cssVars)
+      .map(([key, value]) => `${key}: ${value};`)
+      .join(' ')} }`
+
+    if (existingStyle) {
+      existingStyle.textContent = cssString
+    } else {
+      const style = document.createElement('style')
+      style.id = styleId
+      style.textContent = cssString
+      document.head.appendChild(style)
+    }
+
+    return () => {
+      const style = document.getElementById(styleId)
+      if (style) {
+        style.remove()
+      }
+    }
+  }, [theme])
+
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@ultraviolet/ui": patch
 +---
++
 +Fix `<ThemeProvider />` to inject theme variable in the `<head>` of the page