feat(App): Dark mode support (#921)

src/App.vue

@@ -14,16 +14,35 @@
 </template>
 
 <script>
+import { useTheme } from 'vuetify'
 import { defineComponent } from 'vue'
 import Header from './components/Header.vue'
 import Footer from './components/Footer.vue'
 import Breadcrumbs from './components/Breadcrumbs.vue';
+import { mapStores } from 'pinia'
+import { useAppStore } from './store'
 
 export default defineComponent({
   components: {
     Header,
     Footer,
     Breadcrumbs,
   },
+  data() {
+    return {
+      prefersDarkScheme: window.matchMedia('(prefers-color-scheme: dark)'),
+      theme: useTheme(),
+    }
+  },
+  computed: {
+    ...mapStores(useAppStore),
+  },
+  mounted() {
+    if (this.appStore.getUserPreferedTheme) {
+      this.theme.global.name = this.appStore.getUserPreferedTheme
+    } else {
+      this.theme.global.name = this.prefersDarkScheme.matches ? 'dark' : 'light'
+    }
+  }
 })
 </script>

src/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-footer class="bg-grey-lighten-1 py-4">
+  <v-footer class="bg-footer py-4">
     <v-row no-gutters>
       <v-col cols="12" md="6" align="center">
         <i18n-t keypath="Footer.TagLine" tag="span">
@@ -28,6 +28,9 @@
         <v-btn class="mx-2" variant="text" prepend-icon="mdi-github" :href="APP_GITHUB_FRONTEND_URL" target="_blank">
           {{ GITHUB_NAME }}
         </v-btn>
+        <v-btn class="mx-2" variant="text" :prepend-icon="themeInfo.icon" @click="swapTheme">
+          {{ $t(themeInfo.label) }}
+        </v-btn>
       </v-col>
     </v-row>
   </v-footer>
@@ -36,6 +39,9 @@
 <script>
 import { defineAsyncComponent } from 'vue'
 import constants from '../constants'
+import { useTheme } from 'vuetify'
+import { mapStores } from 'pinia'
+import { useAppStore } from '../store'
 
 export default {
   components: {
@@ -75,8 +81,31 @@ export default {
           url: constants.OPFF_URL,
           icon: constants.OPFF_ICON,
         }
-      ]
+      ],
+      theme: useTheme()
     }
   },
+  computed: {
+    ...mapStores(useAppStore),
+    themeInfo() {
+      if (this.theme.global.name === "light") {
+        return {
+          icon: 'mdi-white-balance-sunny',
+          label: 'Theme.LightMode' 
+        }
+      }
+      return {
+        icon: 'mdi-moon-waning-crescent',
+        label: 'Theme.DarkMode' 
+      }
+    }
+  },
+  methods: {
+    swapTheme() {
+      const newTheme = this.theme.global.name === "light" ? 'dark' : 'light'
+      this.appStore.user.preferedTheme = newTheme
+      this.theme.global.name = newTheme
+    }
+  }
 }
 </script>

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar :elevation="1" style="background-color: rgb(242, 233, 228);">
+  <v-app-bar :elevation="1" class="bg-header">
     <v-app-bar-nav-icon @click.stop="showDrawerMenu = !showDrawerMenu" />
     <v-app-bar-title>
       <span style="cursor:pointer" @click="$router.push('/')">

src/components/LeafletMap.vue

@@ -1,6 +1,6 @@
 <template>
   <l-map ref="map" v-model:zoom="mapZoom" :center="mapCenter" :use-global-leaflet="false" @ready="initMap">
-    <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap" />
+    <l-tile-layer :url="tiles" layer-type="base" name="OpenStreetMap" :attribution="attribution" />
     <l-marker v-for="location in locations" :key="getLocationUniqueID(location)" :lat-lng="getLocationLatLng(location)">
       <l-popup>
         <h4>{{ getLocationTitle(location, true, false, false) }}</h4>
@@ -17,6 +17,7 @@
 import 'leaflet/dist/leaflet.css'
 import { LMap, LTileLayer, LMarker, LPopup } from '@vue-leaflet/vue-leaflet'
 import utils from '../utils.js'
+import { useTheme } from 'vuetify'
 
 export default {
   components: {
@@ -37,6 +38,9 @@ export default {
       mapZoom: 5,
       mapCenter: [45, 5],
       mapBounds: null,
+      theme: useTheme(),
+      tiles: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+      attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'
     }
   },
   mounted() {
@@ -49,6 +53,10 @@ export default {
         this.mapBounds = null
       }
     }
+    if (this.theme.global.name === "dark") {
+      this.tiles = "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"
+      this.attribution += ', &copy; <a href="https://carto.com/attributions">CARTO</a>'
+    }
   },
   methods: {
     initMap() {  // TODO: improve map setup

src/components/PriceChart.vue

@@ -4,6 +4,9 @@
 
 <script>
 import embed from 'vega-embed'
+import { useTheme } from 'vuetify'
+
+
 
 export default {
   props: {
@@ -12,6 +15,11 @@ export default {
       default: () => []
     }
   },
+  data() {
+    return {
+      theme: useTheme()
+    }
+  },
   computed: {
     chartMarkType() {
       return (this.priceList.length > 1) ? 'line' : 'point'
@@ -40,7 +48,7 @@ export default {
           y: {aggregate: 'mean', field: 'price', type: 'quantitative', axis: { title: this.$t('Common.Price') }},
         }
       }
-      embed('#vega-lite-chart', vlSpec, {actions: false})
+      embed('#vega-lite-chart', vlSpec, {actions: false, theme: this.theme.global.name})
     }
   }
 }

src/i18n/locales/en.json

@@ -273,6 +273,10 @@
 		"SignIn": "Sign in",
 		"SignOut": "Sign out"
 	},
+	"Theme": {
+		"LightMode": "Light mode",
+		"DarkMode": "Dark mode"
+	},
 	"Home": {
 		"AddPrice": "Add a price",
 		"LatestPrices": "Latest prices",

src/i18n/locales/fr.json

@@ -273,6 +273,10 @@
 		"SignIn": "Se connecter",
 		"SignOut": "Se déconnecter"
 	},
+	"Theme": {
+		"LightMode": "Mode clair",
+		"DarkMode": "Mode sombre"
+	},
 	"Home": {
 		"AddPrice": "Ajouter un prix",
 		"LatestPrices": "Derniers prix",

src/plugins/vuetify.js

@@ -15,4 +15,20 @@ export const vuetify = createVuetify({
       mdi,
     },
   },
+  theme: {
+    themes: {
+      light: {
+        colors: {
+          header: "rgb(242, 233, 228)",
+          footer: '#bdbdbd'
+        }
+      },
+      dark: {
+        colors: {
+          header: "#0d161b",
+          footer: '#424242'
+        }
+      },
+    },
+  },
 })

src/store.js

@@ -17,6 +17,7 @@ export const useAppStore = defineStore('app', {
       product_display_barcode: false,
       product_display_category_tag: false,
       location_display_osm_id: false,
+      preferedTheme: null
     },
   }),
   getters: {
@@ -42,6 +43,9 @@ export const useAppStore = defineStore('app', {
     },
     getUserLastCurrencyUsed: (state) => {
       return state.user.last_currency_used
+    },
+    getUserPreferedTheme: (state) => {
+      return state.user.preferedTheme
     }
   },
   actions: {
@@ -89,6 +93,9 @@ export const useAppStore = defineStore('app', {
     removeProof(proofId) {
       this.user.proofs = this.user.proofs.filter(proof => proof.id !== proofId)
       this.user.proofTotal -= 1
+    },
+    setPreferedTheme(theme) {
+      this.user.preferedTheme = theme
     }
   },
   // pinia-plugin-persistedstate

src/views/About.vue

@@ -5,7 +5,7 @@
 
   <br>
 
-  <v-sheet v-for="fieldset in fieldsetsGeneral" :id="fieldset.id" :key="fieldset.title" tag="section" class="mb-4">
+  <v-sheet v-for="fieldset in fieldsetsGeneral" :id="fieldset.id" :key="fieldset.title" tag="section" class="mb-4 bg-background">
     <i18n-t :keypath="fieldset.title" tag="h2" class="mb-1">
       <template #op_name>
         {{ APP_NAME }}
@@ -35,7 +35,7 @@
       {{ $t('Common.FrequentlyAskedQuestions') }}
     </h2>
 
-    <v-sheet v-for="fieldset in fieldsetsFAQ" :key="fieldset.title" tag="div" class="mb-2">
+    <v-sheet v-for="fieldset in fieldsetsFAQ" :key="fieldset.title" tag="div" class="mb-2 bg-background">
       <i18n-t :keypath="fieldset.title" tag="h3" class="mb-1">
         <template #op_name>
           {{ APP_NAME }}