set settings

Author: fatfingers23

app/composables/useSettings.ts

@@ -5,6 +5,7 @@ import { BACKGROUND_THEMES } from '#shared/utils/constants'
 import type { AccentColorId, BackgroundThemeId, AppSettings } from '#shared/schemas/app-settings'
 
 const DEFAULT_SETTINGS: AppSettings = {
+  theme: 'system',
   relativeDates: false,
   includeTypesInInstall: true,
   accentColorId: null,
@@ -116,7 +117,6 @@ export function useBackgroundTheme() {
       document.documentElement.removeAttribute('data-bg-theme')
     }
     settings.value.preferredBackgroundTheme = id
-    syncSettings(settings.value)
   }
 
   return {

app/pages/settings.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const router = useRouter()
+
 const { settings } = useSettings()
 const { locale, locales, setLocale: setNuxti18nLocale } = useI18n()
 const colorMode = useColorMode()
@@ -33,6 +34,8 @@ defineOgImageComponent('Default', {
   primaryColor: '#60a5fa',
 })
 
+watch(settings.value, syncSettings)
+
 const setLocale: typeof setNuxti18nLocale = locale => {
   settings.value.selectedLocale = locale
   return setNuxti18nLocale(locale)
@@ -78,14 +81,14 @@ const setLocale: typeof setNuxti18nLocale = locale => {
               </label>
               <select
                 id="theme-select"
-                :value="colorMode.preference"
                 class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
                 @change="
                   colorMode.preference = ($event.target as HTMLSelectElement).value as
                     | 'light'
                     | 'dark'
                     | 'system'
                 "
+                v-model="settings.theme"
               >
                 <option value="system">
                   {{ $t('settings.theme_system') }}

shared/schemas/app-settings.ts

@@ -11,6 +11,7 @@ const backgroundThemeIds = Object.keys(BACKGROUND_THEMES) as [
 ]
 
 export const AppSettingsSchema = v.object({
+  theme: v.picklist(['light', 'dark', 'system']),
   relativeDates: v.boolean(),
   includeTypesInInstall: v.boolean(),
   accentColorId: v.nullable(v.picklist(accentColorIds)),