fix: revert all changes to accent color modules

Author: serhalp

app/components/Settings/AccentColorPicker.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { useAccentColor } from '~/composables/useSettings'
 
-const { accentColors, selectedAccentColorOptionId, setAccentColor } = useAccentColor()
+const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 
 onPrehydrate(el => {
   const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
   // Hardcoded — onPrehydrate is serialized into a <script> tag and cannot reference imports
   const defaultId = 'sky'
-  const id = settings.accentColorId ?? defaultId
+  const id = settings.accentColorId
   if (id) {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
     if (input) {
@@ -43,7 +43,7 @@ onPrehydrate(el => {
         name="accent-color"
         class="sr-only"
         :value="color.id"
-        :checked="selectedAccentColorOptionId === color.id"
+        :checked="selectedAccentColor === color.id || (!selectedAccentColor && color.id === 'sky')"
         :aria-label="color.label"
         @change="setAccentColor(color.id)"
       />

app/components/Settings/BgThemePicker.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-const { backgroundThemes, selectedBackgroundThemeOptionId, setBackgroundTheme } =
-  useBackgroundTheme()
+const { backgroundThemes, selectedBackgroundTheme, setBackgroundTheme } = useBackgroundTheme()
 
 onPrehydrate(el => {
   const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
   // Hardcoded — onPrehydrate is serialized into a <script> tag and cannot reference imports
   const defaultId = 'neutral'
-  const id = settings.preferredBackgroundTheme ?? defaultId
+  const id = settings.preferredBackgroundTheme
   if (id) {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
     if (input) {
@@ -41,7 +40,10 @@ onPrehydrate(el => {
         name="background-theme"
         class="sr-only"
         :value="theme.id"
-        :checked="selectedBackgroundThemeOptionId === theme.id"
+        :checked="
+          selectedBackgroundTheme === theme.id ||
+          (!selectedBackgroundTheme && theme.id === 'neutral')
+        "
         :aria-label="theme.label"
         @change="setBackgroundTheme(theme.id)"
       />

app/composables/useCommandPaletteGlobalCommands.ts

@@ -73,9 +73,8 @@ export function useCommandPaletteGlobalCommands() {
   const { locale, locales, setLocale, t } = useI18n()
   const route = useRoute()
   const colorMode = useColorMode()
-  const { accentColors, selectedAccentColorOptionId, setAccentColor } = useAccentColor()
-  const { backgroundThemes, selectedBackgroundThemeOptionId, setBackgroundTheme } =
-    useBackgroundTheme()
+  const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
+  const { backgroundThemes, selectedBackgroundTheme, setBackgroundTheme } = useBackgroundTheme()
   const connectorModal = useModal('connector-modal')
   const authModal = useModal('auth-modal')
   const keyboardShortcutsModal = useModal('keyboard-shortcuts-modal')
@@ -108,28 +107,25 @@ export function useCommandPaletteGlobalCommands() {
     return typeof current === 'string' ? current : (current.name ?? current.code)
   })
   const currentAccentColorLabel = computed(() => {
-    const activeAccentColorId = selectedAccentColorOptionId.value
-    const activeAccentColor = accentColors.value.find(color => color.id === activeAccentColorId)
-
-    if (!activeAccentColor) return activeAccentColorId
-    return activeAccentColor.id === 'neutral'
-      ? t('settings.accent_colors.neutral')
-      : activeAccentColor.label
+    const id = selectedAccentColor.value
+    if (!id) return t('settings.accent_colors.neutral')
+    const color = accentColors.value.find(c => c.id === id)
+    return color?.label ?? id
   })
   const currentAccentColorPreview = computed(() => {
-    const activeAccentColorId = selectedAccentColorOptionId.value
-    return accentColors.value.find(color => color.id === activeAccentColorId)?.value ?? null
+    const id = selectedAccentColor.value
+    if (!id) return null
+    return accentColors.value.find(c => c.id === id)?.value ?? null
   })
   const currentBackgroundThemeLabel = computed(() => {
-    const activeBackgroundThemeId = selectedBackgroundThemeOptionId.value
-    return (
-      backgroundThemes.value.find(theme => theme.id === activeBackgroundThemeId)?.label ??
-      activeBackgroundThemeId
-    )
+    const id = selectedBackgroundTheme.value
+    if (!id) return t('settings.background_themes.neutral')
+    return backgroundThemes.value.find(t => t.id === id)?.label ?? id
   })
   const currentBackgroundThemePreview = computed(() => {
-    const activeBackgroundThemeId = selectedBackgroundThemeOptionId.value
-    return backgroundThemes.value.find(theme => theme.id === activeBackgroundThemeId)?.value ?? null
+    const id = selectedBackgroundTheme.value
+    if (!id) return null
+    return backgroundThemes.value.find(t => t.id === id)?.value ?? null
   })
   const localeCommands = computed<CommandPaletteCommand[]>(() =>
     locales.value.map(entry => {
@@ -159,7 +155,7 @@ export function useCommandPaletteGlobalCommands() {
     }),
   )
   const accentColorCommands = computed<CommandPaletteCommand[]>(() => {
-    const activeAccentColorId = selectedAccentColorOptionId.value
+    const activeId = selectedAccentColor.value
 
     return accentColors.value.map(color => ({
       id: `accent-color:${color.id}`,
@@ -168,11 +164,13 @@ export function useCommandPaletteGlobalCommands() {
       keywords: [color.label, color.id, t('settings.accent_colors.label'), t('settings.theme')],
       iconClass: 'i-lucide:palette',
       previewColor: color.value,
-      active: color.id === activeAccentColorId,
-      activeLabel: color.id === activeAccentColorId ? t('command_palette.current') : null,
+      active: color.id === 'neutral' ? !activeId : color.id === activeId,
+      activeLabel: (color.id === 'neutral' ? !activeId : color.id === activeId)
+        ? t('command_palette.current')
+        : null,
       action: runThenAnnounce(
         () => {
-          setAccentColor(color.id)
+          setAccentColor(color.id === 'neutral' ? null : color.id)
         },
         () =>
           t('command_palette.announcements.accent_color_changed', {
@@ -182,7 +180,7 @@ export function useCommandPaletteGlobalCommands() {
     }))
   })
   const backgroundThemeCommands = computed<CommandPaletteCommand[]>(() => {
-    const activeBackgroundThemeId = selectedBackgroundThemeOptionId.value
+    const activeId = selectedBackgroundTheme.value
 
     return backgroundThemes.value.map(theme => ({
       id: `background-theme:${theme.id}`,
@@ -191,8 +189,10 @@ export function useCommandPaletteGlobalCommands() {
       keywords: [theme.label, theme.id, t('settings.background_themes.label'), t('settings.theme')],
       iconClass: 'i-lucide:swatch-book',
       previewColor: theme.value,
-      active: theme.id === activeBackgroundThemeId,
-      activeLabel: theme.id === activeBackgroundThemeId ? t('command_palette.current') : null,
+      active: theme.id === 'neutral' ? !activeId : theme.id === activeId,
+      activeLabel: (theme.id === 'neutral' ? !activeId : theme.id === activeId)
+        ? t('command_palette.current')
+        : null,
       action: runThenAnnounce(
         () => {
           setBackgroundTheme(theme.id)

app/composables/useSettings.ts

@@ -76,12 +76,6 @@ const DEFAULT_SETTINGS: AppSettings = {
   },
 }
 
-export const DEFAULT_ACCENT_COLOR_ID = DEFAULT_SETTINGS.accentColorId
-export const DEFAULT_BACKGROUND_THEME_ID = DEFAULT_SETTINGS.preferredBackgroundTheme
-export const DEFAULT_ACCENT_COLOR_OPTION_ID: AccentColorId = DEFAULT_ACCENT_COLOR_ID ?? 'sky'
-export const DEFAULT_BACKGROUND_THEME_OPTION_ID: BackgroundThemeId =
-  DEFAULT_BACKGROUND_THEME_ID ?? 'neutral'
-
 const STORAGE_KEY = 'npmx-settings'
 
 // Shared settings instance (singleton per app)
@@ -167,22 +161,17 @@ export function useAccentColor() {
   })
 
   function setAccentColor(id: AccentColorId | null) {
-    const accentColorId = id === 'neutral' ? DEFAULT_ACCENT_COLOR_ID : id
-
-    if (accentColorId) {
-      document.documentElement.style.setProperty('--accent-color', `var(--swatch-${accentColorId})`)
+    if (id) {
+      document.documentElement.style.setProperty('--accent-color', `var(--swatch-${id})`)
     } else {
       document.documentElement.style.removeProperty('--accent-color')
     }
-    settings.value.accentColorId = accentColorId
+    settings.value.accentColorId = id
   }
 
   return {
     accentColors,
     selectedAccentColor: computed(() => settings.value.accentColorId),
-    selectedAccentColorOptionId: computed(
-      () => settings.value.accentColorId ?? DEFAULT_ACCENT_COLOR_OPTION_ID,
-    ),
     setAccentColor,
   }
 }
@@ -246,9 +235,6 @@ export function useBackgroundTheme() {
   return {
     backgroundThemes,
     selectedBackgroundTheme: computed(() => settings.value.preferredBackgroundTheme),
-    selectedBackgroundThemeOptionId: computed(
-      () => settings.value.preferredBackgroundTheme ?? DEFAULT_BACKGROUND_THEME_OPTION_ID,
-    ),
     setBackgroundTheme,
   }
 }

test/nuxt/composables/use-command-palette-commands.spec.ts

@@ -164,7 +164,9 @@ describe('useCommandPaletteCommands', () => {
     expect(flatCommands.value.find(command => command.id === 'settings')?.label).toBe('settings')
     expect(flatCommands.value.find(command => command.id === 'theme-system')?.active).toBe(true)
     expect(flatCommands.value.find(command => command.id === 'theme-dark')).toBeTruthy()
-    expect(flatCommands.value.find(command => command.id === 'accent-colors')?.badge).toBe('Sky')
+    expect(flatCommands.value.find(command => command.id === 'accent-colors')?.badge).toBe(
+      'Neutral',
+    )
     expect(flatCommands.value.find(command => command.id === 'background-themes')?.badge).toBe(
       'Neutral',
     )
@@ -439,7 +441,9 @@ describe('useCommandPaletteCommands', () => {
     })
 
     expect(groupedCommands.value.map(group => group.id)).toEqual(['settings'])
-    expect(flatCommands.value.find(command => command.id === 'accent-color:sky')?.active).toBe(true)
+    expect(flatCommands.value.find(command => command.id === 'accent-color:neutral')?.active).toBe(
+      true,
+    )
     expect(flatCommands.value.find(command => command.id === 'accent-color:coral')).toBeTruthy()
 
     wrapper.unmount()