From ef3db7540bdb6cdf3c5f17aba9a9a3213848c69b Mon Sep 17 00:00:00 2001
From: Jerome Villiseck <jerome.villiseck@outlook.com>
Date: Mon, 26 Aug 2024 15:57:10 +0200
Subject: [PATCH] - Prise en compte du theme sombre

---
 src/components/Structure/Navbar.vue |   2 +-
 src/plugins/vuetify.js              | 102 ++++++++++++++++++++++------
 2 files changed, 82 insertions(+), 22 deletions(-)

diff --git a/src/components/Structure/Navbar.vue b/src/components/Structure/Navbar.vue
index 972a6c2..56e8746 100644
--- a/src/components/Structure/Navbar.vue
+++ b/src/components/Structure/Navbar.vue
@@ -132,7 +132,7 @@ function navigateTo(routeName) {
 }
 
 function toggleTheme() {
-  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+  theme.global.name.value = theme.global.current.value.dark ? 'itemLightTheme' : 'itemDarkTheme'
   localStorage.setItem('theme', theme.global.name.value)
 }
 
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 969b883..532ff6d 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -12,6 +12,84 @@ import 'vuetify/styles'
 import {createVuetify} from 'vuetify'
 import {en, fr} from 'vuetify/locale'
 
+//CUstom
+const itemLightTheme = {
+  dark: false,
+  colors: {
+    background: '#FFFFFF',
+    surface: '#FFFFFF',
+    'surface-bright': '#FFFFFF',
+    'surface-light': '#EEEEEE',
+    'surface-variant': '#424242',
+    'on-surface-variant': '#EEEEEE',
+    primary: '#295494',
+    'primary-darken-1': '#1F5592',
+    secondary: '#252C61',
+    'secondary-darken-1': '#018786',
+    error: '#a32525',
+    info: '#326bb1',
+    success: '#4da432',
+    warning: '#ec6839',
+    disabled: '#808080'
+  },
+  variables: {
+    'border-color': '#000000',
+    'border-opacity': 0.12,
+    'high-emphasis-opacity': 0.87,
+    'medium-emphasis-opacity': 0.60,
+    'disabled-opacity': 0.38,
+    'idle-opacity': 0.04,
+    'hover-opacity': 0.04,
+    'focus-opacity': 0.12,
+    'selected-opacity': 0.08,
+    'activated-opacity': 0.12,
+    'pressed-opacity': 0.12,
+    'dragged-opacity': 0.08,
+    'theme-kbd': '#212529',
+    'theme-on-kbd': '#FFFFFF',
+    'theme-code': '#F5F5F5',
+    'theme-on-code': '#000000',
+  }
+}
+const itemDarkTheme = {
+  dark: true,
+  colors: {
+    background: '#121212',
+    surface: '#1E1E1E',
+    'surface-bright': '#FFFFFF',
+    'surface-light': '#EEEEEE',
+    'surface-variant': '#424242',
+    'on-surface-variant': '#EEEEEE',
+    primary: '#404552',
+    'primary-darken-1': '#1F5592',
+    secondary: '#383c4a',
+    'secondary-darken-1': '#018786',
+    error: '#a32525',
+    info: '#5294e2',
+    success: '#4da432',
+    warning: '#ec6839',
+    disabled: '#4b5162'
+  },
+  variables: {
+    'border-color': '#FFFFFF',
+    'border-opacity': 0.12,
+    'high-emphasis-opacity': 0.87,
+    'medium-emphasis-opacity': 0.60,
+    'disabled-opacity': 0.38,
+    'idle-opacity': 0.04,
+    'hover-opacity': 0.04,
+    'focus-opacity': 0.12,
+    'selected-opacity': 0.08,
+    'activated-opacity': 0.12,
+    'pressed-opacity': 0.12,
+    'dragged-opacity': 0.08,
+    'theme-kbd': '#212529',
+    'theme-on-kbd': '#FFFFFF',
+    'theme-code': '#F5F5F5',
+    'theme-on-code': '#000000',
+  }
+}
+
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   locale: {
@@ -20,28 +98,10 @@ export default createVuetify({
     messages: { fr, en },
   },
   theme: {
-    defaultTheme: 'light',
+    defaultTheme: 'itemLightTheme',
     themes: {
-      light: {
-        primary: '#295494',
-        secondary: '#252C61',
-        accent: '#980827',
-        error: '#a32525',
-        warning: '#ec6839',
-        info: '#326bb1',
-        success: '#4da432',
-        disabled: '#808080',
-      },
-      dark: {
-        primary: '#404552',
-        secondary: '#383c4a',
-        accent: '#980827',
-        error: '#a32525',
-        warning: '#ec6839',
-        info: '#5294e2',
-        success: '#4da432',
-        disabled: '#4b5162',
-      },
+      itemLightTheme,
+      itemDarkTheme
     },
   },
 })