refactor(Settings): use switch for Dark mode (instead of btn) (#1027)

openfoodfacts · Nov 11, 2024 · 4e8d8a7 · 4e8d8a7
1 parent 831db75
commit 4e8d8a7
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 20 deletions.
diff --git a/src/constants.js b/src/constants.js
@@ -25,6 +25,9 @@ export default {
   APP_DUMP_PROOFS_URL: `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/data/proofs.jsonl.gz`,
   APP_DUMP_LOCATIONS_URL: `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/data/locations.jsonl.gz`,
   APP_GITHUB_FRONTEND_URL: 'https://github.com/openfoodfacts/open-prices-frontend',
+  THEME_LIGHT_ICON: 'mdi-white-balance-sunny',
+  THEME_DARK_ICON: 'mdi-moon-waning-crescent',
+  // OFF
   OFF_NAME: OFF_NAME,
   OFF_URL: 'https://world.openfoodfacts.org',
   OFF_CONTACT_EMAIL: '[email protected]',
@@ -141,6 +144,7 @@ export default {
   DATE_FULL_REGEX_MATCH: /(\d{4})-(\d{2})-(\d{2})/,
   DATE_YEAR_MONTH_REGEX_MATCH: /(\d{4})-(\d{2})/,
   DATE_YEAR_REGEX_MATCH: /(\d{4})/,
+  // OSM
   OSM_NAME: OSM_NAME,
   OSM_URL: 'https://www.openstreetmap.org',
   OSM_NOMINATIM_SEARCH_URL: 'https://nominatim.openstreetmap.org/search',

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -252,6 +252,9 @@
 		"TaglineAlt2": "The open crowdsourced database of food and product prices",
 		"TaglineAlt3": "Prices should be free",
 		"Thanks": "Thanks",
+		"Theme": "Theme",
+		"ThemeLight": "Light",
+		"ThemeDark": "Dark",
 		"TopContributors": "Top contributors",
 		"TopLocations": "Top locations",
 		"TopProducts": "Top products",

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -4,9 +4,31 @@
       <v-card :title="$t('UserSettings.DisplayTitle')" prepend-icon="mdi-laptop">
         <v-divider />
         <v-card-text>
-          <v-btn :prepend-icon="preferedThemeInfo.icon" @click="swapTheme">
-            {{ $t(preferedThemeInfo.label) }}
-          </v-btn>
+          <!-- Theme -->
+          <h3 class="mb-1">
+            {{ $t('Common.Theme') }}
+          </h3>
+          <v-switch
+            v-model="appStore.user.preferedTheme"
+            color="success"
+            false-value="light"
+            true-value="dark"
+            density="compact"
+            hide-details="auto"
+          >
+            <template #prepend>
+              <v-icon :icon="getThemeInfo('light').icon" />
+              <v-label>
+                {{ getThemeInfo('light').label }}
+              </v-label>
+            </template>
+            <template #label>
+              <v-label style="padding-inline-end:10px">
+                {{ getThemeInfo('dark').label }}
+              </v-label>
+              <v-icon :icon="getThemeInfo('dark').icon" />
+            </template>
+          </v-switch>
           <!-- Country -->
           <h3 class="mt-4 mb-1">
             {{ $t('Common.Country') }}
@@ -122,18 +144,6 @@ export default {
   },
   computed: {
     ...mapStores(useAppStore),
-    preferedThemeInfo() {
-      if (this.theme.global.name === 'light') {
-        return {
-          icon: 'mdi-white-balance-sunny',
-          label: 'Theme.LightMode' 
-        }
-      }
-      return {
-        icon: 'mdi-moon-waning-crescent',
-        label: 'Theme.DarkMode' 
-      }
-    },
     currencyList() {
       return [...new Set(this.countryList
         .map(country => country.currency)
@@ -144,14 +154,24 @@ export default {
   watch: {
     'appStore.user.language': function (newLanguage, oldLanguage) {  // eslint-disable-line no-unused-vars
       localeManager.changeLanguage(newLanguage)
+    },
+    'appStore.user.preferedTheme': function (newTheme, oldTheme) {  // eslint-disable-line no-unused-vars
+      this.theme.global.name = newTheme
     }
   },
   methods: {
-    swapTheme() {
-      const newTheme = this.theme.global.name === 'light' ? 'dark' : 'light'
-      this.appStore.user.preferedTheme = newTheme
-      this.theme.global.name = newTheme
+    getThemeInfo(themeName) {
+      if (themeName === 'light') {
+        return {
+          icon: constants.THEME_LIGHT_ICON,
+          label: this.$t('Common.ThemeLight')
+        }
+      }
+      return {
+        icon: constants.THEME_DARK_ICON,
+        label: this.$t('Common.ThemeDark')
+      }
     }
-  }
+  },
 }
 </script>