docs(customize-theme): get theme vars (#6015)

This commit is contained in:
puxiao 2024-07-21 21:41:25 +08:00 committed by GitHub
parent 7ffeb20c73
commit f1620004f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 12 additions and 4 deletions

View File

@ -35,6 +35,10 @@ If `theme` is `undefined` it won't affect the theme of components inside.
</script>
```
## Get theme vars
Whether it's the default light theme (`lightTheme`), the modified dark theme (`darkTheme`), or the custom theme we adjusted, you can get theme variables within the scope of the theme using [useThemeVars](./theme#use-theme-vars).
## Customizing theme vars (design tokens)
No CSS (Scss, Less) needed.

View File

@ -35,6 +35,10 @@ Naive UI 通过使用 `n-config-provider` 调整主题。
</script>
```
## 获取主题变量
无论是默认的亮色主题(`lightTheme`),还是修改后的暗色主题(`darkTheme`),亦或我们通过调整得到的自定义主题,在该主题生效范围内的组件中都可以通过 [useThemeVars](./theme#use-theme-vars) 来获取主题变量。
## 调整主题变量
你不需要写任何 CSSScss、Less...)。

8
volar.d.ts vendored
View File

@ -49,6 +49,8 @@ declare module 'vue' {
NEmpty: (typeof import('naive-ui'))['NEmpty']
NEquation: (typeof import('naive-ui'))['NEquation']
NFlex: (typeof import('naive-ui'))['NFlex']
NFloatButton: (typeof import('naive-ui'))['NFloatButton']
NFloatButtonGroup: (typeof import('naive-ui'))['NFloatButtonGroup']
NForm: (typeof import('naive-ui'))['NForm']
NFormItem: (typeof import('naive-ui'))['NFormItem']
NFormItemCol: (typeof import('naive-ui'))['NFormItemCol']
@ -71,6 +73,7 @@ declare module 'vue' {
NIconWrapper: (typeof import('naive-ui'))['NIconWrapper']
NImage: (typeof import('naive-ui'))['NImage']
NImageGroup: (typeof import('naive-ui'))['NImageGroup']
NInfiniteScroll: (typeof import('naive-ui'))['NInfiniteScroll']
NInput: (typeof import('naive-ui'))['NInput']
NInputGroup: (typeof import('naive-ui'))['NInputGroup']
NInputGroupLabel: (typeof import('naive-ui'))['NInputGroupLabel']
@ -90,6 +93,7 @@ declare module 'vue' {
NMenu: (typeof import('naive-ui'))['NMenu']
NMessageProvider: (typeof import('naive-ui'))['NMessageProvider']
NModal: (typeof import('naive-ui'))['NModal']
NModalProvider: (typeof import('naive-ui'))['NModalProvider']
NNotificationProvider: (typeof import('naive-ui'))['NNotificationProvider']
NNumberAnimation: (typeof import('naive-ui'))['NNumberAnimation']
NOl: (typeof import('naive-ui'))['NOl']
@ -146,10 +150,6 @@ declare module 'vue' {
NUploadTrigger: (typeof import('naive-ui'))['NUploadTrigger']
NVirtualList: (typeof import('naive-ui'))['NVirtualList']
NWatermark: (typeof import('naive-ui'))['NWatermark']
NModalProvider: (typeof import('naive-ui'))['NModalProvider']
NFloatButton: (typeof import('naive-ui'))['NFloatButton']
NFloatButtonGroup: (typeof import('naive-ui'))['NFloatButtonGroup']
NInfiniteScroll: (typeof import('naive-ui'))['NInfiniteScroll']
}
}
export {}