React Native使用stitches-native实现暗黑模式的配置方法

stitches-native 本身没提供直接修改全局默认背景色的配置项，但完全不需要逐页遍历设置背景色，两种方案都可以用很低的成本实现类似iOS动态色的自动切换效果。

第一步：先补全主题的语义化色值 #

你现有的色板都是按色号规则定义的，先给两个主题加上语义化的颜色token，后续所有样式都用语义token引用，切换主题时会自动适配：

• 浅色主题的colors配置里追加：

// themeLight.colors 补充
background: '#FFFFFF', // 你当前使用的默认白色背景
textPrimary: '$grey900',
textSecondary: '$grey600',
border: '$grey300'

• 暗黑主题直接基于现有浅色板反转色阶即可，给你个适配好的参考：

const themeDark = {
  theme: {
    fonts: { inter: 'Inter', system: 'system-ui' },
    fontSizes: { 1: 14, 2: 16, 3: 18, 4: 20, 5: 24, 6: 32, 7: 36, 8: 50 },
    fontWeights: { 400: '400', 500: '500', 700: '700' },
    lineHeights: {},
    letterSpacings: {},
    colors: {
      // 蓝色系调整亮度避免暗屏下刺眼，主色适当提亮保证可读性
      blue100: '#041133',
      blue200: '#092266',
      blue300: '#0D3399',
      blue400: '#1244CC',
      blue500: '#4576FF',
      blue600: '#7399FF',
      blue700: '#DEE7FF',
      blue800: '#EFF3FF',
      blue900: '#F5F8FF',
      // 灰色系直接反转色阶
      grey100: '#222222',
      grey200: '#3E3E3E',
      grey300: '#4F4F4F',
      grey400: '#999999',
      grey500: '#B3B3B3',
      grey600: '#CDCDCD',
      grey700: '#E6E6E6',
      grey800: '#EEEEEE',
      grey900: '#F8F8F8',
      // 红色系反转+主色提亮
      red100: '#7D0000',
      red200: '#9D0000',
      red300: '#BC0000',
      red400: '#CC1010',
      red500: '#FF4444',
      red600: '#FF8282',
      red700: '#FFE4E4',
      red800: '#FFF0F0',
      red900: '#FFF5F5',
      green600: '#3AD53A',
      darkBlue: '#E6E6FF',
      // 语义化全局token
      background: '$grey100',
      textPrimary: '$grey900',
      textSecondary: '$grey600',
      border: '$grey300'
    }
  }
}

第二步：选一种全局背景实现方案 #

方案1：封装通用根容器（适配所有路由方案） #

写一个全局通用的页面根组件，所有页面统一用这个组件当最外层，一次定义全局生效：

// components/PageContainer.js
import { styled } from 'stitches-native'

const Container = styled('View', {
  flex: 1,
  backgroundColor: '$background', // 直接绑定主题背景色
})

export default function PageContainer({ children, ...rest }) {
  return <Container {...rest}>{children}</Container>
}

后续写页面只要把原来的最外层<View>换成<PageContainer>就行，之后要加全局安全区、全局内边距之类的需求，改这一个组件就全量生效。

方案2：对接路由库主题（零修改现有页面，工作量最小） #

如果你用React Navigation做页面导航，直接把主题色传给导航容器即可，连页面根组件都不用换，导航会自动给所有页面加上对应背景：

import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native'
import { useTheme } from 'stitches-native'

export default function App() {
  const { theme, isDark } = useTheme()
  const baseNavTheme = isDark ? DarkTheme : DefaultTheme
  
  return (
    <NavigationContainer
      theme={{
        ...baseNavTheme,
        colors: {
          ...baseNavTheme.colors,
          background: theme.colors.background,
          card: theme.colors.background, // 栈导航的卡片页背景同步适配
          text: theme.colors.textPrimary,
          border: theme.colors.border,
        }
      }}
    >
      {/* 你的路由配置 */}
    </NavigationContainer>
  )
}

额外提示 #

你要的类似iOS动态色的效果，stitches-native本身的主题机制就完全支持：只要你所有样式里的颜色、尺寸等可变属性都用$token名的形式引用主题里的配置，切换深浅主题时所有样式会自动更新，不需要手动写主题判断逻辑。你还可以直接对接React Native的useColorScheme钩子，实现跟随系统设置自动切换深浅主题。

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