add theme selector cards

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>