Ajout gestion theme normal

abes-esr · Aug 27, 2024 · 06bffb7 · 06bffb7
1 parent b6d7aa3
commit 06bffb7
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 		<meta charset="UTF-8" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Welcome to Vuetify 3</title>
+		<title>Item</title>
 	</head>
 
 	<body>

diff --git a/src/App.vue b/src/App.vue
@@ -32,18 +32,22 @@
 </template>
 
 <script setup>
-import { onBeforeMount, ref } from 'vue';
+import {onBeforeMount, onMounted, ref} from 'vue';
 import Header from '@/components/Structure/Header.vue'
 import Navbar from '@/components/Structure/Navbar.vue'
 import Footer from '@/components/Structure/Footer.vue'
 import router from '@/router/index'
 import {HttpStatusCode} from 'axios'
+import {useTheme} from "vuetify";
 
 const errorStack = ref([])
 const drawer = ref(false)
 
-onBeforeMount(() => {
-    document.title = 'Item';
+
+const theme = useTheme()
+
+onMounted(() => {
+  theme.global.name.value = localStorage.getItem('theme')
 })
 
 function addError(error) {

diff --git a/src/components/Structure/Navbar.vue b/src/components/Structure/Navbar.vue
@@ -28,11 +28,11 @@
         <v-list-item-title>Modifier mon adresse mail</v-list-item-title>
       </v-list-item>
 
-      <v-list-item @click="toggleTheme">
+      <v-list-item @click="toggleTheme" @cut="setTheme">
         <template v-slot:prepend>
           <v-icon>{{ theme.global.current.value.dark ? 'mdi-weather-night' : 'mdi-weather-sunny' }}</v-icon>
         </template>
-        <v-list-item-title>{{ theme.global.current.value.dark ? 'Thème clair' : 'Thème sombre' }}</v-list-item-title>
+        <v-list-item-title>{{ theme.global.current.value.dark ? 'Thème sombre' : 'Thème clair' }}</v-list-item-title>
       </v-list-item>
     </v-list>
 
@@ -135,6 +135,10 @@ function toggleTheme() {
   theme.global.name.value = theme.global.current.value.dark ? 'itemLightTheme' : 'itemDarkTheme'
   localStorage.setItem('theme', theme.global.name.value)
 }
+function setTheme() {
+  theme.global.name.value = 'itemRngTheme'
+}
+
 
 const rights = computed(() => {
   const user = authStore.getUser

diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -12,6 +12,16 @@ import 'vuetify/styles'
 import {createVuetify} from 'vuetify'
 import {en, fr} from 'vuetify/locale'
 
+function generateRandomHexColor() {
+  const letters = '0123456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+
+  }
+  return color;
+}
+
 //CUstom
 const itemLightTheme = {
   dark: false,
@@ -91,6 +101,27 @@ const itemDarkTheme = {
     'theme-on-code': '#000000',
   }
 }
+const itemRngTheme = {
+  "dark": false,
+  "colors": {
+    "background": generateRandomHexColor(),
+    "surface": generateRandomHexColor(),
+    "surface-bright": generateRandomHexColor(),
+    "surface-light": generateRandomHexColor(),
+    "surface-variant": generateRandomHexColor(),
+    "on-surface-variant":generateRandomHexColor(),
+    "primary": generateRandomHexColor(),
+    "primary-darken-1": generateRandomHexColor(),
+    "secondary": generateRandomHexColor(),
+    "secondary-darken-1": generateRandomHexColor(),
+    textColor: generateRandomHexColor(),
+    error: generateRandomHexColor(),
+    info: generateRandomHexColor(),
+    success: generateRandomHexColor(),
+    warning: generateRandomHexColor(),
+    disabled: generateRandomHexColor()
+  }
+}
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
@@ -103,7 +134,8 @@ export default createVuetify({
     defaultTheme: 'itemLightTheme',
     themes: {
       itemLightTheme,
-      itemDarkTheme
+      itemDarkTheme,
+      itemRngTheme
     },
   }
 })