feat: add prefers-color-scheme in appearance

ICIJ · Sep 25, 2024 · bca16e9 · bca16e9
1 parent 063b07d
commit bca16e9
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 26 deletions.
diff --git a/src/components/Settings/SettingsAppearance/SettingsAppearanceRadioGroup.vue b/src/components/Settings/SettingsAppearance/SettingsAppearanceRadioGroup.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 
 import SettingsAppearanceTheme from '@/components/Settings/SettingsAppearance/SettingsAppearanceTheme'
-
+defineModel({type: String, required: true})
 defineProps({
   options: { type: Array, required: true }
 })
@@ -14,7 +14,8 @@ const selected = ref('light')
   <b-form-group v-slot="{ ariaDescribedby }" class="settings-appearance-radio-group col-12 col-md-4 offset-md-4">
     <b-form-radio-group
       id="radio-group-theme"
-      v-model="selected"
+      :modelValue="modelValue"
+      @update:model-value="$emit('update:modelValue', $event)"
       class="settings-appearance-radio-group__radio-group"
       :aria-describedby="ariaDescribedby"
       name="radio-options"

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -1133,9 +1133,11 @@
     "title": {"title": "Settings"},
     "description": {"title": "Don't change these settings if you don't know what you're doing."},
     "general":{"title": "General" },
-    "appearance":{"title": "Appearance" ,
+    "appearance":
+    {
+      "title": "Appearance" ,
       "info": "Choosing the dark or the light mode can improve your visual comfort.",
-      "dismissInfo": "Got it!"
+      "dismissInfo": "Got it, don't show again!"
     },
     "document-processing":{"title": "Document Processing" },
     "batch-tasks":{"title": "Batch Tasks" },

diff --git a/src/stories/components/Settings/SettingsAppearance/SettingsAppearanceRadioGroup.stories.js b/src/stories/components/Settings/SettingsAppearance/SettingsAppearanceRadioGroup.stories.js
@@ -6,6 +6,7 @@ export default {
   tags: ['autodocs'],
   component: SettingsAppearanceRadioGroup,
   args: {
+    modelValue: 'light',
     options: [
       {
         icon: 'sun',

diff --git a/src/views/Settings/SettingsView.vue b/src/views/Settings/SettingsView.vue
@@ -28,7 +28,7 @@ const tabs = computed(() => [
           :title="tab.title"
           @click="$router.push({ name: tab.name })"
         >
-          <router-view keep-alive />
+          <router-view  />
         </tab-group-entry>
       </tab-group>
     </div>

diff --git a/src/views/Settings/SettingsViewAppearance.vue b/src/views/Settings/SettingsViewAppearance.vue
@@ -1,33 +1,65 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
-import { ref } from 'vue'
+import { ref,onBeforeMount,computed,watch } from 'vue'
 
 import SettingsAppearanceRadioGroup from '@/components/Settings/SettingsAppearance/SettingsAppearanceRadioGroup'
+import DismissableAlert from '@/components/Dismissable/DismissableAlert.vue';
 
-defineProps({
-  options: { type: Array, required: true }
+
+onBeforeMount(() => {
+  options.value = retrieveThemes()
 })
 const { t } = useI18n()
-const infoLabel = t('settings.appearance.info')
-const dismissInfoLabel = t('settings.appearance.dismissInfo')
-const show = ref(true)
-function closeAndSave() {
-  console.warn('save settings in local storage')
-  show.value = false
+const infoLabel = computed(()=>t('settings.appearance.info'))
+const dismissInfoLabel = computed(()=>t('settings.appearance.dismissInfo'))
+const DEFAULT_THEME =  window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light';
+
+const LOCAL_STORAGE_KEY = 'data-bs-theme'
+
+function getSelectedTheme(){
+  return localStorage.getItem(LOCAL_STORAGE_KEY) || DEFAULT_THEME
+}
+const selectedTheme = ref(getSelectedTheme())
+const options = ref([])
+
+function retrieveThemes(){
+  return [
+    {
+      icon: 'sun',
+      name: DEFAULT_THEME,
+      label: 'Light mode',
+      thumbnail: 'https://placehold.co/169x95'
+    },
+    {
+      icon: 'moon',
+      name: 'dark',
+      label: 'Dark mode',
+      thumbnail: 'https://placehold.co/169x95'
+    }
+  ]
+}
+
+
+const useTheme = (theme) => {
+  const app = document.getElementById('app') 
+  app.setAttribute("data-bs-theme",theme)
+}
+
+const persistSelectedTheme = (theme) => {
+  localStorage.setItem(LOCAL_STORAGE_KEY, theme)
 }
+
+watch(() => selectedTheme.value, (theme) => {
+  persistSelectedTheme(theme)
+  useTheme(theme)
+}, { immediate: true })
 </script>
 
 <template>
-  <b-alert v-model="show" variant="info" dismissible close-class="close-class" class="d-flex align-items-center gap-2">
-    {{ infoLabel }}
-    <b-button variant="outline-info" class="bg-light-subtle" @click="closeAndSave">{{
-      dismissInfoLabel
-    }}</b-button></b-alert
-  >
-  <settings-appearance-radio-group :options="options" />
+  <dismissable-alert no-icon persist name="appearance" variant="info" :infoLabel="infoLabel" :linkLabel="dismissInfoLabel">
+    {{infoLabel}}
+  </dismissable-alert>
+
+  <settings-appearance-radio-group :options="options" v-model="selectedTheme"/>
 </template>
-<style lang="scss">
-.close-class {
-  top: unset;
-}
-</style>
+