blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

style(Tabbar): adjust text color

Browse Source
This commit is contained in:
chenjiahan 2022-01-27 11:19:32 +08:00
parent 8e98e97449
commit 39b51d5dae
6 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/vant-cli/site/common/iframe-sync.js
View File

@ -75,7 +75,16 @@ export function syncThemeToChild(theme) {
}
export function getDefaultTheme() {
return window.localStorage.getItem('vantTheme') || 'light';
const cache = window.localStorage.getItem('vantTheme');
if (cache) {
return cache;
}
const useDark =
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
return useDark ? 'dark' : 'light';
}
export function useCurrentTheme() {

1
packages/vant/docs/markdown/changelog-v4.zh-CN.md
View File

@ -30,3 +30,4 @@
- Button: 默认按钮的边框颜色调整为 `--van-gray-4`
- Button: 调整 `font-smoothing`，默认使用粗体文字
- Field: 调整 `--van-field-label-color` 变量的默认值为 `--van-text-color`
- Tabbar: 调整 `--van-tabbar-item-text-color` 变量的默认值为 `--van-text-color`

2
packages/vant/src/tabbar-item/index.less
View File

@ -1,6 +1,6 @@
body {
--van-tabbar-item-font-size: var(--van-font-size-sm);
--van-tabbar-item-text-color: var(--van-gray-7);
--van-tabbar-item-text-color: var(--van-text-color);
--van-tabbar-item-active-color: var(--van-primary-color);
--van-tabbar-item-active-background: var(--van-background-2);
--van-tabbar-item-line-height: 1;

4
packages/vant/src/tabbar/README.md
View File

@ -112,7 +112,7 @@ export default {
### Custom Color
```html
<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
<van-tabbar v-model="active" active-color="#ee0a24">
<van-tabbar-item icon="home-o">Tab</van-tabbar-item>
<van-tabbar-item icon="search">Tab</van-tabbar-item>
<van-tabbar-item icon="friends-o">Tab</van-tabbar-item>
@ -221,7 +221,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-tabbar-z-index | _1_ | - |
| --van-tabbar-background | _var(--van-background-2)_ | - |
| --van-tabbar-item-font-size | _var(--van-font-size-sm)_ | - |
| --van-tabbar-item-text-color | _var(--van-gray-7)_ | - |
| --van-tabbar-item-text-color | _var(--van-text-color)_ | - |
| --van-tabbar-item-active-color | _var(--van-primary-color)_ | - |
| --van-tabbar-item-active-background | _var(--van-background-2)_ | - |
| --van-tabbar-item-line-height | _1_ | - |

4
packages/vant/src/tabbar/README.zh-CN.md
View File

@ -120,7 +120,7 @@ export default {
通过 `active-color` 属性设置选中标签的颜色，通过 `inactive-color` 属性设置未选中标签的颜色。
```html
<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
<van-tabbar v-model="active" active-color="#ee0a24">
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
@ -233,7 +233,7 @@ import type { TabbarProps, TabbarItemProps } from 'vant';
| --van-tabbar-z-index | _1_ | - |
| --van-tabbar-background | _var(--van-background-2)_ | - |
| --van-tabbar-item-font-size | _var(--van-font-size-sm)_ | - |
| --van-tabbar-item-text-color | _var(--van-gray-7)_ | - |
| --van-tabbar-item-text-color | _var(--van-text-color)_ | - |
| --van-tabbar-item-active-color | _var(--van-primary-color)_ | - |
| --van-tabbar-item-active-background | _var(--van-background-2)_ | - |
| --van-tabbar-item-line-height | _1_ | - |

2
packages/vant/src/tabbar/demo/index.vue
View File

@ -93,7 +93,7 @@ const onChange = (index: number) => {
</demo-block>
<demo-block :title="t('customColor')">
<van-tabbar v-model="active4" active-color="#ee0a24" inactive-color="#000">
<van-tabbar v-model="active4" active-color="#ee0a24">
<van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>