- Prise en compte du theme sombre

abes-esr · Aug 26, 2024 · ef3db75 · ef3db75
1 parent 80977b2
commit ef3db75
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 22 deletions.
diff --git 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
@@ -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
     },
   },
 })