wip

Author: Kamona-WD

src/App.jsx

@@ -21,6 +21,21 @@ export default defineComponent({
             'Modal',
         ]
 
+        const themeMainColors = [
+            'purple',
+            'fuchsia',
+            'violet',
+            'teal',
+            'lime',
+        ]
+
+        const changeMainColor = (color) => {
+            const root = document.documentElement
+            root.style.setProperty('--color-primary-light', `var(--color-${color}-light)`)
+            root.style.setProperty('--color-primary', `var(--color-${color})`)
+            root.style.setProperty('--color-primary-dark', `var(--color-${color}-dark)`)
+        }
+
         return () => (
             <div class={[isDark.value && 'dark bg-dark-eval-0']}>
                 <div class="p-6 flex gap-4 items-center">
@@ -31,6 +46,21 @@ export default defineComponent({
                             toggleDarkMode()
                         }}
                     />
+
+                    <div class="flex gap-4">
+                        {themeMainColors.map(c => (
+                            <button
+                                style={{
+                                    backgroundColor: `var(--color-${c})`
+                                }}
+                                type="button"
+                                class="w-6 h-6 rounded-full"
+                                onClick={() => {
+                                    changeMainColor(c)
+                                }}
+                            ></button>
+                        ))}
+                    </div>
                 </div>
 
                 <div class="p-10">

src/css/main.css

@@ -1 +1,2 @@
+@import './vars.css';
 @import 'flatpickr/dist/flatpickr.css';

src/css/vars.css

@@ -0,0 +1,25 @@
+:root {
+    --color-primary-light: var(--color-purple-light);
+    --color-primary: var(--color-purple);
+    --color-primary-dark: var(--color-purple-dark);
+
+    --color-purple-light: #c084fc;
+    --color-purple: #a855f7;
+    --color-purple-dark: #9333ea;
+
+    --color-fuchsia-light: #d946ef;
+    --color-fuchsia: #c026d3;
+    --color-fuchsia-dark: #a21caf;
+
+    --color-violet-light: #8b5cf6;
+    --color-violet: #7c3aed;
+    --color-violet-dark: #6d28d9;
+
+    --color-teal-light: #14b8a6;
+    --color-teal: #0d9488;
+    --color-teal-dark: #0f766e;
+
+    --color-lime-light: #a3e635;
+    --color-lime: #84cc16;
+    --color-lime-dark: #65a30d;
+}

src/lib.js

@@ -1,6 +1,5 @@
 import * as components from './components'
-import '@/css/main.css'
-// import '@/css/tailwind.css'
+// import '@/css/main.css'
 
 export {
     Avatar as KuiAvatar,

tailwind.config.js

@@ -14,10 +14,9 @@ export default {
 
             colors: {
                 primary: {
-                    light: colors.purple[400],
-                    DEFAULT: colors.purple[500],
-                    dark: colors.purple[600],
-                    ...colors.purple,
+                    light: 'var(--color-primary-light)',
+                    DEFAULT: 'var(--color-primary)',
+                    dark:'var(--color-primary-dark)',
                 },
 
                 dark: {