feat: ssr support for primary color

app.vue

@@ -47,10 +47,6 @@ const { data: files } = useLazyFetch<ParsedContent[]>('/api/blog.json', { defaul
 
 provide('navigation', navigation)
 provide('files', files)
-
-onMounted(() => {
-  usePrimaryColor()
-})
 </script>
 
 <template>

components/BlogArticle.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
-import { withoutTrailingSlash } from 'ufo'
-import { defu } from 'defu'
 import type { BlogArticle } from '~/types'
-import type { Badge } from '#ui/types'
 
 const props = defineProps<{
   path: string
 }>()
 
-const appConfig = useAppConfig()
 const url = useRequestURL()
 const { copy } = useCopyToClipboard()
 
-// const { data: article } = await useAsyncData(route.path, () => queryContent<BlogArticle>(route.path).findOne())
 const { data: article } = await useFetch<BlogArticle>(`/api/blog/${props.path}`)
 
 if (!article.value)
@@ -21,12 +16,6 @@ if (!article.value)
 const title = article.value.head?.title || article.value.title
 const description = article.value.head?.description || article.value.description
 
-const badge = computed(() => getBadgeProps(article.value?.badge))
-
-onMounted(() => {
-  usePrimaryColor(badge.value.color)
-})
-
 useSeoMeta({
   title,
   ogTitle: title,
@@ -51,10 +40,6 @@ useSeoMeta({
 //   })
 // }
 
-function getBadgeProps(badge: keyof typeof appConfig.app.blog.categories | Badge) {
-  return defu(badge, appConfig.app.blog.categories[badge as keyof typeof appConfig.app.blog.categories] as Badge)
-}
-
 function copyLink() {
   copy(`${url.origin}${article.value?._path}`, { title: 'In die Zwischenablage kopiert' })
 }

layouts/article.vue

@@ -26,7 +26,8 @@ const headline = computed(() => pageContent?.value?._dir ? findPageHeadline(page
 const badge = computed(() => getBadgeProps(page.category))
 
 onMounted(() => {
-  usePrimaryColor(badge.value.color)
+  appConfig.ui.primary = badge.value.color
+  window.localStorage.setItem('nuxt-ui-primary', appConfig.ui.primary)
 })
 
 useSeoMeta({

plugins/ui.ts

@@ -0,0 +1,61 @@
+import colors from '#tailwind-config/theme/colors'
+
+function hexToRgb(hex: string) {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+  hex = hex.replace(shorthandRegex, (_, r, g, b) => {
+    return r + r + g + g + b + b
+  })
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? `${Number.parseInt(result[1], 16)} ${Number.parseInt(result[2], 16)} ${Number.parseInt(result[3], 16)}`
+    : null
+}
+
+export default defineNuxtPlugin({
+  enforce: 'post',
+  setup() {
+    const appConfig = useAppConfig()
+
+    const root = computed(() => {
+      const primary: Record<string, string> | undefined = (colors as any)[appConfig.ui.primary]
+      const gray: Record<string, string> | undefined = (colors as any)[appConfig.ui.gray]
+
+      return `:root {
+        ${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join('\n')}
+        --color-primary-DEFAULT: var(--color-primary-500);
+
+        ${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join('\n')}
+        }
+
+        .dark {
+          --color-primary-DEFAULT: var(--color-primary-400);
+        }
+        `
+    })
+
+    if (import.meta.client) {
+      watch(root, () => {
+        window.localStorage.setItem('nuxt-ui-root', root.value)
+      })
+
+      appConfig.ui.primary = window.localStorage.getItem('nuxt-ui-primary') || appConfig.ui.primary
+      appConfig.ui.gray = window.localStorage.getItem('nuxt-ui-gray') || appConfig.ui.gray
+    }
+    if (import.meta.server) {
+      useHead({
+        script: [
+          {
+            innerHTML: `
+                if (localStorage.getItem('nuxt-ui-root')) {
+                  document.querySelector('style#nuxt-ui-colors').innerHTML = localStorage.getItem('nuxt-ui-root')
+                }`.replace(/\s+/g, ' '),
+            type: 'text/javascript',
+            tagPriority: -1,
+          },
+        ],
+      })
+    }
+  },
+})