From 303618682620f3eb609e6cff6e3e52176a2d1995 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 25 Nov 2023 21:28:41 +0100
Subject: [PATCH] theme: allow user prefered theme over admin preference and
 vice versa

---
 .eslintrc.cjs         |  1 +
 composables/states.ts | 28 ++++++++++++++++++++++++++++
 pages/edit.vue        | 11 ++++++++---
 plugins/i18n.ts       | 10 ++++++++--
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 271e5e2..e5f6408 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -18,5 +18,6 @@ module.exports = {
         singleQuote: true,
       },
     ],
+    camelcase: 'warn',
   },
 }
diff --git a/composables/states.ts b/composables/states.ts
index 68987d1..d8d85f7 100644
--- a/composables/states.ts
+++ b/composables/states.ts
@@ -43,6 +43,34 @@ export const usePreferedLocale = () => {
   })
 }
 
+// THEME
+
+const usePreferedThemeState = () =>
+  useState<string>(
+    'preferedTheme',
+    () => localStorage.getItem('preferedTheme') || 'auto',
+  )
+
+export const usePreferedTheme = async () => {
+  const preferedTheme = usePreferedThemeState()
+  const colorMode = useColorMode()
+  const settings = await useSettings()
+
+  return computed({
+    get: () => preferedTheme.value,
+    set: (value) => {
+      preferedTheme.value = value
+      localStorage.setItem('preferedTheme', value)
+
+      if (value === 'auto') {
+        value = settings.value.portal_theme
+      }
+
+      colorMode.preference = value
+    },
+  })
+}
+
 export const useRedirectUrl = () =>
   useState<string | null>('redirectUrl', () => null)
 
diff --git a/pages/edit.vue b/pages/edit.vue
index 37af591..53800d0 100644
--- a/pages/edit.vue
+++ b/pages/edit.vue
@@ -5,6 +5,8 @@ useHead({
   title: t('footerlink_edit'),
 })
 
+const settings = await useSettings()
+const preferedTheme = await usePreferedTheme()
 const preferedLocale = usePreferedLocale()
 
 const localesAsOptions = computed(() => {
@@ -24,8 +26,8 @@ const localesAsOptions = computed(() => {
   return options
 })
 
-const colorMode = useColorMode()
 const themesAsOptions = [
+  'auto',
   'system',
   'light',
   'dark',
@@ -60,7 +62,10 @@ const themesAsOptions = [
   'nord',
   'sunset',
 ].map((theme) => ({
-  text: theme.charAt(0).toUpperCase() + theme.slice(1),
+  text:
+    theme !== 'auto'
+      ? theme.charAt(0).toUpperCase() + theme.slice(1)
+      : t('automatic', { name: settings.value.portal_theme }),
   value: theme,
 }))
 </script>
@@ -113,7 +118,7 @@ const themesAsOptions = [
           <label for="theme" class="label me-3">{{ t('theme') }}</label>
           <select
             id="theme"
-            v-model="colorMode.preference"
+            v-model="preferedTheme"
             class="select select-bordered"
           >
             <option disabled selected>{{ t('theme') }}</option>
diff --git a/plugins/i18n.ts b/plugins/i18n.ts
index 55506bf..37c1181 100644
--- a/plugins/i18n.ts
+++ b/plugins/i18n.ts
@@ -1,8 +1,8 @@
 import { setLocale } from 'yup'
-import { usePreferedLocale } from '@/composables/states'
+import { usePreferedLocale, usePreferedTheme } from '@/composables/states'
 
 export default defineNuxtPlugin({
-  setup() {
+  async setup() {
     // Override default yup errors
     // https://github.com/jquense/yup/blob/master/src/locale.ts
     setLocale({
@@ -15,6 +15,12 @@ export default defineNuxtPlugin({
         min: ({ min }) => ({ key: 'v.string_too_short', values: { min } }),
       },
     })
+
+    const preferedTheme = await usePreferedTheme()
+    const colorMode = useColorMode()
+    if (preferedTheme.value !== 'auto') {
+      colorMode.preference = preferedTheme.value
+    }
   },
   hooks: {
     'app:created'() {