From 545fe70126e85b2740421a46156ebcf29ad81040 Mon Sep 17 00:00:00 2001
From: Pouya Saadeghi <pouya.saadeghi@gmail.com>
Date: Wed, 26 May 2021 06:18:28 +0430
Subject: [PATCH] feat: change default theme from config

---
 colors/index.js                    |  6 +--
 colors/windi.js                    |  2 +-
 index.js                           | 85 +++++++++++++++++++++++++-----
 src/components/styled/avatar.css   |  4 +-
 src/components/styled/button.css   | 18 +++----
 src/components/styled/checkbox.css |  8 +--
 src/components/styled/drawer.css   | 16 +++---
 src/components/styled/input.css    | 16 +++---
 src/components/styled/radio.css    |  8 +--
 src/components/styled/select.css   | 16 +++---
 src/components/styled/tab.css      | 14 ++---
 src/components/styled/textarea.css |  2 +-
 src/components/styled/toggle.css   |  8 +--
 src/components/styled/tooltip.css  | 32 +++++------
 src/themes/dark.css                | 24 ---------
 src/themes/lofi.css                |  6 ---
 src/themes/wireframe.css           |  6 ---
 17 files changed, 146 insertions(+), 125 deletions(-)

diff --git a/colors/index.js b/colors/index.js
index c594a0e81dc..b9ed20f1eaf 100644
--- a/colors/index.js
+++ b/colors/index.js
@@ -8,12 +8,12 @@ let colorObject = {
 for (const [key, item] of Object.entries(colorValues)) {
   colorObject[key] = ({ opacityVariable, opacityValue }) => {
     if (opacityValue !== undefined) {
-      return `hsla(var(--`+ item['name'] +`, `+ item['value'] +`) / ${opacityValue})`
+      return `hsla(var(--`+ item['name'] +`) / ${opacityValue})`
     }
     if (opacityVariable !== undefined) {
-      return `hsla(var(--`+ item['name'] +`, `+ item['value'] +`) / var(${opacityVariable}, 1))`
+      return `hsla(var(--`+ item['name'] +`) / var(${opacityVariable}, 1))`
     }
-    return `hsl(var(--`+ item['name'] +`, `+ item['value']+ `))`
+    return `hsl(var(--`+ item['name'] +`))`
   }
 }
 
diff --git a/colors/windi.js b/colors/windi.js
index ef31c8e0cc5..4485087b12a 100644
--- a/colors/windi.js
+++ b/colors/windi.js
@@ -6,7 +6,7 @@ let colorObject = {
 }
 
 for (const [key, item] of Object.entries(colorValues)) {
-  colorObject[key] = `hsla(var(--${item.name}, ${item.value}) / var(--tw-bg-opacity, 1))`
+  colorObject[key] = `hsla(var(--${item.name}) / var(--tw-bg-opacity, 1))`
 }
 
 module.exports = colorObject
diff --git a/index.js b/index.js
index f365e8812f5..2cdb2acdcbf 100644
--- a/index.js
+++ b/index.js
@@ -6,7 +6,6 @@ const styled = require("./dist/styled")
 const styledRtl = require("./dist/styled.rtl")
 const colors = require("./colors/index")
 const resets_general = require('./dist/resets/general')
-const themes = require("./dist/themes")
 
 const utilities_borderRadius = require('./dist/utilities/borderRadius')
 const utilities_fontSize = require('./dist/utilities/fontSize')
@@ -56,18 +55,76 @@ const mainFunction = ({ addBase, addComponents, addUtilities, config }) => {
   }
 
   // inject themes
-  if (Array.isArray( config('daisyui.themes') )) {
-    let diasyuiIncludedThemes = []
-    config('daisyui.themes').forEach(theme => {
-      addComponents(require("./dist/themes/"+theme))
-      diasyuiIncludedThemes.push(theme)
+  let includedThemesObj = new Object()
+  let themesArray = [
+    'light',
+    'dark',
+    'cupcake',
+    'bumblebee',
+    'emerald',
+    'corporate',
+    'synthwave',
+    'retro',
+    'cyberpunk',
+    'valentine',
+    'halloween',
+    'garden',
+    'forest',
+    'aqua',
+    'lofi',
+    'pastel',
+    'fantasy',
+    'wireframe',
+    'black',
+    'luxury',
+    'dracula',
+  ]
+  let ValidThemes = themesArray
+
+  if (config('daisyui.themes') != false) {
+    if (Array.isArray( config('daisyui.themes') )) {
+      themesArray = config('daisyui.themes')
+    }
+    // if (themesArray.includes("dark")) {
+    //   console.log(themesArray)
+    //   themesArray = ['dark', ...themesArray.filter(item => item !== 'dark')]
+    //   console.log(themesArray)
+    // }
+    
+    themesArray.forEach((theme, index) => {
+      try {
+        if (index === 0) { // first theme as default
+          includedThemesObj[':root'] = require("./dist/themes/"+theme)['[data-theme='+theme+']']
+        }else if (index === 1) {
+          if (themesArray[0] !== 'dark') {
+            // auto dark
+            includedThemesObj['@media (prefers-color-scheme: dark)'] = {':root': require("./dist/themes/dark")['[data-theme=dark]']}
+          }
+          // first theme with name
+          includedThemesObj['[data-theme='+themesArray[0]+']'] = require("./dist/themes/"+themesArray[0])['[data-theme='+themesArray[0]+']']
+          includedThemesObj['[data-theme='+theme+']'] = require("./dist/themes/"+theme)['[data-theme='+theme+']']
+        }else{
+          // the rest
+          includedThemesObj['[data-theme='+theme+']'] = require("./dist/themes/"+theme)['[data-theme='+theme+']']
+        }
+
+
+
+      }
+      catch (e) {
+        console.log(`\n\n\x1b[33;1m! warning\x1b[0m - Invalid theme name in \x1b[34mtailwind.config.js\x1b[0m: \x1b[31m'${theme}'\x1b[0m`)
+        console.log(`Only these theme names are valid:`)
+        console.log(ValidThemes)
+        console.log(`\n\n`)
+      }
+
     });
-    diasyuiIncludedItems.push('selected themes(' + diasyuiIncludedThemes.length + ')')
-  }
-  else if (config('daisyui.themes') != false) {
-    addComponents(themes)
-    diasyuiIncludedItems.push('themes')
+    diasyuiIncludedItems.push('themes[' + themesArray.length + ']')
+  }else{
+    includedThemesObj[':root'] = require("./dist/themes/light")['[data-theme=light]']
+    diasyuiIncludedItems.push('default theme')
   }
+  addBase(includedThemesObj)
 
   // inject @utilities style needed by components
   if (config('daisyui.utils') != false) {
@@ -86,15 +143,15 @@ const mainFunction = ({ addBase, addComponents, addUtilities, config }) => {
       console.log(`\n\x1b[33;1m! warning\x1b[0m - unable to require \x1b[36mtailwindcss/plugin\x1b[0m
 DaisyUI color are now only available for DaisyUI components.
 If you want to use DaisyUI color as utility classes (like 'bg-primary')
-you need to add this to your \x1b[36mtailwind.config.js\x1b[0m file:
+you need to add this to your \x1b[34mtailwind.config.js\x1b[0m file:
 ───────────────────────────────────────
-\x1b[36mmodule.exports = {
+\x1b[34mmodule.exports = {
   \x1b[32mtheme: {
     extend: {
       colors: require('daisyui/colors'),
     },
   },\x1b[0m
-\x1b[36m}\x1b[0m
+\x1b[34m}\x1b[0m
 ───────────────────────────────────────  
       `)
     }
diff --git a/src/components/styled/avatar.css b/src/components/styled/avatar.css
index 6bd34105281..4fc32274972 100644
--- a/src/components/styled/avatar.css
+++ b/src/components/styled/avatar.css
@@ -5,7 +5,7 @@
       @apply block w-2 h-2 bg-success rounded-full absolute z-10;
       top: 5%;
       right: 5%;
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%));
+      box-shadow: 0 0 0 2px hsl(var(--b1));
     }
   }
   &.offline{
@@ -14,7 +14,7 @@
       @apply block w-2 h-2 bg-base-300 rounded-full absolute z-10;
       top: 5%;
       right: 5%;
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%));
+      box-shadow: 0 0 0 2px hsl(var(--b1));
     }
   }
 }
diff --git a/src/components/styled/button.css b/src/components/styled/button.css
index 83e56d2dcd0..c8de53c50dc 100644
--- a/src/components/styled/button.css
+++ b/src/components/styled/button.css
@@ -20,7 +20,7 @@
       @apply bg-neutral-focus border-neutral-focus;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--nf, 222 13% 19%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--nf));
     }
   }
   /* brand colors */
@@ -31,7 +31,7 @@
       @apply bg-primary-focus border-primary-focus;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--p, 259 94% 51%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
     }
   }
   &-secondary {
@@ -41,7 +41,7 @@
       @apply bg-secondary-focus border-secondary-focus;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--s, 314 100% 47%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
     }
   }
   &-accent {
@@ -51,7 +51,7 @@
       @apply bg-accent-focus border-accent-focus;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--a, 174 60% 51%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
     }
   }
 
@@ -64,7 +64,7 @@
       @apply bg-info border-info;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--in, 207 90% 54%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--in));
     }
   }
   &-success {
@@ -74,7 +74,7 @@
       @apply bg-success border-success;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--su, 174 100% 29%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--su));
     }
   }
   &-warning {
@@ -84,7 +84,7 @@
       @apply bg-warning border-warning;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--wa, 36 100% 50%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--wa));
     }
   }
   &-error {
@@ -94,7 +94,7 @@
       @apply bg-error border-error;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--er, 14 100% 57%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--er));
     }
   }
 
@@ -188,7 +188,7 @@
   & > .btn-active {
     @apply bg-primary border-primary text-primary-content;
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--p, 259 94% 51%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
     }
   }
   & > .btn:not(:first-child) {
diff --git a/src/components/styled/checkbox.css b/src/components/styled/checkbox.css
index 68702fba126..b8139b15d72 100644
--- a/src/components/styled/checkbox.css
+++ b/src/components/styled/checkbox.css
@@ -20,7 +20,7 @@
   }
   &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
     & ~ .checkbox-mark{
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--bc, 215 28% 17%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
     }
   }
   &:checked{
@@ -45,7 +45,7 @@
     }
     &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
       & ~ .checkbox-mark{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--p, 259 94% 51%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
       }
     }
     &:checked{
@@ -69,7 +69,7 @@
     }
     &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
       & ~ .checkbox-mark{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--s, 314 100% 47%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
       }
     }
     &:checked{
@@ -93,7 +93,7 @@
     }
     &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
       & ~ .checkbox-mark{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--a, 174 60% 51%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
       }
     }
     &:checked{
diff --git a/src/components/styled/drawer.css b/src/components/styled/drawer.css
index 7449b2bee1c..d72db7c6be5 100644
--- a/src/components/styled/drawer.css
+++ b/src/components/styled/drawer.css
@@ -22,27 +22,27 @@
   }
   &:focus-visible{
     & ~ .drawer-content .drawer-button{
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--nf, 222 13% 19%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--nf));
       &.btn-primary{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--p, 259 94% 51%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
       }
       &.btn-secondary{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--s, 314 100% 47%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
       }
       &.btn-accent{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--a, 174 60% 51%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
       }
       &.btn-info{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--in, 207 90% 54%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--in));
       }
       &.btn-success{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--su, 174 100% 29%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--su));
       }
       &.btn-warning{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--wa, 36 100% 50%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--wa));
       }
       &.btn-error{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--er, 14 100% 57%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--er));
       }
       &.glass{
         box-shadow: 0 0 0 2px currentColor;
diff --git a/src/components/styled/input.css b/src/components/styled/input.css
index ba8511be33e..4707dd0dc07 100644
--- a/src/components/styled/input.css
+++ b/src/components/styled/input.css
@@ -4,7 +4,7 @@
     @apply border-opacity-20;
   }
   &:focus {
-    box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsla(var(--bc, 215 28% 17%)/.2);
+    box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsla(var(--bc)/.2);
   }
   &-ghost {
     @apply bg-opacity-5;
@@ -15,43 +15,43 @@
   &-primary {
     @apply border-primary;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--p, 259 94% 51%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
     }
   }
   &-secondary {
     @apply border-secondary;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--s, 314 100% 47%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
     }
   }
   &-accent {
     @apply border-accent;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--a, 174 60% 51%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
     }
   }
   &-info {
     @apply border-info;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--in, 207 90% 54%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--in));
     }
   }
   &-success {
     @apply border-success;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--su, 174 100% 29%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--su));
     }
   }
   &-warning {
     @apply border-warning;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--wa, 36 100% 50%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--wa));
     }
   }
   &-error {
     @apply border-error;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--er, 14 100% 57%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--er));
     }
   }
   &-disabled,
diff --git a/src/components/styled/radio.css b/src/components/styled/radio.css
index 1ba6976351e..0d8e62a01c6 100644
--- a/src/components/styled/radio.css
+++ b/src/components/styled/radio.css
@@ -20,7 +20,7 @@
   }
   &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
     & ~ .radio-mark{
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--bc, 215 28% 17%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
     }
   }
   &:checked{
@@ -45,7 +45,7 @@
     }
     &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
       & ~ .radio-mark{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--p, 259 94% 51%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
       }
     }
     &:checked{
@@ -69,7 +69,7 @@
     }
     &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
       & ~ .radio-mark{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--s, 314 100% 47%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
       }
     }
     &:checked{
@@ -93,7 +93,7 @@
     }
     &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
       & ~ .radio-mark{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--a, 174 60% 51%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
       }
     }
     &:checked{
diff --git a/src/components/styled/select.css b/src/components/styled/select.css
index 61c95290d20..09cdd21604a 100644
--- a/src/components/styled/select.css
+++ b/src/components/styled/select.css
@@ -14,7 +14,7 @@
     4px 4px;
   background-repeat: no-repeat;
   &:focus {
-    box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsla(var(--bc, 215 28% 17%)/.2);
+    box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsla(var(--bc)/.2);
   }
   &-ghost {
     @apply bg-opacity-5;
@@ -25,43 +25,43 @@
   &-primary {
     @apply border-primary;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--p, 259 94% 51%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
     }
   }
   &-secondary {
     @apply border-secondary;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--s, 314 100% 47%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
     }
   }
   &-accent {
     @apply border-accent;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--a, 174 60% 51%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
     }
   }
   &-info {
     @apply border-info;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--in, 207 90% 54%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--in));
     }
   }
   &-success {
     @apply border-success;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--su, 174 100% 29%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--su));
     }
   }
   &-warning {
     @apply border-warning;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--wa, 36 100% 50%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--wa));
     }
   }
   &-error {
     @apply border-error;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--er, 14 100% 57%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--er));
     }
   }
   &-disabled,
diff --git a/src/components/styled/tab.css b/src/components/styled/tab.css
index f434a424090..91ad9a37aff 100644
--- a/src/components/styled/tab.css
+++ b/src/components/styled/tab.css
@@ -22,15 +22,15 @@
   border-width: 0 0 var(--tab-border, 1px) 0;
   border-top-left-radius: var(--tab-radius, .5rem);
   border-top-right-radius: var(--tab-radius, .5rem);
-  border-bottom-color: hsla(var(--border-color, var(--b3, 216 12% 84%)) / var(--tw-border-opacity, 1));
+  border-bottom-color: hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
   padding-left: var(--tab-padding, 1rem);
   padding-right: var(--tab-padding, 1rem);
   &.tab-active{
     @apply bg-base-100;
     border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
-    border-left-color: hsla(var(--border-color, var(--b3, 216 12% 84%)) / var(--tw-border-opacity, 1));
-    border-right-color: hsla(var(--border-color, var(--b3, 216 12% 84%)) / var(--tw-border-opacity, 1));
-    border-top-color: hsla(var(--border-color, var(--b3, 216 12% 84%)) / var(--tw-border-opacity, 1));
+    border-left-color: hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
+    border-right-color: hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
+    border-top-color: hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
     padding-left: calc( var(--tab-padding, 1rem) - var(--tab-border, 1px) );
     padding-right: calc( var(--tab-padding, 1rem) - var(--tab-border, 1px) );
     padding-bottom: var(--tab-border, 1px);
@@ -47,9 +47,9 @@
       radial-gradient(
         circle at var(--circle-pos),
         transparent var(--tab-grad),
-        hsla(var(--border-color, var(--b3, 216 12% 84%)) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + .3px),
-        hsla(var(--border-color, var(--b3, 216 12% 84%)) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + var(--tab-border, 1px) ),
-        hsla(var(--b1, 0 0% 100%) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + var(--tab-border, 1px) + .3px)
+        hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + .3px),
+        hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + var(--tab-border, 1px) ),
+        hsla(var(--b1) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + var(--tab-border, 1px) + .3px)
       );
     }
     &:before{
diff --git a/src/components/styled/textarea.css b/src/components/styled/textarea.css
index 0a52667bea5..973c80025eb 100644
--- a/src/components/styled/textarea.css
+++ b/src/components/styled/textarea.css
@@ -4,7 +4,7 @@
     @apply border-opacity-20;
   }
   &:focus {
-    box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsla(var(--bc, 215 28% 17%)/.2);
+    box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsla(var(--bc)/.2);
 
   }
   &-ghost {
diff --git a/src/components/styled/toggle.css b/src/components/styled/toggle.css
index ec5cf072ebf..f8f38857c9d 100644
--- a/src/components/styled/toggle.css
+++ b/src/components/styled/toggle.css
@@ -9,7 +9,7 @@
   }
   &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
     & ~ .toggle-mark{
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--bc, 215 28% 17%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
     }
   }
   &:checked{
@@ -33,7 +33,7 @@
   &-primary{
     &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
       & ~ .toggle-mark{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--p, 259 94% 51%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
       }
     }
     &:checked{
@@ -51,7 +51,7 @@
   &-secondary{
     &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
       & ~ .toggle-mark{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--s, 314 100% 47%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
       }
     }
     &:checked{
@@ -69,7 +69,7 @@
   &-accent{
     &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
       & ~ .toggle-mark{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--a, 174 60% 51%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
       }
     }
     &:checked{
diff --git a/src/components/styled/tooltip.css b/src/components/styled/tooltip.css
index 1189cd5c968..13e4223e00a 100644
--- a/src/components/styled/tooltip.css
+++ b/src/components/styled/tooltip.css
@@ -1,8 +1,8 @@
 .tooltip{
   @apply inline-block relative whitespace-nowrap;
   --tooltip-tail: 3px;
-  --tooltip-color: hsl(var(--n, 219 14% 28%));
-  --tooltip-text-color: hsl(var(--nc, 0 0% 100%));
+  --tooltip-color: hsl(var(--n));
+  --tooltip-text-color: hsl(var(--nc));
   --tooltip-tail-offset: calc(100% + 1px - var(--tooltip-tail));
 }
 .tooltip:before,
@@ -74,31 +74,31 @@
 }
 .tooltip{
   &-primary{
-    --tooltip-color: hsl(var(--p, 259 94% 51%));
-    --tooltip-text-color: hsl(var(--pc, 0 0% 100%));
+    --tooltip-color: hsl(var(--p));
+    --tooltip-text-color: hsl(var(--pc));
   }
   &-secondary{
-    --tooltip-color: hsl(var(--s, 314 100% 47%));
-    --tooltip-text-color: hsl(var(--sc, 0 0% 100%));
+    --tooltip-color: hsl(var(--s));
+    --tooltip-text-color: hsl(var(--sc));
   }
   &-accent{
-    --tooltip-color: hsl(var(--a, 174 60% 51%));
-    --tooltip-text-color: hsl(var(--ac, 0 0% 100%));
+    --tooltip-color: hsl(var(--a));
+    --tooltip-text-color: hsl(var(--ac));
   }
   &-info{
-    --tooltip-color: hsla(var(--in, 207 90% 54%) / .1);
-    --tooltip-text-color: hsl(var(--in, 207 90% 54%));
+    --tooltip-color: hsla(var(--in) / .1);
+    --tooltip-text-color: hsl(var(--in));
   }
   &-success{
-    --tooltip-color: hsla(var(--su, 174 100% 29%) / .1);
-    --tooltip-text-color: hsl(var(--su, 174 100% 29%));
+    --tooltip-color: hsla(var(--su) / .1);
+    --tooltip-text-color: hsl(var(--su));
   }
   &-warning{
-    --tooltip-color: hsla(var(--wa, 36 100% 50%) / .1);
-    --tooltip-text-color: hsl(var(--wa, 36 100% 50%));
+    --tooltip-color: hsla(var(--wa) / .1);
+    --tooltip-text-color: hsl(var(--wa));
   }
   &-error{
-    --tooltip-color: hsla(var(--er, 14 100% 57%) / .1);
-    --tooltip-text-color: hsl(var(--er, 14 100% 57%));
+    --tooltip-color: hsla(var(--er) / .1);
+    --tooltip-text-color: hsl(var(--er));
   }
 }
\ No newline at end of file
diff --git a/src/themes/dark.css b/src/themes/dark.css
index 275ae040042..b28e333fa7f 100644
--- a/src/themes/dark.css
+++ b/src/themes/dark.css
@@ -20,27 +20,3 @@
   --b3: 223 14% 10%;
   --bc: 228 14% 93%;
 }
-@media (prefers-color-scheme: dark){
-  :root{
-    --p: 259 94% 61%;
-    --pf: 259 94% 51%;
-    --pc: 0 0% 100%;
-    
-    --s: 314 100% 47%;
-    --sf: 314 100% 37%;
-    --sc: 0 0% 100%;
-    
-    --a: 174 60% 51%;
-    --af: 174 60% 41%;
-    --ac: 0 0% 100%;
-    
-    --n: 222 13% 19%;
-    --nf: 223 14% 10%;
-    --nc: 0 0% 100%;
-    
-    --b1: 219 14% 28%;
-    --b2: 222 13% 19%;
-    --b3: 223 14% 10%;
-    --bc: 228 14% 93%;
-  }
-}
\ No newline at end of file
diff --git a/src/themes/lofi.css b/src/themes/lofi.css
index ad0e19f3230..e575a18eee1 100644
--- a/src/themes/lofi.css
+++ b/src/themes/lofi.css
@@ -31,9 +31,3 @@
   --rounded-badge: 0rem;
   --tab-radius: 0rem;
 }
-[data-theme="lofi"] *{
-  border-color: hsl(var(--border-color)) !important;
-  --tw-border-opacity: 1 !important;
-  --tw-text-opacity: 1 !important;
-  --tw-shadow: 0 0 0 1px hsl(var(--border-color)) !important;
-}
\ No newline at end of file
diff --git a/src/themes/wireframe.css b/src/themes/wireframe.css
index 5cf4fb32a07..8c380069b28 100644
--- a/src/themes/wireframe.css
+++ b/src/themes/wireframe.css
@@ -32,10 +32,4 @@
   --rounded-badge: 0.2rem;
   --tab-radius: 0.2rem;
 
-}
-[data-theme="wireframe"] *{
-  border-color: hsl(var(--border-color)) !important;
-  --tw-border-opacity: 1 !important;
-  --tw-text-opacity: 1 !important;
-  --tw-shadow: 0 0 0 1px hsl(var(--border-color)) !important;
 }
\ No newline at end of file