arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 11:20:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve theming colors safelisting section

Browse Source
This commit is contained in:
Benjamin Canac
2023-06-13 15:51:05 +02:00
parent 2cfa1f8d03
commit c3f5c44461
1 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/content/1.getting-started/3.theming.md
View File

@@ -55,7 +55,7 @@ export default defineAppConfig({
}) })
``` ```
This will apply the orange color when using a default `<UButton />`. You'll need to safelist this color manually in your `nuxt.config.ts` ui options as we won't be able to detect it automatically. You can do so through the `safelistColors` option. This will apply the orange color when using a default `<UButton />`. You'll need to safelist this color manually in your `nuxt.config.ts` ui options as we won't be able to detect it automatically. You can do so through the `safelistColors` option which defaults to `['primary']`.
```ts [nuxt.config.ts] ```ts [nuxt.config.ts]
export default defineNuxtConfig({ export default defineNuxtConfig({
@@ -65,6 +65,8 @@ export default defineNuxtConfig({
}) })
``` ```
This can also happen when you bind a dynamic color to a component: `<UBadge :color="color" />`, `<UAvatar :chip-color="statuses[user.status]" />`, etc. In this case, you'll need to safelist the possible color values manually as well.
## Dark mode ## Dark mode
All the components are styled with dark mode in mind. All the components are styled with dark mode in mind.