implement a pseudo dark mode

components/Layout/Header.vue

@@ -20,6 +20,7 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
 
     <v-toolbar-title v-if="mdAndUp" v-text="title"/>
 
+
     <LayoutHeaderUniversalCreationCreateButton v-if="showUniversalButton" />
 
     <LayoutHeaderHomeBtn />
@@ -34,6 +35,8 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
 
     <LayoutHeaderMenu name="Configuration" />
 
+    <!--<v-btn @click="toggleTheme" color="n-primary" icon="fas fa-sun" width="48px" size="small" />-->
+    
     <LayoutHeaderMenu name="Account" />
 
     <a
@@ -52,7 +55,7 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
 import {computed, ComputedRef} from "@vue/reactivity";
 import {useMenu} from "~/composables/layout/useMenu";
 import {useAbility} from "@casl/vue";
-import { useDisplay } from 'vuetify'
+import {useDisplay, useTheme} from 'vuetify'
 import {useOrganizationProfileStore} from "~/stores/organizationProfile";
 
 const organizationProfile = useOrganizationProfileStore()
@@ -80,6 +83,9 @@ const showUniversalButton =
     || ability.can('display', 'message_send_page')
     || ability.can('manage', 'equipments')
 
+const theme = useTheme()
+const toggleTheme = () => theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+
 </script>
 
 <style scoped>

components/Layout/MainMenu.vue

@@ -122,7 +122,7 @@ onUnmounted(() => {
   :deep(.v-icon),
   {
     font-size: 14px;
-    color: rgb(var(--v-theme-neutral));
+    color: rgb(var(--v-theme-n-secondary), 0.7);
   }
 
   .v-list-item__prepend {

components/Layout/Subheader.vue

@@ -6,7 +6,7 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
 <template>
   <main>
     <v-card
-      class="d-md-flex bg-neutral text-body-2 px-2"
+      class="d-md-flex theme-neutral text-body-2 px-2"
       flat
     >
       <LayoutSubHeaderBreadcrumbs v-if="mdAndUp" class="mr-auto d-flex" />

plugins/vuetify.ts

@@ -6,65 +6,116 @@ import '@fortawesome/fontawesome-free/css/all.css'
 import '@mdi/font/css/materialdesignicons.css'
 import {fr} from 'vuetify/locale'
 
-export default defineNuxtPlugin(nuxtApp => {
-    const vuetify = createVuetify({
-        ssr: true,
-        locale: {
-            locale: 'fr',
-            messages: { fr }
-        },
-        theme: {
-            defaultTheme: 'light',
-            themes: {
-                light: {
-                    dark: false,
-                    colors: {
-                        /**
-                         * @see Cf. doc/colors.md pour le rôle de chaque couleur
-                         */
-                        // Global
-                        'primary': '#00ad8e',
-                        'n-primary': '#ffffff',
+const lightTheme = {
+    dark: false,
+    colors: {
+        /**
+         * @see Cf. doc/colors.md pour le rôle de chaque couleur
+         */
+        // Global
+        'primary': '#00ad8e',
+        'n-primary': '#ffffff',
+
+        'primary-alt': '#a9e0d6',
+        'n-primary-alt': '#777777',
+
+        'secondary': '#324150',
+        'n-secondary': '#f5f5f5',
+
+        'secondary-alt': '#2c3a48',
+        'n-secondary-alt': '#ffffff',
+
+        'neutral-strong': '#777777',
+        'n-neutral-strong': '#ecf0f5',
+
+        'neutral': '#f5f5f5',
+        'n-neutral': '#777777',
+
+        'neutral-soft': '#ecf0f5',
+        'n-neutral-soft': '#464646',
+
+        // Content
+        'danger': '#f56954',
+        'n-danger': '#ffffff',
 
-                        'primary-alt': '#a9e0d6',
-                        'n-primary-alt': '#777777',
+        'success': '#00a65a',
+        'n-success': '#ffffff',
 
-                        'secondary': '#324150',
-                        'n-secondary': '#f5f5f5',
+        'warning': '#f39c12',
+        'n-warning': '#ffffff',
 
-                        'secondary-alt': '#2c3a48',
-                        'n-secondary-alt': '#ffffff',
+        'info': '#3c8dbc',
+        'n-info': '#ffffff',
 
-                        'neutral-strong': '#777777',
-                        'n-neutral-strong': '#ecf0f5',
+        // Special cases
+        // TODO: voir ceux dont on peut se passer
+        'x-create-btn': '#f39c12',
+        'n-x-create-btn': '#ffffff',
+    }
+}
 
-                        'neutral': '#f5f5f5',
-                        'n-neutral': '#767676',
+const darkTheme = {
+    dark: true,
+    colors: {
+        /**
+         * @see Cf. doc/colors.md pour le rôle de chaque couleur
+         */
+        // Global
+        'primary': '#00ad8e',
+        'n-primary': '#ffffff',
 
-                        'neutral-soft': '#ecf0f5',
-                        'n-neutral-soft': '#464646',
+        'primary-alt': '#a9e0d6',
+        'n-primary-alt': '#777777',
 
-                        // Content
-                        'danger': '#f56954',
-                        'n-danger': '#ffffff',
+        'secondary': '#324150',
+        'n-secondary': '#f5f5f5',
 
-                        'success': '#00a65a',
-                        'n-success': '#ffffff',
+        'secondary-alt': '#2c3a48',
+        'n-secondary-alt': '#ffffff',
 
-                        'warning': '#f39c12',
-                        'n-warning': '#ffffff',
+        'neutral-strong': '#595959',
+        'n-neutral-strong': '#ecf0f5',
 
-                        'info': '#3c8dbc',
-                        'n-info': '#ffffff',
+        'neutral': '#777777',
+        'n-neutral': '#f5f5f5',
 
-                        // Special cases
-                        // TODO: voir ceux dont on peut se passer
-                        'x-create-btn': '#f39c12',
-                        'n-x-create-btn': '#ffffff',
+        'neutral-soft': '#090c11',
+        'n-neutral-soft': '#cccccc',
 
-                        'x-client-loader': '#2c3a48',
-                    }
-                }
+        // Content
+        'danger': '#f56954',
+        'n-danger': '#ffffff',
+
+        'success': '#00a65a',
+        'n-success': '#ffffff',
+
+        'warning': '#f39c12',
+        'n-warning': '#ffffff',
+
+        'info': '#3c8dbc',
+        'n-info': '#ffffff',
+
+        // Special cases
+        // TODO: voir ceux dont on peut se passer
+        'x-create-btn': '#f39c12',
+        'n-x-create-btn': '#ffffff',
+    }
+}
+
+
+
+export default defineNuxtPlugin(nuxtApp => {
+    const vuetify = createVuetify({
+        ssr: true,
+        locale: {
+            locale: 'fr',
+            messages: { fr }
+        },
+        theme: {
+            defaultTheme: 'light',
+            themes: {
+                light: lightTheme,
+                dark: darkTheme
             },
         },
         icons: {