refactor: use onPrehydrate for injecting accent colour var

Author: danielroe

app/app.vue

@@ -4,6 +4,9 @@ import { useEventListener } from '@vueuse/core'
 const route = useRoute()
 const router = useRouter()
 
+// Initialize accent color before hydration to prevent flash
+initAccentOnPrehydrate()
+
 const isHomepage = computed(() => route.path === '/')
 
 useHead({

app/composables/useSettings.ts

@@ -80,3 +80,27 @@ export function useAccentColor() {
     setAccentColor,
   }
 }
+
+/**
+ * Applies accent color before hydration to prevent flash of default color.
+ * Call this from app.vue to ensure accent color is applied on every page.
+ */
+export function initAccentOnPrehydrate() {
+  // Callback is stringified by Nuxt - external variables won't be available.
+  // Colors must be hardcoded since ACCENT_COLORS can't be referenced.
+  onPrehydrate(() => {
+    const colors: Record<AccentColorId, string> = {
+      rose: '#e9aeba',
+      amber: '#fbbf24',
+      emerald: '#34d399',
+      sky: '#38bdf8',
+      violet: '#a78bfa',
+      coral: '#fb7185',
+    }
+    const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+    const color = settings.accentColorId ? colors[settings.accentColorId as AccentColorId] : null
+    if (color) {
+      document.documentElement.style.setProperty('--accent-color', color)
+    }
+  })
+}

nuxt.config.ts

@@ -1,7 +1,3 @@
-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) {
@@ -50,11 +46,6 @@ export default defineNuxtConfig({
           href: '/opensearch.xml',
         },
       ],
-      script: [
-        {
-          innerHTML: accentInitScript,
-        },
-      ],
     },
   },