feat(settings): choose theme easily

src/main/webapp/src/components/dialogs/SettingsDialog.vue

@@ -16,7 +16,8 @@
 
 <script setup lang="ts">
 import { useConfigurationStore } from '@/stores/index.ts';
-import { usePreferredDark } from '@vueuse/core';
+import { Theme } from '@/types/enums/Theme.ts';
+import { usePreferredDark, useSessionStorage } from '@vueuse/core';
 import { storeToRefs } from 'pinia';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -36,30 +37,25 @@ const modelValue = computed<boolean>({
   set() {},
 });
 
-const selected = ref<Array<string>>([]);
-
-const updateSelected = (newValue: Array<any>): void => {
-  setDarkTheme(newValue.includes('dark'));
-};
-
-const setDarkTheme = (newValue: boolean): void => {
-  theme.global.name.value = newValue ? 'dark' : 'light';
-};
+const selectedTheme = useSessionStorage<Array<Theme>>(`${__APP_SLUG__}.theme`, [Theme.system]);
 
 watch(
-  theme.global.name,
-  (newValue): void => {
-    if (newValue == 'dark') selected.value.push('dark');
-    else {
-      const index = selected.value.indexOf('dark');
-      if (index > -1) selected.value = selected.value.slice(index, 0);
+  [selectedTheme, isDark],
+  ([newAppearanceTheme, newIsDark]) => {
+    let selected = newIsDark ? Theme.dark : Theme.light;
+    switch (newAppearanceTheme[0]) {
+      case Theme.light:
+        selected = Theme.light;
+        break;
+      case Theme.dark:
+        selected = Theme.dark;
+        break;
     }
+    theme.global.name.value = selected;
   },
   { immediate: true },
 );
 
-watch(isDark, (newValue): void => setDarkTheme(newValue), { immediate: true });
-
 const onClose = (): void => {
   isSettings.value = false;
 };
@@ -80,16 +76,12 @@ const onClose = (): void => {
           />
         </template>
       </v-toolbar>
-      <v-list v-model:selected="selected" select-strategy="classic" @update:selected="updateSelected">
-        <v-list-subheader>{{ t('settings.appearance.subheader') }}</v-list-subheader>
-        <v-list-item
-          :title="t('settings.appearance.darkTheme.title')"
-          :subtitle="t('settings.appearance.darkTheme.subtitle')"
-          value="dark"
-        >
+      <v-list v-model:selected="selectedTheme" mandatory>
+        <v-list-subheader>{{ t('settings.theme.subheader') }}</v-list-subheader>
+        <v-list-item v-for="th in Theme" :key="th" :title="t(`settings.theme.${th}`)" :value="th">
           <template #prepend="{ isActive }">
             <v-list-item-action start>
-              <v-checkbox-btn :model-value="isActive" />
+              <v-radio :model-value="isActive" />
             </v-list-item-action>
           </template>
         </v-list-item>

src/main/webapp/src/locales/en/settings.json

@@ -1,11 +1,10 @@
 {
   "settings": {
-    "appearance": {
-      "subheader": "Appearance",
-      "darkTheme": {
-        "title": "Dark theme",
-        "subtitle": "Enable dark theme"
-      }
+    "theme": {
+      "subheader": "Theme",
+      "system": "Systeme",
+      "light": "Light",
+      "dark": "Dark"
     }
   }
 }

src/main/webapp/src/locales/fr/settings.json

@@ -1,11 +1,10 @@
 {
   "settings": {
-    "appearance": {
-      "subheader": "Apparence",
-      "darkTheme": {
-        "title": "Thème sombre",
-        "subtitle": "Activer le thème sombre"
-      }
+    "theme": {
+      "subheader": "Thème",
+      "system": "Système",
+      "light": "Clair",
+      "dark": "Sombre"
     }
   }
 }

src/main/webapp/src/plugins/fontawsome.ts

@@ -14,7 +14,12 @@
  * limitations under the License.
  */
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faSquare as farSquare, faStar as farStar } from '@fortawesome/free-regular-svg-icons';
+import {
+  faCircle as farCircle,
+  faDotCircle as farDotCircle,
+  faSquare as farSquare,
+  faStar as farStar,
+} from '@fortawesome/free-regular-svg-icons';
 import {
   faArrowLeft,
   faArrowRightToBracket,
@@ -49,7 +54,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import type { App } from 'vue';
 
 const register = (app: App | undefined): void => {
-  library.add(farSquare, farStar);
+  library.add(farCircle, farDotCircle, farSquare, farStar);
   library.add(
     faArrowLeft,
     faArrowRightToBracket,

src/main/webapp/src/plugins/vuetify.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import i18n from '@/plugins/i18n.ts';
+import { Theme } from '@/types/enums/Theme.ts';
 import DateFnsAdapter from '@date-io/date-fns';
 import { enUS, fr } from 'date-fns/locale';
 import { useI18n } from 'vue-i18n';
@@ -22,15 +23,16 @@ import { md3 } from 'vuetify/blueprints';
 import { aliases, fa } from 'vuetify/iconsets/fa-svg';
 import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n';
 
-const light: ThemeDefinition = {
-  dark: false,
-  colors: {
-    background: '#eeeeee',
+const themes: Record<string, ThemeDefinition> = {
+  [Theme.light]: {
+    dark: false,
+    colors: {
+      background: '#eeeeee',
+    },
+  },
+  [Theme.dark]: {
+    dark: true,
   },
-};
-
-const dark: ThemeDefinition = {
-  dark: true,
 };
 
 export default createVuetify({
@@ -43,11 +45,8 @@ export default createVuetify({
     },
   },
   theme: {
-    defaultTheme: 'light',
-    themes: {
-      light,
-      dark,
-    },
+    defaultTheme: Theme.light,
+    themes,
   },
   locale: {
     adapter: createVueI18nAdapter({ i18n, useI18n }),

src/main/webapp/src/types/enums/Theme.ts

@@ -0,0 +1,5 @@
+export enum Theme {
+  system = 'system',
+  light = 'light',
+  dark = 'dark',
+}