From cd7ab3b2b950391bc18d1040454bb410bbf9fd40 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 27 Nov 2024 15:55:30 +0100
Subject: [PATCH] docs(theme): fix `framework-only` usage

---
 docs/content/1.getting-started/3.theme.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md
index 32dbe3f3..03e86cc3 100644
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -98,6 +98,7 @@ Nuxt UI leverages Vite config to provide customizable color aliases based on [Ta
 
 ::framework-only
 #nuxt
+::div
 You can configure these color aliases at runtime in your `app.config.ts` file under the `ui.colors` key, allowing for dynamic theme customization without requiring an application rebuild:
 
 ```ts [app.config.ts]
@@ -110,8 +111,10 @@ export default defineAppConfig({
   }
 })
 ```
+::
 
 #vue
+::div
 You can configure these color aliases at runtime in your `vite.config.ts` file under the `ui.colors` key:
 
 ```ts [vite.config.ts]
@@ -135,6 +138,8 @@ export default defineConfig({
 ```
 ::
 
+::
+
 ::note
 Try the :prose-icon{name="i-lucide-swatch-book" class="text-[var(--ui-primary)]"} theme picker in the header above to change `primary` and `neutral` colors.
 ::
@@ -584,6 +589,7 @@ You can explore the theme for each component in two ways:
 
 ::framework-only
 #nuxt
+::div
 You can override the theme of components globally inside your `app.config.ts` by using the exact same structure as the theme object.
 
 Let's say you want to change the font weight of all your buttons, you can do it like this:
@@ -599,8 +605,10 @@ export default defineAppConfig({
   }
 })
 ```
+::
 
 #vue
+::div
 You can override the theme of components globally inside your `vite.config.ts` by using the exact same structure as the theme object.
 
 Let's say you want to change the font weight of all your buttons, you can do it like this:
@@ -627,6 +635,8 @@ export default defineConfig({
 ```
 ::
 
+::
+
 ::note
 In this example, the `font-bold` class will override the default `font-medium` class on all buttons.
 ::