refactor: combine with other settings

Author: danielroe

app/components/Settings/BgThemePicker.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { useBackgroundTheme } from '~/composables/useBackgroundTheme'
-
 const { backgroundThemes, selectedBackgroundTheme, setBackgroundTheme } = useBackgroundTheme()
 
 onPrehydrate(el => {
-  const id = localStorage.getItem('npmx-background-theme')
+  const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+  const id = settings.preferredBackgroundTheme
   if (id) {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id || 'neutral'}"]`)
     if (input) {

app/composables/useBackgroundTheme.ts

@@ -2,6 +2,9 @@ import type { RemovableRef } from '@vueuse/core'
 import { useLocalStorage } from '@vueuse/core'
 import { ACCENT_COLORS } from '#shared/utils/constants'
 import type { LocaleObject } from '@nuxtjs/i18n'
+import { BACKGROUND_THEMES } from '#shared/utils/constants'
+
+type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
 
 type AccentColorId = keyof typeof ACCENT_COLORS
 
@@ -15,6 +18,8 @@ export interface AppSettings {
   includeTypesInInstall: boolean
   /** Accent color theme */
   accentColorId: AccentColorId | null
+  /** Preferred background shade */
+  preferredBackgroundTheme: BackgroundThemeId | null
   /** Hide platform-specific packages (e.g., @scope/pkg-linux-x64) from search results */
   hidePlatformPackages: boolean
   /** User-selected locale */
@@ -30,6 +35,7 @@ const DEFAULT_SETTINGS: AppSettings = {
   accentColorId: null,
   hidePlatformPackages: true,
   selectedLocale: null,
+  preferredBackgroundTheme: null,
   sidebar: {
     collapsed: [],
   },
@@ -93,3 +99,28 @@ export function useAccentColor() {
     setAccentColor,
   }
 }
+
+export function useBackgroundTheme() {
+  const backgroundThemes = Object.entries(BACKGROUND_THEMES).map(([id, value]) => ({
+    id: id as BackgroundThemeId,
+    name: id,
+    value,
+  }))
+
+  const { settings } = useSettings()
+
+  function setBackgroundTheme(id: BackgroundThemeId | null) {
+    if (id) {
+      document.documentElement.dataset.bgTheme = id
+    } else {
+      document.documentElement.removeAttribute('data-bg-theme')
+    }
+    settings.value.preferredBackgroundTheme = id
+  }
+
+  return {
+    backgroundThemes,
+    selectedBackgroundTheme: computed(() => settings.value.preferredBackgroundTheme),
+    setBackgroundTheme,
+  }
+}

app/composables/useSettings.ts

@@ -35,6 +35,12 @@ export function initPreferencesOnPrehydrate() {
       document.documentElement.style.setProperty('--accent-color', color)
     }
 
+    // Apply background accent
+    const preferredBackgroundTheme = settings.preferredBackgroundTheme
+    if (preferredBackgroundTheme) {
+      document.documentElement.dataset.bgTheme = preferredBackgroundTheme
+    }
+
     // Read and apply package manager preference
     const storedPM = localStorage.getItem('npmx-pm')
     // Parse the stored value (it's stored as a JSON string by useLocalStorage)

app/utils/prehydrate.ts

@@ -73,18 +73,6 @@ export default defineNuxtConfig({
           href: '/opensearch.xml',
         },
       ],
-      script: [
-        {
-          innerHTML: `
-            (function () {
-              const preferredBackgroundTheme = localStorage.getItem('npmx-background-theme')
-              if (preferredBackgroundTheme) {
-                document.documentElement.dataset.bgTheme = preferredBackgroundTheme
-              }
-            })()
-          `,
-        },
-      ],
     },
   },