THE-1369 ajout du switch dans le menu parametre d'accessibilite + ajo…

…ut du theme inverted a useColorMode + HeaderMobile.vue

.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
+

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;

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,26 +138,33 @@ 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);
 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(() => {