docs: improve theming colors safelisting section

This commit is contained in:
Benjamin Canac
2023-06-13 15:51:05 +02:00
parent 2cfa1f8d03
commit c3f5c44461

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]
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
All the components are styled with dark mode in mind.