Add themeSelector for shadow root use cases (#2354)

saadeghi · Nov 12, 2023 · 2fa4273 · 2fa4273
1 parent 6eda4e4
commit 2fa4273
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/docs/src/routes/(docs)/docs/config/+page.svelte.md b/src/docs/src/routes/(docs)/docs/config/+page.svelte.md
@@ -28,6 +28,7 @@ module.exports = {
     rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
     prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
     logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+    themeSelector: ":root", // Which element to attach the theming variables to.
   },
 
   //...
@@ -92,3 +93,10 @@ module.exports = {
   <Translate text="If you're using a second CSS library that has similar class names, you can use this config to avoid conflicts." />
   <Translate text="Utility classes like color names (e.g. <code>bg-primary</code>) or border-radius (e.g. <code>rounded-box</code>) will not be affected by this config because they're being added as extensions to Tailwind CSS classes." />  
   <Translate text="If you use daisyUI <code>prefix</code> option (like <code>daisy-</code>) and Tailwind CSS <code>prefix</code> option (like <code>tw-</code>) together, classnames will be prefixed like this: <code>tw-daisy-btn</code>." />
+
+- ### themeSelector
+
+  `String (default: ":root")`
+
+  <Translate text="Which element to attach the theming variables to." />
+  <Translate text="In certain situations (such as when embedding daisyUI in a shadow root) it may be useful to set this to e.g. <code>*</code>, so all components have access to the CSS variables required." />
diff --git a/src/theming/functions.js b/src/theming/functions.js
@@ -176,6 +176,7 @@ module.exports = {
   },
 
   injectThemes: function (addBase, config, themes, colorFunction) {
+    const themeSelector = config("daisyui.themeSelector") ?? ":root";
     const includedThemesObj = {}
     // includedThemesObj["@supports (not(color: lch(0 0 0)))"] = {}
     // add default themes
@@ -222,7 +223,7 @@ module.exports = {
     themeOrder.forEach((themeName, index) => {
       if (index === 0) {
         // first theme as root
-        themesToInject[":root"] = includedThemesObj["[data-theme=" + themeName + "]"]
+        themesToInject[themeSelector] = includedThemesObj["[data-theme=" + themeName + "]"]
       } else if (index === 1) {
         // auto dark
         if (config("daisyui.darkTheme")) {
@@ -231,15 +232,15 @@ module.exports = {
             themeOrder.includes(config("daisyui.darkTheme"))
           ) {
             themesToInject["@media (prefers-color-scheme: dark)"] = {
-              [":root"]: includedThemesObj[`[data-theme=${config("daisyui.darkTheme")}]`],
+              [themeSelector]: includedThemesObj[`[data-theme=${config("daisyui.darkTheme")}]`],
             }
           }
         } else if (config("daisyui.darkTheme") === false) {
           // disables prefers-color-scheme: dark
         } else {
           if (themeOrder[0] !== "dark" && themeOrder.includes("dark")) {
             themesToInject["@media (prefers-color-scheme: dark)"] = {
-              [":root"]: includedThemesObj["[data-theme=dark]"],
+              [themeSelector]: includedThemesObj["[data-theme=dark]"],
             }
           }
         }