docs(theme): fix framework-only usage

This commit is contained in:
Benjamin Canac
2024-11-27 15:55:30 +01:00
parent 9a17f90985
commit cd7ab3b2b9

View File

@@ -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.
::