Skip to content

Commit ca19f70

Browse files
committedSep 21, 2024
docs(theme): add docs for functional theme
1 parent 7ef63d9 commit ca19f70

File tree

2 files changed

+103
-2
lines changed

2 files changed

+103
-2
lines changed
 

‎packages/docs/guide/advances/theming.md

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ outline: deep
88
to all its descendant Vue components via props. All styled components within the render tree will have access to the
99
provided theme.
1010

11-
## Basic Theming
11+
## Basic
1212

1313
The `ThemeProvider` wraps its children components and passes a theme object to them. All styled components within
1414
the `ThemeProvider`'s scope can access this theme object.
@@ -45,7 +45,7 @@ const StyledLink = styled.a`
4545

4646
In this example, the `StyledLink` component uses the primary color from the provided theme.
4747

48-
## Reactive Theming
48+
## Reactive
4949

5050
You can also make your theme reactive by using Vue's reactivity system. This allows you to dynamically change the theme
5151
and see the updates reflected in your styled components.
@@ -98,7 +98,57 @@ const changeTheme = () => {
9898
</ThemeProvider>
9999
</template>
100100
```
101+
:::
102+
103+
## Functional Theme
104+
105+
You may need to use functional themes, instead of object themes. For example, you may need to reverse colors, or change the color based on other conditions.
106+
107+
:::demo
108+
```vue
109+
<script setup lang="ts">
110+
import styled, { ThemeProvider } from '@vue-styled-components/core'
111+
import { reactive } from 'vue'
112+
113+
const StyledThemeProvider = styled(ThemeProvider)`
114+
display: flex;
115+
gap: 8px;
116+
`
117+
118+
const Button = styled.button`
119+
padding: 4px 12px;
120+
border-radius: 16px;
121+
color: ${(props) => props.theme.fg};
122+
background: ${(props) => props.theme.bg};
123+
`
124+
125+
const ActionButton = styled(Button)`
126+
color: black;
127+
background: skyblue
128+
`
129+
130+
const theme = reactive({
131+
fg: '#eee',
132+
bg: 'black',
133+
})
134+
135+
const inverse = () => {
136+
Object.assign(theme, { bg: theme.fg, fg: theme.bg })
137+
}
138+
</script>
101139
140+
<template>
141+
<StyledThemeProvider :theme="theme">
142+
<Button>Normal Button</Button>
143+
<ThemeProvider
144+
:theme="(t) => ({ fg: t.bg, bg: t.fg })"
145+
>
146+
<Button>Inversed Button</Button>
147+
</ThemeProvider>
148+
<ActionButton @click="inverse">Inverse</ActionButton>
149+
</StyledThemeProvider>
150+
</template>
151+
```
102152
:::
103153

104154
## Using Theme in Non-Styled Components

‎packages/docs/zh/guide/advances/theming.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,57 @@ const changeTheme = () => {
9797

9898
:::
9999

100+
## 函数式主题
101+
102+
在某些情况下,您可能需要使用函数主题,而不是对象主题。例如,您可能需要反转颜色,或者根据其他条件动态更改颜色。
103+
104+
:::demo
105+
```vue
106+
<script setup lang="ts">
107+
import styled, { ThemeProvider } from '@vue-styled-components/core'
108+
import { reactive } from 'vue'
109+
110+
const StyledThemeProvider = styled(ThemeProvider)`
111+
display: flex;
112+
gap: 8px;
113+
`
114+
115+
const Button = styled.button`
116+
padding: 4px 12px;
117+
border-radius: 16px;
118+
color: ${(props) => props.theme.fg};
119+
background: ${(props) => props.theme.bg};
120+
`
121+
122+
const ActionButton = styled(Button)`
123+
color: black;
124+
background: skyblue
125+
`
126+
127+
const theme = reactive({
128+
fg: '#eee',
129+
bg: 'black',
130+
})
131+
132+
const inverse = () => {
133+
Object.assign(theme, { bg: theme.fg, fg: theme.bg })
134+
}
135+
</script>
136+
137+
<template>
138+
<StyledThemeProvider :theme="theme">
139+
<Button>Normal Button</Button>
140+
<ThemeProvider
141+
:theme="(t) => ({ fg: t.bg, bg: t.fg })"
142+
>
143+
<Button>Inversed Button</Button>
144+
</ThemeProvider>
145+
<ActionButton @click="inverse">Inverse</ActionButton>
146+
</StyledThemeProvider>
147+
</template>
148+
```
149+
:::
150+
100151
## 在非 Styled 组件中使用主题
101152

102153
通过在 `ThemeProvider` 中定义主题,您确保所有组件都可以访问相同的主题样式,从而实现全局一致的视觉外观。即使在 Vue 中的 `非Styled组件` 也可以通过注入 `$theme` 并使用主题中定义的属性来访问主题,从而为其样式设置使用主题。

0 commit comments

Comments
 (0)