fix: apply accent colours via css vars (#1182)

Author: danielroe

app/assets/main.css

@@ -27,6 +27,14 @@
   --accent: var(--accent-color, oklch(1 0 0));
   --accent-muted: var(--accent-color, oklch(0.922 0 0));
 
+  /* accent colors */
+  --swatch-coral: oklch(0.704 0.177 14.75);
+  --swatch-amber: oklch(0.828 0.165 84.429);
+  --swatch-emerald: oklch(0.792 0.153 166.95);
+  --swatch-sky: oklch(0.787 0.128 230.318);
+  --swatch-violet: oklch(0.78 0.148 286.067);
+  --swatch-magenta: oklch(0.78 0.15 330);
+
   /* syntax highlighting colors */
   --syntax-fn: oklch(0.727 0.137 299.149);
   --syntax-str: oklch(0.829 0.088 252.458);
@@ -89,6 +97,14 @@
   --accent: var(--accent-color, oklch(0.145 0 0));
   --accent-muted: var(--accent-color, oklch(0.205 0 0));
 
+  /* accent colors */
+  --swatch-coral: oklch(0.7 0.19 14.75);
+  --swatch-amber: oklch(0.8 0.25 84.429);
+  --swatch-emerald: oklch(0.7 0.17 166.95);
+  --swatch-sky: oklch(0.7 0.15 230.318);
+  --swatch-violet: oklch(0.7 0.17 286.067);
+  --swatch-magenta: oklch(0.75 0.18 330);
+
   --syntax-fn: oklch(0.502 0.188 294.988);
   --syntax-str: oklch(0.425 0.152 252);
   --syntax-kw: oklch(0.588 0.193 20.469);

app/components/Settings/AccentColorPicker.vue

@@ -24,7 +24,7 @@ onPrehydrate(el => {
       v-for="color in accentColors"
       :key="color.id"
       class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
-      :style="{ backgroundColor: color.value }"
+      :style="{ backgroundColor: `var(--swatch-${color.id})` }"
     >
       <input
         type="radio"

app/composables/useSettings.ts

@@ -91,25 +91,13 @@ export function useAccentColor() {
 
   function setAccentColor(id: AccentColorId | null) {
     if (id) {
-      const isDark = colorMode.value === 'dark'
-      const color = isDark ? ACCENT_COLORS.dark[id] : ACCENT_COLORS.light[id]
-      document.documentElement.style.setProperty('--accent-color', color)
+      document.documentElement.style.setProperty('--accent-color', `var(--swatch-${id})`)
     } else {
       document.documentElement.style.removeProperty('--accent-color')
     }
     settings.value.accentColorId = id
   }
 
-  // Update accent color when color mode changes
-  watch(
-    () => colorMode.value,
-    () => {
-      if (settings.value.accentColorId) {
-        setAccentColor(settings.value.accentColorId)
-      }
-    },
-  )
-
   return {
     accentColors,
     selectedAccentColor: computed(() => settings.value.accentColorId),

app/utils/prehydrate.ts

@@ -1,7 +1,3 @@
-import type { ACCENT_COLORS } from '#shared/utils/constants'
-
-type AccentColorId = keyof typeof ACCENT_COLORS.light // for both themes color names are same
-
 /**
  * Initialize user preferences before hydration to prevent flash/layout shift.
  * This sets CSS custom properties and data attributes that CSS can use
@@ -13,40 +9,18 @@ export function initPreferencesOnPrehydrate() {
   // Callback is stringified by Nuxt - external variables won't be available.
   // All constants must be hardcoded inside the callback.
   onPrehydrate(() => {
-    // Accent colors - hardcoded since ACCENT_COLORS can't be referenced
-
-    const colors = {
-      light: {
-        coral: 'oklch(0.70 0.19 14.75)',
-        amber: 'oklch(0.8 0.25 84.429)',
-        emerald: 'oklch(0.70 0.17 166.95)',
-        sky: 'oklch(0.70 0.15 230.318)',
-        violet: 'oklch(0.70 0.17 286.067)',
-        magenta: 'oklch(0.75 0.18 330)',
-      },
-      dark: {
-        coral: 'oklch(0.704 0.177 14.75)',
-        amber: 'oklch(0.828 0.165 84.429)',
-        emerald: 'oklch(0.792 0.153 166.95)',
-        sky: 'oklch(0.787 0.128 230.318)',
-        violet: 'oklch(0.78 0.148 286.067)',
-        magenta: 'oklch(0.78 0.15 330)',
-      },
-    }
+    // Valid accent color IDs (must match --swatch-* variables defined in main.css)
+    const accentColorIds = new Set(['coral', 'amber', 'emerald', 'sky', 'violet', 'magenta'])
 
     // Valid package manager IDs
     const validPMs = new Set(['npm', 'pnpm', 'yarn', 'bun', 'deno', 'vlt'])
 
     // Read settings from localStorage
     const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
 
-    // Determine theme (default to 'dark')
-    const theme = document.documentElement.dataset.theme === 'light' ? 'light' : 'dark'
-
-    // Apply accent color based on theme
-    const accentColorId = settings.accentColorId as AccentColorId | undefined
-    if (accentColorId && colors[theme][accentColorId]) {
-      document.documentElement.style.setProperty('--accent-color', colors[theme][accentColorId])
+    const accentColorId = settings.accentColorId
+    if (accentColorId && accentColorIds.has(accentColorId)) {
+      document.documentElement.style.setProperty('--accent-color', `var(--swatch-${accentColorId})`)
     }
 
     // Apply background accent