arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-28 02:40:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(theme): fix framework-only usage

Browse Source
This commit is contained in:
Benjamin Canac
2024-11-27 15:55:30 +01:00
parent 9a17f90985
commit cd7ab3b2b9
1 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/content/1.getting-started/3.theme.md
View File

@@ -98,6 +98,7 @@ Nuxt UI leverages Vite config to provide customizable color aliases based on [Ta
::framework-only ::framework-only
#nuxt #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: 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] ```ts [app.config.ts]
@@ -110,8 +111,10 @@ export default defineAppConfig({
} }
}) })
``` ```
::
#vue #vue
::div
You can configure these color aliases at runtime in your `vite.config.ts` file under the `ui.colors` key: You can configure these color aliases at runtime in your `vite.config.ts` file under the `ui.colors` key:
```ts [vite.config.ts] ```ts [vite.config.ts]
@@ -135,6 +138,8 @@ export default defineConfig({
``` ```
:: ::
::
::note ::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. 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 ::framework-only
#nuxt #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. 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: 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 #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. 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: 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 ::note
In this example, the `font-bold` class will override the default `font-medium` class on all buttons. In this example, the `font-bold` class will override the default `font-medium` class on all buttons.
:: ::