diff --git a/docs/app.vue b/docs/app.vue
index f5fd19e5..898918f6 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="antialiased font-sans">
+  <div>
     <nav class="u-bg-white border-b u-border-gray-200 fixed top-0 inset-x-0 z-20">
       <UContainer padded>
         <div class="flex items-center justify-between h-16">
@@ -58,6 +58,15 @@
 <script setup>
 import { UseDark } from '@vueuse/components'
 
+useMeta({
+  htmlAttrs: {
+    class: 'bg-white dark:bg-black'
+  },
+  bodyAttrs: {
+    class: 'antialiased font-sans text-gray-700 bg-gray-50 dark:bg-gray-900 dark:text-gray-200'
+  }
+})
+
 const sections = [
   { label: 'Getting Started', links: [{ label: 'Usage', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
   { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }] },
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 8657e919..ce979deb 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -12,17 +12,14 @@ export default defineNuxtConfig({
     ],
     link: [
       { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
-    ],
-    htmlAttrs: {
-      class: 'u-bg-white'
-    },
-    bodyAttrs: {
-      class: 'u-bg-gray-50 u-text-gray-700'
-    }
+    ]
   },
   buildModules: [
     module
   ],
+  components: {
+    global: true
+  },
   ui: {
     colors: {
       primary: 'blue'