京东 APP 新版订详是如何适配暗黑的

最近在做京东 APP 订单详情改版的需求，要通过 Taro 实现一码三端。所谓一码三端指的是，使用 Taro 开发一套代码，同时适配 Android、iOS 和 Harmony（鸿蒙）。改版过程中，不可避免需要适配暗黑，本篇文章主要讲述新版订详适配暗黑的大体思路。

封装自定义 hook

使用 Taro.getSystemInfo 可获取系统信息，包括主题、语言等。

import Taro from '@tarojs/taro'
import { useEffect, useState } from 'react'

export const useTheme = () => {
  const [theme, setTheme] = useState('light')

  const getSystemInfo = () => {
    // 系统信息
    Taro.getSystemInfo({
      success: function (res) {
        console.log('~~~~>获取系统信息', res, JSON.stringify(res))
        if (res.theme) setTheme(res.theme)
      },
    }).catch(err => {
      console.log('~~~~>获取系统信息异常：', err)
    })
  }

  useEffect(() => {
    getSystemInfo()
  }, [])

  return {
    theme,
  }
}

为根元素添加主题样式类

其中 theme 的可选值是 light 和 dark。

import classNames from 'classnames'
import { View } from '@hlfe/ui'

import { useTheme } from '@/hooks/useTheme'

import styles from './index.module.scss'

export default function Index() {
  const { theme } = useTheme()

  return (
    <View className={classNames(`${theme}-theme`, styles.page_container)}>
      <View>楼层一</View>
      <View>楼层二</View>
      <View>楼层三</View>
      <View>楼层四</View>
      <View>楼层五</View>
      <View>楼层六</View>
    </View>
  )
}

新建存放 CSS 变量的文件

文件一般命名为 variables.scss，假如定义一个字体颜色变量 --order-text，暗黑模式下是蓝色（#00f），亮色模式下是红色（#f00）。

/* variables.scss */
.light-theme {
    --order-text: #f00;
}

.dark-theme {
    --order-text: #00f;
}

使用 CSS 变量

主要通过 CSS 的 var 方法使用上面定义的 --order-text。

/* index.module.scss */
.page_container {
    padding: 30px;
    font-size: 20px;
    height: 100vh;
    color: var(--order-text);
}

如何调试

方法很多。

IDE 中临时修改

查看完效果，记得还原代码。

直接用硬编码修改根元素的样式类，比如要查看暗黑模式下订详的样式，可以把 theme 改成 dark。

<View className={classNames(`dark-theme`, styles.page_container)}>
    <View>楼层一</View>
    <View>楼层二</View>
    <View>楼层三</View>
    <View>楼层四</View>
    <View>楼层五</View>
    <View>楼层六</View>
</View>

控制台修改

操作简单，直接上图。

通过“渲染”面板

1. 打开 DevTools
2. 按 Esc 打开抽屉面板
3. 点击抽屉的 三个点 (⋯)
4. 选择 渲染 (Rendering)
5. 在渲染面板中找到：

• 模拟CSS媒体特性
• 勾选 prefers-color-scheme
• 选择 dark 或 light

方法不局限于上面三种，根据个人喜好选择即可。