From 633231f82161787d02c6b1ab6495491fc6ea964d Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Mon, 4 Nov 2024 13:49:49 +0100
Subject: [PATCH] Change a few colors and setup the theme switch to test the
 light theme

---
 components/ThemeSwitch.client.vue | 16 ++++++++++++++++
 components/base/Switch.vue        |  7 +++++--
 nuxt.config.ts                    |  8 ++++----
 pages/index.vue                   |  5 ++++-
 4 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 components/ThemeSwitch.client.vue

diff --git a/components/ThemeSwitch.client.vue b/components/ThemeSwitch.client.vue
new file mode 100644
index 0000000..3a712e1
--- /dev/null
+++ b/components/ThemeSwitch.client.vue
@@ -0,0 +1,16 @@
+<script setup>
+const colorMode = useColorMode()
+
+const isDark = computed({
+    get() {
+        return colorMode.value === 'dark'
+    },
+    set() {
+        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+    }
+})
+</script>
+
+<template>
+    <Switch v-model="isDark" onIcon="radix-icons:moon" offIcon="radix-icons:sun" />
+</template>
\ No newline at end of file
diff --git a/components/base/Switch.vue b/components/base/Switch.vue
index b9b4457..d7a529b 100644
--- a/components/base/Switch.vue
+++ b/components/base/Switch.vue
@@ -1,17 +1,20 @@
 <template>
     <Label class="flex justify-center items-center my-2">{{ label }}
         <SwitchRoot v-model:checked="model" :disabled="disabled"
-            class="mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
+            class="group mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
         data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35  hover:border-light-50 dark:hover:border-dark-50  focus:shadow-raw focus:shadow-light-40 dark:focus:shadow-dark-40
-        data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20">
+        data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 relative">
             <SwitchThumb
                 class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]
                 data-[disabled]:bg-light-30 dark:data-[disabled]:bg-dark-30 data-[disabled]:border-light-30 dark:data-[disabled]:border-dark-30" />
+            <Icon v-if="onIcon && offIcon" :icon="onIcon" class="group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-0 absolute top-1 left-1 transition-opacity" />
+            <Icon v-if="onIcon && offIcon" :icon="offIcon" class="group-data-[state=checked]:opacity-0 group-data-[state=unchecked]:opacity-100 absolute top-1 right-1 transition-opacity" />
         </SwitchRoot>
     </Label>
 </template>
 
 <script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
 const { label, disabled, onIcon, offIcon } = defineProps<{
     label?: string
     disabled?: boolean
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 49f4b89..9308a5a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -61,10 +61,10 @@ export default defineNuxtConfig({
             0: "#ffffff",
             5: "#fcfcfc",
             10: "#fafafa",
-            20: "#f6f6f6",
-            25: "#e3e3e3",
-            30: "#e0e0e0",
-            35: "#d4d4d4",
+            20: "#f7f7f7",
+            25: "#e4e4e4",
+            30: "#dfdfdf",
+            35: "#d2d2d2",
             40: "#bdbdbd",
             50: "#ababab",
             60: "#707070",
diff --git a/pages/index.vue b/pages/index.vue
index 1bd2dc8..1222ccf 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -17,7 +17,10 @@ watch(loading, (value) => {
         <div class="w-1/2 flex flex-1 flex-col justify-center items-center gap-2">
             <Collapsible label="Options">
                 <div class="flex flex-col justify-start items-start">
-                    <Switch label="Verrouiler" v-model="disabled" />
+                    <div class="flex flex-row">
+                        <Switch v-model="disabled" onIcon="radix-icons:lock-closed" offIcon="radix-icons:lock-open-2" />
+                        <ThemeSwitch />
+                    </div>
                     <SliderInput :disabled="disabled" :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
                         v-model="price" />
                     <TextInput label="Saisir un pseudonyme" :disabled="disabled" v-model="username" />