naive-ui/demo/pages/docs/theme/enUS/provide-theme.demo.md

29 lines
496 B
Markdown
Raw Normal View History

2019-12-07 00:02:31 +08:00
# Provide Theme
2020-12-12 14:44:44 +08:00
2020-03-20 22:52:54 +08:00
Use `n-config-provider` to set the theme of all its descedant components.
2019-12-07 00:02:31 +08:00
```html
2021-02-02 13:44:57 +08:00
<n-config-provider :theme="theme">
<n-card>
2020-11-30 14:29:48 +08:00
<n-space>
<n-button @click="theme = darkTheme">Dark</n-button>
2021-02-02 12:24:48 +08:00
<n-button @click="theme = null">Light</n-button>
2020-11-30 14:29:48 +08:00
</n-space>
</n-card>
2019-12-07 00:02:31 +08:00
</n-config-provider>
```
2020-12-12 14:44:44 +08:00
2019-12-07 00:02:31 +08:00
```js
import { ref } from 'vue'
import { darkTheme } from 'naive-ui'
2019-12-07 00:02:31 +08:00
export default {
setup () {
2019-12-07 00:02:31 +08:00
return {
darkTheme,
2021-02-02 12:24:48 +08:00
theme: ref(null)
2019-12-07 00:02:31 +08:00
}
}
}
```