diff --git a/docs/plugins/ui.ts b/docs/plugins/ui.ts
index 044a1688..3dc62a62 100644
--- a/docs/plugins/ui.ts
+++ b/docs/plugins/ui.ts
@@ -3,8 +3,9 @@ import colors from '#tailwind-config/theme/colors'
 
 export default defineNuxtPlugin({
   enforce: 'post',
-  setup () {
+  setup (nuxtApp) {
     const appConfig = useAppConfig()
+    const head = nuxtApp.vueApp._context.provides.usehead
 
     const root = computed(() => {
       const primary: Record<string, string> | undefined = colors[appConfig.ui.primary]
@@ -32,7 +33,7 @@ export default defineNuxtPlugin({
       appConfig.ui.gray = window.localStorage.getItem('nuxt-ui-gray') || appConfig.ui.gray
     }
     if (process.server) {
-      useHead({
+      head.push({
         script: [
           {
             innerHTML: `
diff --git a/src/runtime/plugins/colors.ts b/src/runtime/plugins/colors.ts
index a2a52977..cfe8a5d3 100644
--- a/src/runtime/plugins/colors.ts
+++ b/src/runtime/plugins/colors.ts
@@ -3,9 +3,9 @@ import { hexToRgb } from '../utils'
 import { defineNuxtPlugin, useHead, useAppConfig, useNuxtApp } from '#imports'
 import colors from '#tailwind-config/theme/colors'
 
-export default defineNuxtPlugin(() => {
+export default defineNuxtPlugin((nuxtApp) => {
   const appConfig = useAppConfig()
-  const nuxtApp = useNuxtApp()
+  const head = nuxtApp.vueApp._context.provides.usehead
 
   const root = computed(() => {
     const primary: Record<string, string> | undefined = colors[appConfig.ui.primary]
@@ -53,5 +53,6 @@ ${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}
     }]
   }
 
-  useHead(headData)
+  // Workaround for https://github.com/nuxt/nuxt/issues/22763
+  head.push(headData)
 })