theme: allow user prefered theme over admin preference and vice versa

.eslintrc.cjs

@@ -18,5 +18,6 @@ module.exports = {
         singleQuote: true,
       },
     ],
+    camelcase: 'warn',
   },
 }

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)
 

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>

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'() {