如何修改Chakra UI未选中标签页字体颜色适配明暗模式

你可以根据实际需求选择局部修改或全局配置两种实现方式，两种方案均原生支持深浅模式适配，无需额外引入第三方依赖。

方案1：单组件局部修改 #

适合仅需要调整个别页面标签样式的场景，直接给Tab组件传入状态样式即可，搭配Chakra自带的useColorModeValue钩子自动适配深浅模式：

import { Tabs, TabList, Tab, TabPanels, TabPanel, useColorModeValue } from '@chakra-ui/react'

export default function PageTabs() {
  // 浅色模式用深灰、深色模式用浅灰，保证足够的文本辨识度
  const unselectedTabColor = useColorModeValue('gray.700', 'gray.200')
  const selectedTabColor = useColorModeValue('blue.600', 'blue.300')

  return (
    <Tabs variant="line">
      <TabList>
        <Tab
          color={unselectedTabColor}
          _selected={{ color: selectedTabColor, borderColor: selectedTabColor }}
        >
          功能设置
        </Tab>
        <Tab
          color={unselectedTabColor}
          _selected={{ color: selectedTabColor, borderColor: selectedTabColor }}
        >
          权限配置
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel>功能设置面板内容</TabPanel>
        <TabPanel>权限配置面板内容</TabPanel>
      </TabPanels>
    </Tabs>
  )
}

直接调整unselectedTabColor里的两个色值，直到深色模式下的显示清晰度符合要求即可。

方案2：全局主题统一配置 #

适合项目中所有标签页都需要统一调整样式的场景，一次配置即可全局生效，不需要每个页面重复写样式。在自定义Chakra主题时重写Tabs组件的对应变体样式即可：

// src/theme/index.js
import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  components: {
    Tabs: {
      variants: {
        // 对应项目中使用的Tabs变体，默认是line，其他常用变体包括enclosed、soft-rounded等
        line: {
          tab: {
            // 浅色模式下未选中标签默认颜色
            color: 'gray.700',
            // 选中标签默认样式
            _selected: {
              color: 'blue.600',
              borderColor: 'blue.600',
            },
            // 深色模式下的样式覆盖
            _dark: {
              color: 'gray.200',
              _selected: {
                color: 'blue.300',
                borderColor: 'blue.300'
              }
            }
          }
        }
      }
    }
  }
})

export default theme

配置完成后将这个自定义主题传入项目根组件ChakraProvider的theme属性，全局所有Tabs组件就会自动应用这套样式。

深色模式下未选中标签辨识度低的核心原因，是Chakra默认主题中深色模式的未选中Tab使用了低透明度的文本色，在部分显示设备上对比度达不到可读标准，手动指定实色值即可彻底解决该问题。

内容的提问来源于stack exchange，提问作者Sami