diff --git a/packages/vant-cli/site/common/iframe-sync.js b/packages/vant-cli/site/common/iframe-sync.js
index dec1dc354..f03dd6dce 100644
--- a/packages/vant-cli/site/common/iframe-sync.js
+++ b/packages/vant-cli/site/common/iframe-sync.js
@@ -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() {
diff --git a/packages/vant/docs/markdown/changelog-v4.zh-CN.md b/packages/vant/docs/markdown/changelog-v4.zh-CN.md
index 2e3cc75a3..6c28aea07 100644
--- a/packages/vant/docs/markdown/changelog-v4.zh-CN.md
+++ b/packages/vant/docs/markdown/changelog-v4.zh-CN.md
@@ -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`
diff --git a/packages/vant/src/tabbar-item/index.less b/packages/vant/src/tabbar-item/index.less
index ede691480..52d3bc767 100644
--- a/packages/vant/src/tabbar-item/index.less
+++ b/packages/vant/src/tabbar-item/index.less
@@ -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;
diff --git a/packages/vant/src/tabbar/README.md b/packages/vant/src/tabbar/README.md
index 786b09218..c285f9b45 100644
--- a/packages/vant/src/tabbar/README.md
+++ b/packages/vant/src/tabbar/README.md
@@ -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_ | - |
diff --git a/packages/vant/src/tabbar/README.zh-CN.md b/packages/vant/src/tabbar/README.zh-CN.md
index a822a5db6..42b2a9df0 100644
--- a/packages/vant/src/tabbar/README.zh-CN.md
+++ b/packages/vant/src/tabbar/README.zh-CN.md
@@ -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_                        | -    |
diff --git a/packages/vant/src/tabbar/demo/index.vue b/packages/vant/src/tabbar/demo/index.vue
index 5b5e6e9fd..bf7aba6d2 100644
--- a/packages/vant/src/tabbar/demo/index.vue
+++ b/packages/vant/src/tabbar/demo/index.vue
@@ -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>