integrate accent color selection into app settings

Author: rshigg

app/components/AccentColorPicker.vue

@@ -1,42 +1,34 @@
 <script setup lang="ts">
-import { ACCENT_COLORS, useAccentColor, type ColorId } from '~/composables/useAccentColor'
+import { useAccentColor, type AppSettings } from '~/composables/useSettings'
 
-const { accentColorId, setAccentColor } = useAccentColor()
+const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 
 const popoverRef = ref<HTMLElement | null>(null)
 
-function selectColor(id: ColorId) {
+function applyColor(id: AppSettings['accentColorId']) {
   setAccentColor(id)
   popoverRef.value?.hidePopover()
 }
-
-function clearColor() {
-  setAccentColor(null)
-  popoverRef.value?.hidePopover()
-}
 </script>
 
 <template>
   <div class="flex items-center justify-between">
     <button
-      v-for="color in ACCENT_COLORS"
+      v-for="color in accentColors"
       :key="color.id"
       type="button"
       role="option"
-      :aria-selected="accentColorId === color.id"
+      :aria-selected="selectedAccentColor === color.id"
       :aria-label="color.name"
-      class="size-6 rounded-full transition-transform duration-150 hover:scale-110 focus-ring"
-      :class="{
-        'ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle': accentColorId === color.id,
-      }"
+      class="size-6 rounded-full transition-transform duration-150 hover:scale-110 focus-ring aria-selected:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
       :style="{ backgroundColor: color.value }"
-      @click="selectColor(color.id)"
+      @click="applyColor(color.id)"
     />
     <button
       type="button"
       aria-label="Clear accent color"
       class="size-6 rounded-full transition-transform duration-150 hover:scale-110 focus-ring flex items-center justify-center bg-accent-fallback"
-      @click="clearColor"
+      @click="applyColor(null)"
     >
       <span class="i-carbon-error size-4 text-bg" />
     </button>

app/composables/useAccentColor.ts

@@ -1,5 +1,8 @@
 import type { RemovableRef } from '@vueuse/core'
 import { useLocalStorage } from '@vueuse/core'
+import { ACCENT_COLORS } from '#shared/utils/constants'
+
+type AccentColorId = keyof typeof ACCENT_COLORS
 
 /**
  * Application settings stored in localStorage
@@ -9,11 +12,14 @@ export interface AppSettings {
   relativeDates: boolean
   /** Include @types/* package in install command for packages without built-in types */
   includeTypesInInstall: boolean
+  /** Accent color theme */
+  accentColorId: AccentColorId | null
 }
 
 const DEFAULT_SETTINGS: AppSettings = {
   relativeDates: false,
   includeTypesInInstall: true,
+  accentColorId: null,
 }
 
 const STORAGE_KEY = 'npmx-settings'
@@ -45,3 +51,32 @@ export function useRelativeDates() {
   const { settings } = useSettings()
   return computed(() => settings.value.relativeDates)
 }
+
+/**
+ * Composable for managing accent color.
+ */
+export function useAccentColor() {
+  const { settings } = useSettings()
+
+  const accentColors = Object.entries(ACCENT_COLORS).map(([id, value]) => ({
+    id: id as AccentColorId,
+    name: id,
+    value,
+  }))
+
+  function setAccentColor(id: AccentColorId | null) {
+    const color = id ? ACCENT_COLORS[id] : null
+    if (color) {
+      document.documentElement.style.setProperty('--accent-color', color)
+    } else {
+      document.documentElement.style.removeProperty('--accent-color')
+    }
+    settings.value.accentColorId = id
+  }
+
+  return {
+    accentColors,
+    selectedAccentColor: computed(() => settings.value.accentColorId),
+    setAccentColor,
+  }
+}

app/composables/useSettings.ts

@@ -1,3 +1,7 @@
+import { ACCENT_COLORS } from './shared/utils/constants'
+
+const accentInitScript = `(function(){var s=JSON.parse(localStorage.getItem('npmx-settings'));if(s&&s.accentColorId){document.documentElement.style.setProperty('--accent-color',${JSON.stringify(ACCENT_COLORS)}[s.accentColorId])}})()`
+
 export default defineNuxtConfig({
   modules: [
     function (_, nuxt) {
@@ -33,8 +37,7 @@ export default defineNuxtConfig({
       ],
       script: [
         {
-          innerHTML: `(function(){var c={rose:'#e9aeba',amber:'#fbbf24',emerald:'#34d399',sky:'#38bdf8',violet:'#a78bfa',coral:'#fb7185'};var s=localStorage.getItem('npmx-accent');document.documentElement.style.setProperty('--accent-color',s&&c[s]||'#666666')})()`,
-          type: 'text/javascript',
+          innerHTML: accentInitScript,
         },
       ],
     },

nuxt.config.ts

@@ -16,3 +16,13 @@ export const NPM_MISSING_README_SENTINEL = 'ERROR: No README data found!'
 export const ERROR_JSR_FETCH_FAILED = 'Failed to fetch package from JSR registry.'
 export const ERROR_NPM_FETCH_FAILED = 'Failed to fetch package from npm registry.'
 export const ERROR_SUGGESTIONS_FETCH_FAILED = 'Failed to fetch suggestions.'
+
+// Theming
+export const ACCENT_COLORS = {
+  rose: '#e9aeba',
+  amber: '#fbbf24',
+  emerald: '#34d399',
+  sky: '#38bdf8',
+  violet: '#a78bfa',
+  coral: '#fb7185',
+} as const

shared/utils/constants.ts

@@ -49,7 +49,6 @@ export default defineConfig({
       accent: {
         DEFAULT: 'var(--accent-color, #666666)',
         fallback: '#666666',
-        muted: '#e5e5e5',
       },
       // Syntax highlighting colors (inspired by GitHub Dark)
       syntax: {