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 }, }, })