improve themes

assets/css/theme.scss

@@ -17,6 +17,10 @@
 .theme-neutral {
   background-color: rgb(var(--v-theme-neutral)) !important;
   color: rgb(var(--v-theme-n-neutral)) !important;
+
+  a {
+    color: rgb(var(--v-theme-nc-neutral)) !important;
+  }
 }
 
 .theme-neutral-soft {

components/Layout/SubHeader/ActivityYear.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="d-flex flex-row align-center">
+  <main class="d-flex flex-row align-center theme-neutral">
     <span v-show="mdAndUp" class="mr-2 font-weight-bold">{{ $t(label) }} : </span>
 
     <UiXeditableText
@@ -9,7 +9,7 @@
       @update="setActivityYear"
     >
       <template #xeditable.read="{inputValue}">
-        <v-icon aria-hidden="false" size="small" class="text-primary mr-1" icon="fas fa-edit" />
+        <v-icon aria-hidden="false" size="small" class="text-nc-neutral mr-1" icon="fas fa-edit" />
         <strong class="text-primary">
           {{ inputValue }}
           <span v-if="yearPlusOne">

components/Layout/SubHeader/Breadcrumbs.vue

@@ -1,6 +1,7 @@
 <template>
   <v-breadcrumbs
     :items="items"
+    class="theme-neutral"
   />
 </template>
 
@@ -43,3 +44,10 @@ const items: ComputedRef<Array<AnyJson>> = computed(() => {
   return crumbs
 })
 </script>
+
+<style scoped lang="scss">
+:deep(a.v-breadcrumbs-item--disabled) {
+  color: rgb(var(--v-theme-n-neutral)) !important;
+  opacity: 1 !important;
+}
+</style>

components/Layout/SubHeader/DataTiming.vue

@@ -1,6 +1,7 @@
 <template>
-  <main class="d-flex align-baseline">
-    <span v-show="mdAndUp" class="mr-2 text-neutral-strong font-weight-bold">{{ $t('display_data') }} : </span>
+  <main class="d-flex align-baseline theme-neutral">
+    <span v-show="mdAndUp" class="mr-2 font-weight-bold">{{ $t('display_data') }} : </span>
+
     <v-btn-toggle
       ref="toggle"
       :model-value="historicalValue"
@@ -10,14 +11,14 @@
       divider
       border
       :rounded="true"
-      class="bg-neutral toggle-btn"
+      class="toggle-btn"
       @update:modelValue="onUpdate"
     >
       <v-btn
           v-for="choice in historicalChoices"
           :value="choice"
           max-height="25"
-          :class="'font-weight-normal text-caption' + (historicalValue.includes(choice) ? ' btn-selected' : '')"
+          :class="'font-weight-normal text-caption theme-neutral-soft' + (historicalValue.includes(choice) ? ' btn-selected' : '')"
       >
         <!-- TODO: on ne devrait pas avoir besoin du if et de la classe 'btn-selected' dans v-btn, mais à l'heure
          qu'il est, le component ne fonctionne pas comme attendu. A revoir quand vuetify 3 sera plus stable -->

components/Layout/SubHeader/DataTimingRange.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="d-flex align-center data-timing-range">
+  <main class="d-flex align-center data-timing-range theme-neutral">
     <div v-if="show" class="d-flex align-center" style="max-height: 100%">
       <span class="pl-2 mr-2 font-weight-bold">
         {{ $t('period_choose') }}
@@ -18,7 +18,7 @@
 
     <v-btn
         ref="btn"
-        class="time-btn ml-1"
+        class="time-btn ml-1 theme-neutral-soft"
         height="22" min-height="22" max-height="22"
         width="25" min-width="25" max-width="25"
         elevation="0"

components/Layout/SubHeader/PersonnalizedList.vue

@@ -1,8 +1,8 @@
 <template>
-  <main>
+  <main class="theme-neutral">
     <span
         ref="btn"
-        class="text-primary"
+        class="text-nc-neutral"
         style="cursor: pointer;"
     >
       {{ $t('my_list') }}

components/Layout/Subheader.vue

@@ -8,11 +8,12 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
     <v-card
       class="d-md-flex theme-neutral text-body-2 px-2"
       flat
+      rounded="0"
     >
       <LayoutSubHeaderBreadcrumbs v-if="mdAndUp" class="mr-auto d-flex" />
 
       <v-card
-        class="d-md-flex pt-2 mr-6 align-baseline"
+        class="d-md-flex pt-2 mr-6 align-baseline theme-neutral"
         flat
         tile
       >
@@ -50,12 +51,10 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
 <style scoped lang="scss">
 
 main {
-  color: rgb(var(--v-theme-neutral-strong));
   font-size: 12px;
 }
 
 .v-card {
-  max-height: 33px;
-  background: transparent;
+  max-height: 36px;
 }
 </style>

components/Ui/ExpansionPanel.vue

@@ -36,20 +36,18 @@ const props = defineProps({
 </script>
 
 <style scoped>
-  .icon{
+  .icon {
     width: 47px;
     height: 47px;
     padding: 10px;
     margin-right: 10px;
     flex: none !important;
   }
-  .v-expansion-panel-header{
+  
+  .v-expansion-panel-header {
     padding: 0;
     padding-right: 20px;
   }
-  .v-expansion-panel--active > .v-expansion-panel-header{
-    min-height: 47px;
-  }
 
   .v-expansion-panel-title {
     padding-left: 0;
@@ -59,6 +57,10 @@ const props = defineProps({
     min-height: 47px;
   }
 
+  .v-expansion-panel--active > .v-expansion-panel-title {
+    min-height: 47px !important;
+  }
+
   :deep(.v-expansion-panel-title__icon > .v-icon) {
     font-size: 16px;
   }

config/theme.ts

@@ -14,6 +14,7 @@ interface Theme {
         'n-neutral-strong': string,
         'neutral': string,
         'n-neutral': string,
+        'nc-neutral': string,
         'neutral-soft': string,
         'n-neutral-soft': string,
         'danger': string,
@@ -52,8 +53,9 @@ export const lightTheme: Theme = {
         'neutral-strong': '#777777',
         'n-neutral-strong': '#ecf0f5',
 
-        'neutral': '#f5f5f5',
-        'n-neutral': '#777777',
+        'neutral': '#e6e6e6',
+        'n-neutral': '#666666',
+        'nc-neutral': '#00ad8e',
 
         'neutral-soft': '#ecf0f5',
         'n-neutral-soft': '#464646',
@@ -100,8 +102,9 @@ export const darkTheme: Theme = {
         'neutral-strong': '#595959',
         'n-neutral-strong': '#ecf0f5',
 
-        'neutral': '#777777',
+        'neutral': '#324150',
         'n-neutral': '#f5f5f5',
+        'nc-neutral': '#a9e0d6',
 
         'neutral-soft': '#090c11',
         'n-neutral-soft': '#cccccc',