refactor themes

assets/css/global.scss

@@ -3,58 +3,6 @@
  *
  * Quand c'est possible, préférer les règles par page, layout ou composant
  */
-
-.theme-primary {
-  background-color: rgb(var(--v-theme-primary)) !important;
-  color: rgb(var(--v-theme-n-primary)) !important;
-}
-
-.theme-secondary {
-  background-color: rgb(var(--v-theme-secondary)) !important;
-  color: rgb(var(--v-theme-n-secondary)) !important;
-}
-
-.theme-neutral-strong {
-  background-color: rgb(var(--v-theme-neutral-strong)) !important;
-  color: rgb(var(--v-theme-n-neutral-strong)) !important;
-}
-
-.theme-neutral {
-  background-color: rgb(var(--v-theme-neutral)) !important;
-  color: rgb(var(--v-theme-n-neutral)) !important;
-}
-
-.theme-neutral-soft {
-  background-color: rgb(var(--v-theme-neutral-soft)) !important;
-  color: rgb(var(--v-theme-n-neutral-soft)) !important;
-}
-
-.theme-danger {
-  background-color: rgb(var(--v-theme-danger)) !important;
-  color: rgb(var(--v-theme-n-danger)) !important;
-}
-
-.theme-success {
-  background-color: rgb(var(--v-theme-success)) !important;
-  color: rgb(var(--v-theme-n-success)) !important;
-}
-
-.theme-warning {
-  background-color: rgb(var(--v-theme-warning)) !important;
-  color: rgb(var(--v-theme-n-warning)) !important;
-}
-
-.theme-info {
-  background-color: rgb(var(--v-theme-info)) !important;
-  color: rgb(var(--v-theme-n-info)) !important;
-}
-
-.theme-x-create-btn {
-  background-color: rgb(var(--v-theme-x-create-btn)) !important;
-  color: rgb(var(--v-theme-n-x-create-btn)) !important;
-}
-
-
 // TODO: voir si certaines de ces règles ne devraient pas être rapatriées dans des pages, layouts, components
 
 header .v-toolbar__content {

assets/css/theme.scss

@@ -0,0 +1,50 @@
+
+.theme-primary {
+  background-color: rgb(var(--v-theme-primary)) !important;
+  color: rgb(var(--v-theme-n-primary)) !important;
+}
+
+.theme-secondary {
+  background-color: rgb(var(--v-theme-secondary)) !important;
+  color: rgb(var(--v-theme-n-secondary)) !important;
+}
+
+.theme-neutral-strong {
+  background-color: rgb(var(--v-theme-neutral-strong)) !important;
+  color: rgb(var(--v-theme-n-neutral-strong)) !important;
+}
+
+.theme-neutral {
+  background-color: rgb(var(--v-theme-neutral)) !important;
+  color: rgb(var(--v-theme-n-neutral)) !important;
+}
+
+.theme-neutral-soft {
+  background-color: rgb(var(--v-theme-neutral-soft)) !important;
+  color: rgb(var(--v-theme-n-neutral-soft)) !important;
+}
+
+.theme-danger {
+  background-color: rgb(var(--v-theme-danger)) !important;
+  color: rgb(var(--v-theme-n-danger)) !important;
+}
+
+.theme-success {
+  background-color: rgb(var(--v-theme-success)) !important;
+  color: rgb(var(--v-theme-n-success)) !important;
+}
+
+.theme-warning {
+  background-color: rgb(var(--v-theme-warning)) !important;
+  color: rgb(var(--v-theme-n-warning)) !important;
+}
+
+.theme-info {
+  background-color: rgb(var(--v-theme-info)) !important;
+  color: rgb(var(--v-theme-n-info)) !important;
+}
+
+.theme-x-create-btn {
+  background-color: rgb(var(--v-theme-x-create-btn)) !important;
+  color: rgb(var(--v-theme-n-x-create-btn)) !important;
+}

config/theme.ts

@@ -0,0 +1,130 @@
+
+interface Theme {
+    dark: boolean,
+    colors: {
+        'primary': string,
+        'n-primary': string,
+        'primary-alt': string,
+        'n-primary-alt': string,
+        'secondary': string,
+        'n-secondary': string,
+        'secondary-alt': string,
+        'n-secondary-alt': string,
+        'neutral-strong': string,
+        'n-neutral-strong': string,
+        'neutral': string,
+        'n-neutral': string,
+        'neutral-soft': string,
+        'n-neutral-soft': string,
+        'danger': string,
+        'n-danger': string,
+        'success': string,
+        'n-success': string,
+        'warning': string,
+        'n-warning': string,
+        'info': string,
+        'n-info': string,
+        'x-create-btn': string,
+        'n-x-create-btn': string
+    }
+}
+
+
+export const lightTheme: Theme = {
+    dark: false,
+    colors: {
+        /**
+         * @see Cf. doc/colors.md pour le rôle de chaque couleur
+         */
+        // Global
+        'primary': '#00ad8e',
+        'n-primary': '#ffffff',
+
+        'primary-alt': '#a9e0d6',
+        'n-primary-alt': '#777777',
+
+        'secondary': '#324150',
+        'n-secondary': '#f5f5f5',
+
+        'secondary-alt': '#2c3a48',
+        'n-secondary-alt': '#ffffff',
+
+        'neutral-strong': '#777777',
+        'n-neutral-strong': '#ecf0f5',
+
+        'neutral': '#f5f5f5',
+        'n-neutral': '#777777',
+
+        'neutral-soft': '#ecf0f5',
+        'n-neutral-soft': '#464646',
+
+        // Content
+        'danger': '#f56954',
+        'n-danger': '#ffffff',
+
+        'success': '#00a65a',
+        'n-success': '#ffffff',
+
+        'warning': '#f39c12',
+        'n-warning': '#ffffff',
+
+        'info': '#3c8dbc',
+        'n-info': '#ffffff',
+
+        // Special cases
+        // TODO: voir ceux dont on peut se passer
+        'x-create-btn': '#f39c12',
+        'n-x-create-btn': '#ffffff',
+    }
+}
+
+export const darkTheme: Theme = {
+    dark: true,
+    colors: {
+        /**
+         * @see Cf. doc/colors.md pour le rôle de chaque couleur
+         */
+        // Global
+        'primary': '#00ad8e',
+        'n-primary': '#ffffff',
+
+        'primary-alt': '#a9e0d6',
+        'n-primary-alt': '#777777',
+
+        'secondary': '#324150',
+        'n-secondary': '#f5f5f5',
+
+        'secondary-alt': '#2c3a48',
+        'n-secondary-alt': '#ffffff',
+
+        'neutral-strong': '#595959',
+        'n-neutral-strong': '#ecf0f5',
+
+        'neutral': '#777777',
+        'n-neutral': '#f5f5f5',
+
+        'neutral-soft': '#090c11',
+        'n-neutral-soft': '#cccccc',
+
+        // Content
+        'danger': '#f56954',
+        'n-danger': '#ffffff',
+
+        'success': '#00a65a',
+        'n-success': '#ffffff',
+
+        'warning': '#f39c12',
+        'n-warning': '#ffffff',
+
+        // TODO: on ne pourrait pas utiliser la couleur 'success' à la place?
+        'info': '#3c8dbc',
+        'n-info': '#ffffff',
+
+        // Special cases
+        // TODO: voir ceux dont on peut se passer
+        'x-create-btn': '#f39c12',
+        'n-x-create-btn': '#ffffff',
+    }
+}
+
+

nuxt.config.ts

@@ -66,6 +66,7 @@ export default defineNuxtConfig({
     },
     css: [
         '@/assets/css/global.scss',
+        '@/assets/css/theme.scss',
         '@/assets/css/import.scss'
     ],
     typescript: {

plugins/vuetify.ts

@@ -5,104 +5,7 @@ import { mdi } from 'vuetify/iconsets/mdi'
 import '@fortawesome/fontawesome-free/css/all.css'
 import '@mdi/font/css/materialdesignicons.css'
 import {fr} from 'vuetify/locale'
-
-const lightTheme = {
-    dark: false,
-    colors: {
-        /**
-         * @see Cf. doc/colors.md pour le rôle de chaque couleur
-         */
-        // Global
-        'primary': '#00ad8e',
-        'n-primary': '#ffffff',
-
-        'primary-alt': '#a9e0d6',
-        'n-primary-alt': '#777777',
-
-        'secondary': '#324150',
-        'n-secondary': '#f5f5f5',
-
-        'secondary-alt': '#2c3a48',
-        'n-secondary-alt': '#ffffff',
-
-        'neutral-strong': '#777777',
-        'n-neutral-strong': '#ecf0f5',
-
-        'neutral': '#f5f5f5',
-        'n-neutral': '#777777',
-
-        'neutral-soft': '#ecf0f5',
-        'n-neutral-soft': '#464646',
-
-        // Content
-        'danger': '#f56954',
-        'n-danger': '#ffffff',
-
-        'success': '#00a65a',
-        'n-success': '#ffffff',
-
-        'warning': '#f39c12',
-        'n-warning': '#ffffff',
-
-        'info': '#3c8dbc',
-        'n-info': '#ffffff',
-
-        // Special cases
-        // TODO: voir ceux dont on peut se passer
-        'x-create-btn': '#f39c12',
-        'n-x-create-btn': '#ffffff',
-    }
-}
-
-const darkTheme = {
-    dark: true,
-    colors: {
-        /**
-         * @see Cf. doc/colors.md pour le rôle de chaque couleur
-         */
-        // Global
-        'primary': '#00ad8e',
-        'n-primary': '#ffffff',
-
-        'primary-alt': '#a9e0d6',
-        'n-primary-alt': '#777777',
-
-        'secondary': '#324150',
-        'n-secondary': '#f5f5f5',
-
-        'secondary-alt': '#2c3a48',
-        'n-secondary-alt': '#ffffff',
-
-        'neutral-strong': '#595959',
-        'n-neutral-strong': '#ecf0f5',
-
-        'neutral': '#777777',
-        'n-neutral': '#f5f5f5',
-
-        'neutral-soft': '#090c11',
-        'n-neutral-soft': '#cccccc',
-
-        // Content
-        'danger': '#f56954',
-        'n-danger': '#ffffff',
-
-        'success': '#00a65a',
-        'n-success': '#ffffff',
-
-        'warning': '#f39c12',
-        'n-warning': '#ffffff',
-
-        'info': '#3c8dbc',
-        'n-info': '#ffffff',
-
-        // Special cases
-        // TODO: voir ceux dont on peut se passer
-        'x-create-btn': '#f39c12',
-        'n-x-create-btn': '#ffffff',
-    }
-}
-
-
+import { lightTheme, darkTheme } from '~/config/theme'
 
 export default defineNuxtPlugin(nuxtApp => {
     const vuetify = createVuetify({