From 980be6bd3511e2f45c64d8527c24f37e04bcc97b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Fri, 27 Sep 2024 11:43:33 +0200
Subject: [PATCH] THE-1369 ajout du switch dans le menu parametre
 d'accessibilite + ajout du theme inverted a useColorMode + HeaderMobile.vue

---
 .env                               |  5 +++--
 components/common/HeaderCustom.vue |  4 +---
 components/common/HeaderMobile.vue | 25 ++++++++++++++++++-------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/.env b/.env
index 9a6a632..bcdcf63 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,6 @@
 NUXT_APP_API=http://localhost:8990/api/v1/
-NUXT_APP_API=https://beta.theses.fr/api/v1/
+NUXT_APP_API=https://theses.fr/api/v1/
 NUXT_APP_APIREF=https://apicom.sudoc.fr/wsReferentiels/v1/
-NUXT_IS_MAINTENANCE=false
 NUXT_MAINTENANCE_MESSAGE="<p>Nous nous excusons pour tout inconvénient que cela pourrait causer. </p><br /> <p>Vous pouvez suivre le compte Twitter de l'ABES pour le suivi des travaux : <a href='https://twitter.com/com_abes' target='_blank'>https://twitter.com/com_abes</a></p><br /><p>Nous vous remercions pour votre patience et nous revenons bientôt !</p>"
+NUXT_IS_MAINTENANCE=false
+
diff --git a/components/common/HeaderCustom.vue b/components/common/HeaderCustom.vue
index 44f7462..07af97f 100644
--- a/components/common/HeaderCustom.vue
+++ b/components/common/HeaderCustom.vue
@@ -97,9 +97,7 @@ const colorMode = useColorMode({
 });
 
 onBeforeMount(() => {
-  console.log("colorMode.value : " + colorMode.value)
-  console.log("theme.global.name.value : " + theme.global.name.value)
-  console.log("themesNames.value[colorMode.value] : " + themesNames.value[colorMode.value])
+  //Etat initial du switch
   theme.global.name.value = themesNames.value[colorMode.value];
   selectedThemeSwitch.value = colorMode.value;
   isReady.value = true;
diff --git a/components/common/HeaderMobile.vue b/components/common/HeaderMobile.vue
index c72ccf4..0330081 100644
--- a/components/common/HeaderMobile.vue
+++ b/components/common/HeaderMobile.vue
@@ -118,7 +118,8 @@
           <li><v-switch :aria-label='$t("access.police-aria")' :label='$t("access.police")' v-model="opendys" inset></v-switch></li>
           <li><v-switch :label='$t("access.justification")' v-model="justification" inset></v-switch></li>
           <li><v-switch :label='$t("access.interligne")' v-model="interlignes" inset></v-switch></li>
-          <li><v-switch :aria-label='$t("access.contrast-aria")' :label='$t("access.contrast")' v-model="changeContrast" inset></v-switch></li>
+          <li><v-switch :aria-label='$t("access.contrast-aria")' :label='$t("access.contrast")' v-model="selectedThemeSwitch" value="dark" inset></v-switch></li>
+          <li><v-switch :aria-label='$t("access.inverted-aria")' :label='$t("access.inverted")' v-model="selectedThemeSwitch" value="inverted" inset></v-switch></li>
         </ul>
       </v-card-text>
       <v-card-actions>
@@ -137,7 +138,7 @@ import { useColorMode } from '@vueuse/core'
 const theme = useTheme();
 const { locale } = useI18n();
 const isReady = ref(false);
-const changeContrast = ref(false);
+const selectedThemeSwitch = ref('');
 
 // Elements du DOM
 const expandedMenu = ref(null);
@@ -145,18 +146,25 @@ const expandedSearchBar = ref(null);
 
 const themesNames = ref({
   "light": "abesLightTheme",
-  "dark": "abesDarkTheme"
+  "dark": "abesDarkTheme",
+  "inverted": "abesInvertedTheme"
 });
 
 const colorMode = useColorMode({
+  attribute: 'theme',
+  modes: {
+    // couleurs personnalisées
+    inverted: 'inverted'
+  },
   onChanged(color) {
     theme.global.name.value = themesNames.value[color];
   }
 });
 
 onBeforeMount(() => {
-  // Etat par défaut du switch
-  // changeContrast.value = useColorMode().value === 'dark';
+  // Etat initial du switch
+  theme.global.name.value = themesNames.value[colorMode.value];
+  selectedThemeSwitch.value = colorMode.value;
   isReady.value = true;
 });
 
@@ -246,8 +254,11 @@ const justification = useState('justification');
 /**
  * Watchers
  */
-watch(changeContrast, newValue => {
-  // colorMode.value = newValue ? 'dark' : 'light';
+// Détecter les changements de switch pour changer le thème
+watch(() => selectedThemeSwitch.value, () => {
+  if(selectedThemeSwitch.value === false)
+    selectedThemeSwitch.value = "light";
+  colorMode.value = selectedThemeSwitch.value;
 });
 
 onMounted(() => {