add a theme switcher component

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"/>
 
+    <LayoutThemeSwitcher />
 
     <LayoutHeaderUniversalCreationCreateButton v-if="showUniversalButton" />
 
@@ -35,9 +36,7 @@ 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" />
+    <LayoutHeaderMenu name="Account" color="n-primary" icon="fas fa-sun" />
 
     <a
         :href="runtimeConfig.supportUrl"
@@ -83,9 +82,6 @@ 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/ThemeSwitcher.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-switch
+      v-model="theme.global.name.value"
+      density="compact"
+      inline
+      false-value="light"
+      false-icon="fas fa-sun"
+      true-value="dark"
+      true-icon="fas fa-moon"
+  />
+</template>
+
+<script setup lang="ts">
+import {useTheme} from "vuetify";
+
+const theme = useTheme()
+</script>
+
+<style scoped lang="scss">
+  .v-switch {
+    min-width: 60px;
+    max-width: 60px;
+    min-height: 40px;
+    max-height: 40px;
+  }
+</style>