add theme selector cards

dashboard/assets/scss/colors.scss

@@ -0,0 +1,6 @@
+:root {
+    --current-card-color: #1d1d1f;
+    --card-color-1: #1d1d1f;
+    --card-color-2: #1f1f1f;
+    --card-color-3: #0f0f0f;
+}

dashboard/assets/scss/main.scss

@@ -4,6 +4,7 @@
 
 @import '../font-awesome/css/all.css';
 @import './utilities.scss';
+@import './colors.scss';
 
 @import url('https://fonts.cdnfonts.com/css/geometric-sans-serif-v1');
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

dashboard/components/CVerticalNavigation.vue

@@ -25,6 +25,8 @@ const props = defineProps<Props>();
 
 const { isAdmin } = useUserRoles();
 
+const debugMode = process.dev;
+
 const { isOpen, close } = useMenu();
 
 </script>
@@ -41,13 +43,17 @@ const { isOpen, close } = useMenu();
                     <img class="h-[2rem]" :src="'/logo.png'">
                 </div>
                 <div class="font-bold text-[1.4rem] text-gray-300"> Litlyx </div>
-                
+
                 <div class="grow flex justify-end text-[1.4rem] mr-2 lg:hidden">
                     <i @click="close()" class="fas fa-close"></i>
                 </div>
 
             </div>
 
+            <div v-if="debugMode" class="flex justify-center w-full">
+                <ThemeSelector></ThemeSelector>
+            </div>
+
             <div class="flex flex-col gap-4">
 
                 <div v-for="section of sections" class="flex flex-col gap-1">
@@ -83,7 +89,6 @@ const { isOpen, close } = useMenu();
 
 
 <style lang="scss" scoped>
-
 .CVerticalNavigation * {
     font-family: 'Geist';
 }

dashboard/components/ThemeSelector.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+
+
+function cardColor(val: number) {
+    document.documentElement.style.setProperty(
+        '--current-card-color',
+        `var(--card-color-${val})`
+    );
+}
+
+</script>
+
+<template>
+    <div class="flex gap-2 bg-[#151517] py-3 px-8 rounded-lg">
+        <div @click="cardColor(1)" class="card1 px-4 py-1 rounded-lg cursor-pointer">
+            A
+        </div>
+        <div @click="cardColor(2)" class="card2 px-4 py-1 rounded-lg cursor-pointer">
+            B
+        </div>
+        <div @click="cardColor(3)" class="card3 px-4 py-1 rounded-lg cursor-pointer">
+            C
+        </div>
+    </div>
+</template>
+
+
+<style scoped lang=scss>
+.card1 {
+    background-color: var(--card-color-1) !important;
+}
+
+.card2 {
+    background-color: var(--card-color-2) !important;
+}
+
+.card3 {
+    background-color: var(--card-color-3) !important;
+}
+</style>

dashboard/tailwind.config.js

@@ -11,7 +11,7 @@ module.exports = {
             },
             colors: {
                 card: {
-                    DEFAULT: '#1d1d1f',
+                    DEFAULT: 'var(--current-card-color)',
                 },
                 bg: {
                     DEFAULT: '#151517',