diff --git a/apps/www/.vitepress/theme/components/CustomizerCode.vue b/apps/www/.vitepress/theme/components/CustomizerCode.vue
index 62ed8ecdc..f948cbff4 100644
--- a/apps/www/.vitepress/theme/components/CustomizerCode.vue
+++ b/apps/www/.vitepress/theme/components/CustomizerCode.vue
@@ -23,32 +23,32 @@ async function copyCode() {
   <div class="relative">
     <pre class="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 !py-0 dark:bg-zinc-900">
 <code ref="codeRef" class="relative block rounded font-mono text-sm">
-<span class="line">@layer base &#123;</span>
-  <span class="line">:root &#123;</span>
-  <span class="line">&nbsp;&nbsp;--background: {{ activeTheme?.cssVars.light.background }};</span>
-  <span class="line">&nbsp;&nbsp;--foreground: {{ activeTheme?.cssVars.light.foreground }};</span>
+<span class="line text-white">@layer base &#123;</span>
+  <span class="line text-white">:root &#123;</span>
+  <span class="line text-white">&nbsp;&nbsp;--background: {{ activeTheme?.cssVars.light.background }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--foreground: {{ activeTheme?.cssVars.light.foreground }};</span>
   <template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
-    <span class="line">--{{ prefix }}: {{ activeTheme?.cssVars.light[prefix] }};</span>
-    <span class="line">--{{ prefix }}-foreground: {{ activeTheme?.cssVars.light[ `${prefix}-foreground`] }};</span>
+    <span class="line text-white">--{{ prefix }}: {{ activeTheme?.cssVars.light[prefix] }};</span>
+    <span class="line text-white">--{{ prefix }}-foreground: {{ activeTheme?.cssVars.light[ `${prefix}-foreground`] }};</span>
   </template>
-  <span class="line">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.light.border }};</span>
-  <span class="line">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.light.input }};</span>
-  <span class="line">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.light.ring }};</span>
-  <span class="line">&nbsp;&nbsp;--radius: {{ config.radius }}rem;</span>
-  <span class="line">&#125;</span>
-  <span class="line">&nbsp;</span>
-  <span class="line">.dark &#123;</span>
-  <span class="line">&nbsp;&nbsp;--background:{{ activeTheme?.cssVars.dark.background }};</span>
-  <span class="line">&nbsp;&nbsp;--foreground:{{ activeTheme?.cssVars.dark.foreground }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.light.border }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.light.input }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.light.ring }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--radius: {{ config.radius }}rem;</span>
+  <span class="line text-white">&#125;</span>
+  <span class="line text-white">&nbsp;</span>
+  <span class="line text-white">.dark &#123;</span>
+  <span class="line text-white">&nbsp;&nbsp;--background:{{ activeTheme?.cssVars.dark.background }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--foreground:{{ activeTheme?.cssVars.dark.foreground }};</span>
   <template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
-    <span class="line">--{{ prefix }}:{{ activeTheme?.cssVars.dark[ prefix] }};</span>
-    <span class="line">--{{ prefix }}-foreground:{{ activeTheme?.cssVars.dark[ `${prefix}-foreground`] }};</span>
+    <span class="line text-white">--{{ prefix }}:{{ activeTheme?.cssVars.dark[ prefix] }};</span>
+    <span class="line text-white">--{{ prefix }}-foreground:{{ activeTheme?.cssVars.dark[ `${prefix}-foreground`] }};</span>
   </template>
-  <span class="line">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.dark.border }};</span>
-  <span class="line">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.dark.input }};</span>
-  <span class="line">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.dark.ring }};</span>
-  <span class="line">&#125;</span>
-<span class="line">&#125;</span>
+  <span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.dark.border }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.dark.input }};</span>
+  <span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.dark.ring }};</span>
+  <span class="line text-white">&#125;</span>
+<span class="line text-white">&#125;</span>
 </code>
 </pre>
     <Button size="sm" class="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground" @click="copyCode">