在 Taro 中实现系统主题适配:亮/暗模式

目录

      • 背景
      • 实现方案
        • [方案一:CSS 变量 + prefers-color-scheme 媒体查询](#方案一:CSS 变量 + prefers-color-scheme 媒体查询)
          • [什么是 prefers-color-scheme?](#什么是 prefers-color-scheme?)
          • 代码示例
        • [方案二:通过 JavaScript 监听系统主题切换](#方案二:通过 JavaScript 监听系统主题切换)

背景

用Taro开发的微信小程序,需求是页面的UI主题想要跟随手机系统的主题适配,实现亮/暗模式。

实现方案

方案一:CSS 变量 + prefers-color-scheme 媒体查询
什么是 prefers-color-scheme?

prefers-color-scheme 是一个 CSS 媒体特性,用于检测用户系统是否设置为亮色(light)或暗色(dark)模式。我们可以在 @media (prefers-color-scheme: dark)@media (prefers-color-scheme: light) 中定义不同的 CSS 变量,并在编写 CSS 样式时使用这些变量,这样在系统主题变化时,页面的样式也会随之变化。

代码示例

在 theme.scss 文件中,可以通过以下方式来定义亮色和暗色主题的样式:

css 复制代码
// 默认为亮主题
:root,
page {
  // 主题配色
  --theme: #fff;
  --color: #222326;
  --button-background-primary: var(--color);
  --button-content-primary: var(--theme);

}

// 暗黑主题
@media (prefers-color-scheme: dark) {
  :root,
  page {
    // 主题配色
    --theme: #000;
    --color: #fff;
    --button-background-primary: var(--color);
    --button-content-primary: var(--theme);

  }
}

然后在使用 CSS 变量时,可以这样引用:

css 复制代码
.button {
    background: var(--button-background-primary);
    color: var(--button-content-primary);
}

.icon {
    background: var(--download-icon);
    background-size: 100%;
    width: 14px;
    height: 14px;
}
方案二:通过 JavaScript 监听系统主题切换

除了使用 CSS 媒体查询之外,我们还可以通过 JavaScript 监听系统的主题切换,动态更新应用的样式。

  1. 声明启用 darkmode 支持

首先在 app.json 中声明启用 darkmode:

javascript 复制代码
{
  "darkmode": true
}
  1. 监听主题变化

接下来可以使用 wx.getSystemInfo 或 wx.getSystemInfoSync 获取当前主题状态,并通过 wx.onThemeChange 监听主题变化。例如:

javascript 复制代码
getSystemInfo() {
  const systemInfo = getSystemInfoSync();
  console.log('🚀🚀🚀---systemInfo', systemInfo);
  set({ systemInfo });
},

changeThemeListener() {
  const listener = (res) => {
    if (process.env.TARO_ENV === 'h5') {
      res.theme = res.theme === 'light' ? 'dark' : 'light';
    }
    set(s => {
      s.systemInfo.theme = res.theme;
    });
  };

  Taro.onThemeChange(listener);
},
  1. 使用 useThemeIcon 动态切换图标

获取初始化主题状态并监听主题切换

上面的代码示例展示了如何获取系统信息并设置监听器以响应主题的变化。

封装一个 useThemeIcon 钩子

javascript 复制代码
import { useAppInfoStore } from '@/store';
import { lightIconMap, darkIconMap } from './themeIcon';

export const useThemeIcon = () => {
  const { theme = 'light' } = useAppInfoStore(s => s.systemInfo);

  if (theme === 'dark') {
    return darkIconMap;
  }

  return lightIconMap;
};

配置两套主题图标

javascript 复制代码
import darkDeleteIcon from '@/icons/dark/delete-icon.svg';
import darkDownloadIcon from '@/icons/dark/download-icon.svg';

import lightDeleteIcon from '@/icons/light/delete-icon.svg';
import lightDownloadIcon from '@/icons/light/download-icon.svg';

// 暗黑主题使用图标
export const darkIconMap = {
  'delete-icon': darkDeleteIcon,
  'download-icon': darkDownloadIcon,
};

// 亮主题使用图标
export const lightIconMap = {
  'delete-icon': lightDeleteIcon,
  'download-icon': lightDownloadIcon,
};

使用 useThemeIcon

javascript 复制代码
const themeIcon = useThemeIcon();

<Image className={styles.buttonIcon} src={themeIcon['delete-icon']} />

通过这样的方式,我们可以根据系统主题来动态切换应用中的图标,使用户在不同主题下都有一致且友好的体验。

相关推荐
Thetimezipsby10 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
gitboyzcf13 天前
基于Taro4最新版微信小程序、H5的多端开发简单模板
前端·vue.js·taro
浩星15 天前
react+taro中使用vant 工具:taroify
前端·react.js·taro
浩星15 天前
react+taro的使用整理
前端·react.js·taro
浩星23 天前
react+taro打包到不同小程序
react.js·小程序·taro
namehu24 天前
🚀 2025 年最新教程:在 React Native 0.70+ 项目中接入 react-native-wechat-lib
react native·微信·taro
摸着石头过河的石头1 个月前
taro3.x-4.x路由拦截如何破?
前端·taro
少恭写代码1 个月前
duxapop 更新 2025-05-16 新增Svg编辑器 修复Svg多个Bug
小程序·taro
超级土豆粉1 个月前
Taro Hooks 完整分类详解
前端·javascript·react.js·taro