feat: add automatic theme from browser

ICIJ · Oct 4, 2024 · e9ecf16 · e9ecf16
1 parent 0a859ff
commit e9ecf16
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 13 deletions.
diff --git a/src/composables/useTheme.js b/src/composables/useTheme.js
@@ -1,15 +1,37 @@
+import { reactive } from 'vue'
+
 import themeLight from '@/assets/images/illustrations/theme-light.png'
 import themeDark from '@/assets/images/illustrations/theme-dark.png'
+let eventAdded = false
 
 export function useTheme() {
-  const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
   const LOCAL_STORAGE_KEY = 'data-bs-theme'
-  const theme = localStorage.getItem(LOCAL_STORAGE_KEY) || preferredTheme
+  const AUTOMATIC = 'automatic'
+  function getTheme() {
+    return localStorage.getItem(LOCAL_STORAGE_KEY) ?? AUTOMATIC
+  }
+  function getAutomaticTheme() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+  if (!eventAdded) {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+      if (getTheme() === AUTOMATIC) {
+        setTheme(AUTOMATIC)
+      }
+    })
+    eventAdded = true
+  }
   function setTheme(theme) {
-    document.body?.setAttribute('data-bs-theme', theme)
+    document.body?.setAttribute('data-bs-theme', theme === AUTOMATIC ? getAutomaticTheme() : theme)
     localStorage.setItem(LOCAL_STORAGE_KEY, theme)
   }
-  const themes = [
+  const themes = reactive([
+    {
+      icon: 'paint-roller',
+      name: 'automatic',
+      label: `Automatic`,
+      thumbnail: ''
+    },
     {
       icon: 'sun',
       name: 'light',
@@ -22,6 +44,6 @@ export function useTheme() {
       label: 'Dark mode',
       thumbnail: themeDark
     }
-  ]
-  return { theme, setTheme, preferredTheme, themes }
+  ])
+  return { getTheme, setTheme, themes }
 }
diff --git a/src/core/Core.js b/src/core/Core.js
@@ -367,9 +367,8 @@ class Core extends Behaviors {
   }
 
   loadTheme() {
-    const { theme, setTheme } = useTheme()
-    console.log(theme)
-    setTheme(theme)
+    const { getTheme, setTheme } = useTheme()
+    setTheme(getTheme())
   }
   /**
    * Append the given title to the page title

diff --git a/src/views/Settings/SettingsView/SettingsViewAppearance.vue b/src/views/Settings/SettingsView/SettingsViewAppearance.vue
@@ -7,11 +7,10 @@ import SettingsViewLayout from '@/views/Settings/SettingsView/SettingsViewLayout
 import { useTheme } from '@/composables/useTheme'
 
 defineOptions({ name: 'SettingsViewAppearance' })
-const { theme, setTheme, themes } = useTheme()
+const { getTheme, setTheme, themes } = useTheme()
 const { t } = useI18n()
 const infoLabel = computed(() => t('settings.appearance.info'))
-const selectedTheme = ref(theme)
-const options = ref(themes)
+const selectedTheme = ref(getTheme())
 
 watch(
   () => selectedTheme.value,
@@ -24,6 +23,6 @@ watch(
 
 <template>
   <settings-view-layout info-name="appearance" :info-label="infoLabel">
-    <settings-appearance-radio-group v-model="selectedTheme" :options="options" />
+    <settings-appearance-radio-group v-model="selectedTheme" :options="themes" />
   </settings-view-layout>
 </template>