daisyui 4.0.0-alpha.13 → 4.0.0-alpha.14

package/dist/themes.css

@@ -66,7 +66,7 @@
         --bc: 0.7465 0.0216 264.436
     }
 }
-[data-theme=light] {
+[data-theme=light], :root:has(input.theme-controller[value=light]:checked) {
     color-scheme: light;
     --in: 0.7206 0.191 231.6;
     --su: 0.7441 0.213 164.75;
@@ -99,7 +99,7 @@
     --b3: 0.9242 0.0011 197.1376;
     --bc: 0.2781 0.0296 256.848
 }
-[data-theme=dark] {
+[data-theme=dark], :root:has(input.theme-controller[value=dark]:checked) {
     color-scheme: dark;
     --in: 0.7206 0.191 231.6;
     --su: 0.7441 0.213 164.75;
@@ -132,7 +132,7 @@
     --b3: 0.2115 0.0117 254.0879;
     --bc: 0.7465 0.0216 264.436
 }
-[data-theme=cupcake] {
+[data-theme=cupcake], :root:has(input.theme-controller[value=cupcake]:checked) {
     color-scheme: light;
     --in: 0.7206 0.191 231.6;
     --su: 0.7441 0.213 164.75;
@@ -165,7 +165,7 @@
     --tab-border: 2px;
     --tab-radius: .5rem
 }
-[data-theme=bumblebee] {
+[data-theme=bumblebee], :root:has(input.theme-controller[value=bumblebee]:checked) {
     color-scheme: light;
     --b2: 0.93 0 0;
     --b3: 0.86 0 0;
@@ -198,7 +198,7 @@
     --n: 0.2227 0.0462 281.9865;
     --b1: 1 0 0
 }
-[data-theme=emerald] {
+[data-theme=emerald], :root:has(input.theme-controller[value=emerald]:checked) {
     color-scheme: light;
     --b2: 0.93 0 0;
     --b3: 0.86 0 0;
@@ -231,7 +231,7 @@
     --animation-input: 0;
     --btn-focus-scale: 1
 }
-[data-theme=corporate] {
+[data-theme=corporate], :root:has(input.theme-controller[value=corporate]:checked) {
     color-scheme: light;
     --b2: 0.93 0 0;
     --b3: 0.86 0 0;
@@ -264,7 +264,7 @@
     --animation-input: 0;
     --btn-focus-scale: 1
 }
-[data-theme=synthwave] {
+[data-theme=synthwave], :root:has(input.theme-controller[value=synthwave]:checked) {
     color-scheme: dark;
     --b2: 0.2029 0.0762 287.8356;
     --b3: 0.1877 0.0705 287.8356;
@@ -297,7 +297,7 @@
     --er: 0.6143 0.1975 17.8079;
     --erc: 0.9794 0.0082 301.3583
 }
-[data-theme=retro] {
+[data-theme=retro], :root:has(input.theme-controller[value=retro]:checked) {
     color-scheme: light;
     --inc: 0.9092 0.043 262.8809;
     --suc: 0.1254 0.034 149.2138;
@@ -330,7 +330,7 @@
     --rounded-btn: 0.4rem;
     --rounded-badge: 0.4rem
 }
-[data-theme=cyberpunk] {
+[data-theme=cyberpunk], :root:has(input.theme-controller[value=cyberpunk]:checked) {
     color-scheme: light;
     --b2: 0.8677 0.1835 104.3181;
     --b3: 0.8024 0.1697 104.3181;
@@ -364,7 +364,7 @@
     --rounded-badge: 0;
     --tab-radius: 0
 }
-[data-theme=valentine] {
+[data-theme=valentine], :root:has(input.theme-controller[value=valentine]:checked) {
     color-scheme: light;
     --b2: 0.8395 0.0346 336.9552;
     --b3: 0.7763 0.032 336.9552;
@@ -397,7 +397,7 @@
     --er: 0.7307 0.207 27.33;
     --rounded-btn: 1.9rem
 }
-[data-theme=halloween] {
+[data-theme=halloween], :root:has(input.theme-controller[value=halloween]:checked) {
     color-scheme: dark;
     --b2: 0.2304 0 0;
     --b3: 0.2131 0 0;
@@ -430,7 +430,7 @@
     --wa: 0.6658 0.1574 58.3183;
     --er: 0.6572 0.199 27.33
 }
-[data-theme=garden] {
+[data-theme=garden], :root:has(input.theme-controller[value=garden]:checked) {
     color-scheme: light;
     --b2: 0.8645 0.002 17.1974;
     --b3: 0.7994 0.0019 17.1974;
@@ -463,7 +463,7 @@
     --b1: 0.9295 0.0022 17.1974;
     --bc: 0.1696 0.0017 17.3207
 }
-[data-theme=forest] {
+[data-theme=forest], :root:has(input.theme-controller[value=forest]:checked) {
     color-scheme: dark;
     --b2: 0.1752 0.0077 17.9116;
     --b3: 0.162 0.0071 17.9116;
@@ -496,7 +496,7 @@
     --b1: 0.1884 0.0083 17.9116;
     --rounded-btn: 1.9rem
 }
-[data-theme=aqua] {
+[data-theme=aqua], :root:has(input.theme-controller[value=aqua]:checked) {
     color-scheme: dark;
     --b2: 0.4535 0.1186 261.1817;
     --b3: 0.4193 0.1097 261.1817;
@@ -529,7 +529,7 @@
     --wa: 0.6658 0.1574 58.3183;
     --er: 0.7395 0.19 27.33
 }
-[data-theme=lofi] {
+[data-theme=lofi], :root:has(input.theme-controller[value=lofi]:checked) {
     color-scheme: light;
     --inc: 0.1591 0.0206 205.9;
     --suc: 0.1803 0.0306 164.14;
@@ -562,7 +562,7 @@
     --btn-focus-scale: 1;
     --tab-radius: 0
 }
-[data-theme=pastel] {
+[data-theme=pastel], :root:has(input.theme-controller[value=pastel]:checked) {
     color-scheme: light;
     --in: 0.7206 0.191 231.6;
     --su: 0.7441 0.213 164.75;
@@ -595,7 +595,7 @@
     --b3: 0.8717 0.0093 258.3382;
     --rounded-btn: 1.9rem
 }
-[data-theme=fantasy] {
+[data-theme=fantasy], :root:has(input.theme-controller[value=fantasy]:checked) {
     color-scheme: light;
     --b2: 0.93 0 0;
     --b3: 0.86 0 0;
@@ -628,7 +628,7 @@
     --b1: 1 0 0;
     --bc: 0.2781 0.0296 256.848
 }
-[data-theme=wireframe] {
+[data-theme=wireframe], :root:has(input.theme-controller[value=wireframe]:checked) {
     color-scheme: light;
     --bc: 0.2 0 0;
     --pc: 0.1565 0 0;
@@ -662,7 +662,7 @@
     --rounded-badge: 0.2rem;
     --tab-radius: 0.2rem
 }
-[data-theme=black] {
+[data-theme=black], :root:has(input.theme-controller[value=black]:checked) {
     color-scheme: dark;
     --bc: 0.8 0 0;
     --pc: 0.8638 0.0006 17.3055;
@@ -695,7 +695,7 @@
     --btn-focus-scale: 1;
     --tab-radius: 0
 }
-[data-theme=luxury] {
+[data-theme=luxury], :root:has(input.theme-controller[value=luxury]:checked) {
     color-scheme: dark;
     --pc: 0.2 0 0;
     --sc: 0.8552 0.0128 261.0691;
@@ -728,7 +728,7 @@
     --wa: 0.8613 0.1365 102.8912;
     --er: 0.7175 0.1764 22.5689
 }
-[data-theme=dracula] {
+[data-theme=dracula], :root:has(input.theme-controller[value=dracula]:checked) {
     color-scheme: dark;
     --b2: 0.2681 0.0206 277.5087;
     --b3: 0.2479 0.019 277.5087;
@@ -761,7 +761,7 @@
     --wa: 0.9553 0.1342 112.7571;
     --er: 0.6822 0.2063 24.431
 }
-[data-theme=cmyk] {
+[data-theme=cmyk], :root:has(input.theme-controller[value=cmyk]:checked) {
     color-scheme: light;
     --b2: 0.93 0 0;
     --b3: 0.86 0 0;
@@ -794,7 +794,7 @@
     --wa: 0.7124 0.1598 52.0234;
     --er: 0.6201 0.2084 28.7175
 }
-[data-theme=autumn] {
+[data-theme=autumn], :root:has(input.theme-controller[value=autumn]:checked) {
     color-scheme: light;
     --b2: 0.8911 0 0;
     --b3: 0.824 0 0;
@@ -827,7 +827,7 @@
     --wa: 0.7008 0.1649 56.8443;
     --er: 0.5307 0.241 24.16
 }
-[data-theme=business] {
+[data-theme=business], :root:has(input.theme-controller[value=business]:checked) {
     color-scheme: dark;
     --b2: 0.2265 0 0;
     --b3: 0.2094 0 0;
@@ -860,7 +860,7 @@
     --rounded-btn: .125rem;
     --rounded-badge: .125rem
 }
-[data-theme=acid] {
+[data-theme=acid], :root:has(input.theme-controller[value=acid]:checked) {
     color-scheme: light;
     --b2: 0.9161 0 0;
     --b3: 0.8472 0 0;
@@ -893,7 +893,7 @@
     --rounded-btn: 1rem;
     --rounded-badge: 1rem
 }
-[data-theme=lemonade] {
+[data-theme=lemonade], :root:has(input.theme-controller[value=lemonade]:checked) {
     color-scheme: light;
     --b2: 0.93 0 0;
     --b3: 0.86 0 0;
@@ -926,7 +926,7 @@
     --wa: 0.9169 0.1145 98.5167;
     --er: 0.8309 0.07 19.7656
 }
-[data-theme=night] {
+[data-theme=night], :root:has(input.theme-controller[value=night]:checked) {
     color-scheme: dark;
     --b2: 0.1931 0.037 265.7549;
     --b3: 0.1786 0.0342 265.7549;
@@ -959,7 +959,7 @@
     --wa: 0.8324 0.1396 82.95;
     --er: 0.7179 0.1703 13.1183
 }
-[data-theme=coffee] {
+[data-theme=coffee], :root:has(input.theme-controller[value=coffee]:checked) {
     color-scheme: dark;
     --b2: 0.2016 0.0215 329.7086;
     --b3: 0.1864 0.0198 329.7086;
@@ -992,7 +992,7 @@
     --wa: 0.8815 0.1408 87.7224;
     --er: 0.7732 0.1282 31.8719
 }
-[data-theme=winter] {
+[data-theme=winter], :root:has(input.theme-controller[value=winter]:checked) {
     color-scheme: light;
     --pc: 0.1206 0.0435 257.5746;
     --sc: 0.8851 0.0322 282.3394;

package/package.json

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

package/src/theming/functions.js

@@ -169,7 +169,7 @@ module.exports = {
       config("daisyui.themes").forEach((item) => {
         if (typeof item === "object" && item !== null) {
           Object.entries(item).forEach(([customThemeName, customThemevalue]) => {
-            includedThemesObj["[data-theme=" + customThemeName + "]"] = this.convertColorFormat(
+            includedThemesObj[customThemeName] = this.convertColorFormat(
               customThemevalue,
               colorSpace
             )
@@ -185,7 +185,7 @@ module.exports = {
           Object.keys(theme).forEach((customThemeName) => {
             themeOrder.push(customThemeName)
           })
-        } else if (Object.hasOwn(includedThemesObj, "[data-theme=" + theme + "]")) {
+        } else if (Object.hasOwn(includedThemesObj, theme)) {
           themeOrder.push(theme)
         }
       })
@@ -200,7 +200,7 @@ module.exports = {
     themeOrder.forEach((themeName, index) => {
       if (index === 0) {
         // first theme as root
-        themesToInject[":root"] = includedThemesObj["[data-theme=" + themeName + "]"]
+        themesToInject[":root"] = includedThemesObj[themeName]
       } else if (index === 1) {
         // auto dark
         if (config("daisyui.darkTheme")) {
@@ -209,7 +209,7 @@ module.exports = {
             themeOrder.includes(config("daisyui.darkTheme"))
           ) {
             themesToInject["@media (prefers-color-scheme: dark)"] = {
-              [":root"]: includedThemesObj[`[data-theme=${config("daisyui.darkTheme")}]`],
+              [":root"]: includedThemesObj[`${config("daisyui.darkTheme")}`],
             }
           }
         } else if (config("daisyui.darkTheme") === false) {
@@ -217,19 +217,34 @@ module.exports = {
         } else {
           if (themeOrder[0] !== "dark" && themeOrder.includes("dark")) {
             themesToInject["@media (prefers-color-scheme: dark)"] = {
-              [":root"]: includedThemesObj["[data-theme=dark]"],
+              [":root"]: includedThemesObj["dark"],
             }
           }
         }
         // theme 0 with name
-        themesToInject["[data-theme=" + themeOrder[0] + "]"] =
-          includedThemesObj["[data-theme=" + themeOrder[0] + "]"]
+        themesToInject[
+          "[data-theme=" +
+            themeOrder[0] +
+            "], :root:has(input.theme-controller[value=" +
+            themeOrder[0] +
+            "]:checked)"
+        ] = includedThemesObj[themeOrder[0]]
         // theme 1 with name
-        themesToInject["[data-theme=" + themeOrder[1] + "]"] =
-          includedThemesObj["[data-theme=" + themeOrder[1] + "]"]
+        themesToInject[
+          "[data-theme=" +
+            themeOrder[1] +
+            "], :root:has(input.theme-controller[value=" +
+            themeOrder[1] +
+            "]:checked)"
+        ] = includedThemesObj[themeOrder[1]]
       } else {
-        themesToInject["[data-theme=" + themeName + "]"] =
-          includedThemesObj["[data-theme=" + themeName + "]"]
+        themesToInject[
+          "[data-theme=" +
+            themeName +
+            "], :root:has(input.theme-controller[value=" +
+            themeName +
+            "]:checked)"
+        ] = includedThemesObj[themeName]
       }
     })
 

package/src/theming/themes.d.ts

@@ -1,5 +1,5 @@
 import { CustomTheme, Theme } from "../index"
 
-declare const themes: Record<`[data-theme=${Theme}]`, CustomTheme[string]>
+declare const themes: Record<`${Theme}`, CustomTheme[string]>
 
 export default themes

package/src/theming/themes.js

@@ -1,5 +1,5 @@
 module.exports = {
-  "[data-theme=aqua]": {
+  aqua: {
     "color-scheme": "dark",
     "primary": "#09ecf3",
     "primary-content": "#005355",
@@ -12,7 +12,7 @@ module.exports = {
     "warning": "#d97706",
     "error": "oklch(73.95% 0.19 27.33)",
   },
-  "[data-theme=black]": {
+  black: {
     "color-scheme": "dark",
     "primary": "#343232",
     "secondary": "#343232",
@@ -33,7 +33,7 @@ module.exports = {
     "--btn-focus-scale": "1",
     "--tab-radius": "0",
   },
-  "[data-theme=bumblebee]": {
+  bumblebee: {
     "color-scheme": "light",
     "primary": "#f9d72f",
     "primary-content": "#181830",
@@ -43,7 +43,7 @@ module.exports = {
     "neutral": "#181830",
     "base-100": "#ffffff",
   },
-  "[data-theme=cmyk]": {
+  cmyk: {
     "color-scheme": "light",
     "primary": "#45AEEE",
     "secondary": "#E8488A",
@@ -55,7 +55,7 @@ module.exports = {
     "warning": "#EE8133",
     "error": "#E93F33",
   },
-  "[data-theme=corporate]": {
+  corporate: {
     "color-scheme": "light",
     "primary": "#4b6bfb",
     "secondary": "#7b92b2",
@@ -71,7 +71,7 @@ module.exports = {
     "--animation-input": "0",
     "--btn-focus-scale": "1",
   },
-  "[data-theme=cupcake]": {
+  cupcake: {
     "color-scheme": "light",
     "primary": "#65c3c8",
     "secondary": "#ef9fbc",
@@ -85,7 +85,7 @@ module.exports = {
     "--tab-border": "2px",
     "--tab-radius": ".5rem",
   },
-  "[data-theme=cyberpunk]": {
+  cyberpunk: {
     "color-scheme": "light",
     "fontFamily":
       "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
@@ -100,7 +100,7 @@ module.exports = {
     "--rounded-badge": "0",
     "--tab-radius": "0",
   },
-  "[data-theme=dark]": {
+  dark: {
     "color-scheme": "dark",
     "primary": "oklch(49.12% 0.3096 275.75)",
     "secondary": "oklch(69.71% 0.329 342.55)",
@@ -112,7 +112,7 @@ module.exports = {
     "base-300": "#15191e",
     "base-content": "#A6ADBB",
   },
-  "[data-theme=dracula]": {
+  dracula: {
     "color-scheme": "dark",
     "primary": "#ff79c6",
     "secondary": "#bd93f9",
@@ -125,7 +125,7 @@ module.exports = {
     "warning": "#f1fa8c",
     "error": "#ff5555",
   },
-  "[data-theme=emerald]": {
+  emerald: {
     "color-scheme": "light",
     "primary": "#66cc8a",
     "primary-content": "#223D30",
@@ -141,7 +141,7 @@ module.exports = {
     "--animation-input": "0",
     "--btn-focus-scale": "1",
   },
-  "[data-theme=fantasy]": {
+  fantasy: {
     "color-scheme": "light",
     "primary": "#6e0b75",
     "secondary": "#007ebd",
@@ -150,7 +150,7 @@ module.exports = {
     "base-100": "#ffffff",
     "base-content": "#1f2937",
   },
-  "[data-theme=forest]": {
+  forest: {
     "color-scheme": "dark",
     "primary": "#1eb854",
     "primary-content": "#000000",
@@ -160,7 +160,7 @@ module.exports = {
     "base-100": "#171212",
     "--rounded-btn": "1.9rem",
   },
-  "[data-theme=garden]": {
+  garden: {
     "color-scheme": "light",
     "primary": "#F40076",
     "secondary": "#8E4162",
@@ -170,7 +170,7 @@ module.exports = {
     "base-100": "#e9e7e7",
     "base-content": "#100f0f",
   },
-  "[data-theme=halloween]": {
+  halloween: {
     "color-scheme": "dark",
     "primary": "oklch(77.48% 0.204 60.62)",
     "primary-content": "#131616",
@@ -184,7 +184,7 @@ module.exports = {
     "warning": "#d97706",
     "error": "oklch(65.72% 0.199 27.33)",
   },
-  "[data-theme=light]": {
+  light: {
     "color-scheme": "light",
     "primary": "oklch(49.12% 0.3096 275.75)",
     "secondary": "oklch(69.71% 0.329 342.55)",
@@ -196,7 +196,7 @@ module.exports = {
     "base-300": "#E5E6E6",
     "base-content": "#1f2937",
   },
-  "[data-theme=lofi]": {
+  lofi: {
     "color-scheme": "light",
     "primary": "#0D0D0D",
     "primary-content": "#ffffff",
@@ -222,7 +222,7 @@ module.exports = {
     "--btn-focus-scale": "1",
     "--tab-radius": "0",
   },
-  "[data-theme=luxury]": {
+  luxury: {
     "color-scheme": "dark",
     "primary": "#ffffff",
     "secondary": "#152747",
@@ -238,7 +238,7 @@ module.exports = {
     "warning": "#e2d562",
     "error": "#ff6f6f",
   },
-  "[data-theme=pastel]": {
+  pastel: {
     "color-scheme": "light",
     "primary": "#d1c1d7",
     "secondary": "#f6cbd1",
@@ -249,7 +249,7 @@ module.exports = {
     "base-300": "#d1d5db",
     "--rounded-btn": "1.9rem",
   },
-  "[data-theme=retro]": {
+  retro: {
     "color-scheme": "light",
     "primary": "#ef9995",
     "primary-content": "#282425",
@@ -271,7 +271,7 @@ module.exports = {
     "--rounded-btn": "0.4rem",
     "--rounded-badge": "0.4rem",
   },
-  "[data-theme=synthwave]": {
+  synthwave: {
     "color-scheme": "dark",
     "primary": "#e779c1",
     "secondary": "#58c7f3",
@@ -289,7 +289,7 @@ module.exports = {
     "error": "#e24056",
     "error-content": "#f9f7fd",
   },
-  "[data-theme=valentine]": {
+  valentine: {
     "color-scheme": "light",
     "primary": "#e96d7b",
     "secondary": "#a991f7",
@@ -304,7 +304,7 @@ module.exports = {
     "error": "oklch(73.07% 0.207 27.33)",
     "--rounded-btn": "1.9rem",
   },
-  "[data-theme=wireframe]": {
+  wireframe: {
     "color-scheme": "light",
     "fontFamily": "Chalkboard,comic sans ms,'sans-serif'",
     "primary": "#b8b8b8",
@@ -323,7 +323,7 @@ module.exports = {
     "--rounded-badge": "0.2rem",
     "--tab-radius": "0.2rem",
   },
-  "[data-theme=autumn]": {
+  autumn: {
     "color-scheme": "light",
     "primary": "#8C0327",
     "secondary": "#D85251",
@@ -335,7 +335,7 @@ module.exports = {
     "warning": "#E97F14",
     "error": "oklch(53.07% 0.241 24.16)",
   },
-  "[data-theme=business]": {
+  business: {
     "color-scheme": "dark",
     "primary": "#1C4E80",
     "secondary": "#7C909A",
@@ -350,7 +350,7 @@ module.exports = {
     "--rounded-btn": ".125rem",
     "--rounded-badge": ".125rem",
   },
-  "[data-theme=acid]": {
+  acid: {
     "color-scheme": "light",
     "primary": "oklch(71.9% 0.357 330.7595734057481)",
     "secondary": "oklch(73.37% 0.224 48.25087840015526)",
@@ -365,7 +365,7 @@ module.exports = {
     "--rounded-btn": "1rem",
     "--rounded-badge": "1rem",
   },
-  "[data-theme=lemonade]": {
+  lemonade: {
     "color-scheme": "light",
     "primary": "#519903",
     "secondary": "#E9E92E",
@@ -377,7 +377,7 @@ module.exports = {
     "warning": "#F7E589",
     "error": "#F2B6B5",
   },
-  "[data-theme=night]": {
+  night: {
     "color-scheme": "dark",
     "primary": "#38bdf8",
     "secondary": "#818CF8",
@@ -390,7 +390,7 @@ module.exports = {
     "warning": "#F4BF50",
     "error": "#FB7085",
   },
-  "[data-theme=coffee]": {
+  coffee: {
     "color-scheme": "dark",
     "primary": "#DB924B",
     "secondary": "#263E3F",
@@ -403,7 +403,7 @@ module.exports = {
     "warning": "#FFD25F",
     "error": "#FC9581",
   },
-  "[data-theme=winter]": {
+  winter: {
     "color-scheme": "light",
     "primary": "#047AFF",
     "secondary": "#463AA2",