daisyui 4.0.0-alpha.20 → 4.0.0-alpha.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daisyui",
-  "version": "4.0.0-alpha.20",
+  "version": "4.0.0-alpha.21",
   "description": "daisyUI - Tailwind CSS Components",
   "author": "Pouya Saadeghi",
   "license": "MIT",

package/src/theming/functions.js

@@ -142,6 +142,7 @@ module.exports = {
   injectThemes: function (addBase, config, themes) {
     const includedThemesObj = {}
     // add default themes
+    const themeRoot = config("daisyui.themeRoot") ?? ":root"
     Object.entries(themes).forEach(([theme, value]) => {
       includedThemesObj[theme] = this.convertColorFormat(value)
     })
@@ -179,7 +180,7 @@ module.exports = {
     themeOrder.forEach((themeName, index) => {
       if (index === 0) {
         // first theme as root
-        themesToInject[":root"] = includedThemesObj[themeName]
+        themesToInject[themeRoot] = includedThemesObj[themeName]
       } else if (index === 1) {
         // auto dark
         if (config("daisyui.darkTheme")) {
@@ -188,7 +189,7 @@ module.exports = {
             themeOrder.includes(config("daisyui.darkTheme"))
           ) {
             themesToInject["@media (prefers-color-scheme: dark)"] = {
-              [":root"]: includedThemesObj[`${config("daisyui.darkTheme")}`],
+              [themeRoot]: includedThemesObj[`${config("daisyui.darkTheme")}`],
             }
           }
         } else if (config("daisyui.darkTheme") === false) {
@@ -196,7 +197,7 @@ module.exports = {
         } else {
           if (themeOrder[0] !== "dark" && themeOrder.includes("dark")) {
             themesToInject["@media (prefers-color-scheme: dark)"] = {
-              [":root"]: includedThemesObj["dark"],
+              [themeRoot]: includedThemesObj["dark"],
             }
           }
         }
@@ -204,7 +205,9 @@ module.exports = {
         themesToInject[
           "[data-theme=" +
             themeOrder[0] +
-            "], :root:has(input.theme-controller[value=" +
+            "], " +
+            themeRoot +
+            ":has(input.theme-controller[value=" +
             themeOrder[0] +
             "]:checked)"
         ] = includedThemesObj[themeOrder[0]]
@@ -212,7 +215,9 @@ module.exports = {
         themesToInject[
           "[data-theme=" +
             themeOrder[1] +
-            "], :root:has(input.theme-controller[value=" +
+            "], " +
+            themeRoot +
+            ":has(input.theme-controller[value=" +
             themeOrder[1] +
             "]:checked)"
         ] = includedThemesObj[themeOrder[1]]
@@ -220,7 +225,9 @@ module.exports = {
         themesToInject[
           "[data-theme=" +
             themeName +
-            "], :root:has(input.theme-controller[value=" +
+            "], " +
+            themeRoot +
+            ":has(input.theme-controller[value=" +
             themeName +
             "]:checked)"
         ] = includedThemesObj[themeName]