当前位置：首页 > news >正文

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

news 来源：原创 2025/7/20 14:33:36

背景

用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 文件中，可以通过以下方式来定义亮色和暗色主题的样式：

// 默认为亮主题
: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 变量时，可以这样引用：

.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 监听系统的主题切换，动态更新应用的样式。

声明启用 darkmode 支持

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

{"darkmode": true
}

监听主题变化

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

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);
},

使用 useThemeIcon 动态切换图标

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

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

封装一个 useThemeIcon 钩子

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;
};

配置两套主题图标

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

const themeIcon = useThemeIcon();<Image className={styles.buttonIcon} src={themeIcon['delete-icon']} />

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

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

目录背景实现方案方案一：CSS 变量 prefers-color-scheme 媒体查询什么是 prefers-color-scheme？代码示例方案二：通过 JavaScript 监听系统主题切换背景用Taro开发的微信小程序，需求是页面的UI主题想要跟随手机系统的主题适配…...

编程日记 2025/7/20 14:33:36

uni-app 界面TabBar中间大图标设置的两种方法

一、前言最近写基于uni-app 写app项目的时候，底部导航栏中间有一个固定的大图标，并且没有激活状态。这里记录下实现方案。效果如下（党组织这个图标）： 方法一：midButton的使用官方文档：ta…...

编程日记 2025/7/21 13:59:54

leetcode 无重复字符的最长子串

3. 无重复字符的最长子串已解答中等相关标签相关企业提示给定一个字符串 s ，请你找出其中不含有重复字符的最长子串的长度。提示： 0 < s.length < 5 * 104s 由英文字母、数字、符号和空格组成 class Solution:def lengthOfLongest…...

编程日记 2025/7/21 13:46:35

【C++习题】14.滑动窗口_找到字符串中所有字母异位词

文章目录题目链接：题目描述：解法C 算法代码：图解题目链接： 438. 找到字符串中所有字母异位词题目描述： 解法暴力解法： 字母排序后运用滑动窗口解题。滑动窗口哈希表： 我们可以优化一下&am…...

编程日记 2025/7/17 17:36:44

matplotlib知识

问题与解决 1.module backend_interagg has no attribute FigureCanvas问题 Matplotlib 后端不兼容: matplotlib 使用的后端（如 backend_interagg）可能与当前环境不匹配或未正确加载。在代码中显式设置一个兼容的后端，例如 TkAgg、Qt5Ag…...

编程日记 2025/7/20 18:09:24

如何在ubuntu上调试core dump

启用core dump 确认ulimit 状态 ulimit -c 如果输出是0，表示core dump被禁用了运行 ulimit -c unlimited 再次运行 ulimit -c 确认输出是ulimited 设置core dump路径和文件名格式下面命令表示设置core dump文件在当前目录（%e表示程序名&#x…...

编程日记 2025/7/10 17:14:41

Spring Boot教程之五：在 IntelliJ IDEA 中运行第一个 Spring Boot 应用程序

在 IntelliJ IDEA 中运行第一个 Spring Boot 应用程序 IntelliJ IDEA 是一个用 Java 编写的集成开发环境 (IDE)。它用于开发计算机软件。此 IDE 由 Jetbrains 开发，提供 Apache 2 许可社区版和商业版。它是一种智能的上下文感知 IDE，可用于在各种应用程序…...

编程日记 2025/7/21 14:03:30

排序算法1

排序算法是《数据结构与算法》中最基本的算法之一。排序算法可以分为内部排序和外部排序，内部排序是数据记录在内存中进行排序，而外部排序是因排序的数据很大，一次不能容纳全部的排序记录，在排序过程中需要访问外存。常见的内部…...

编程日记 2025/7/19 1:32:50

vector, list 模拟实现

vector 实现成员属性/迭代器 template<class T> class vector { public:typedef T* iterator;typedef const T* const_iterator;iterator begin() {return _first; }iterator end() {return _end; }const_iterator begin() const {return _first; }const_iterator end…...

编程日记 2025/7/21 14:06:57

中国近代传奇战役

军事战略层面的传奇战役孟良崮战役：1947年5月，陈毅、粟裕指挥华东野战军在山东孟良崮地区对国民党军进行的一次大规模山地运动歼灭战。此役，我军出其不意地对国民党最强大的王牌之首第七十四师开战，并将其全歼。战役中&#xff…...

编程日记 2025/7/21 6:30:59

微信小程序页面配置详解：从入门到精通

微信小程序页面配置详解：从入门到精通引言随着移动互联网的飞速发展，微信小程序作为一种新兴的应用形式，因其便捷性和丰富的功能而受到广泛欢迎。在小程序的开发过程中，页面配置是至关重要的一环。本文将深入探讨微信小程序的页面配置，帮助开发者从基础到高级逐步掌握…...

编程日记 2025/7/21 13:47:40

C#基础题

6.在屏幕上输出如下所示数列：1 1 2 3 5 8 13 21……an(an<10000) 7.求任意两个整数之间所有整数的平方和？（要求从键盘输入任意两个整数，调用已定义函数求和） 8.将一个二维数组行和列元素互换，存…...

编程日记 2025/7/17 20:54:54

前端开发中v-if 与v-show的区别

v-if v-if指令用于条件性地渲染一块内容。这个块只有当指令的表达式返回true时才会被渲染。 ‌工作原理‌：v-if通过动态地创建和销毁元素来控制元素的显示与隐藏。当条件为false时，对应的元素及其绑定的事件监听器和子组件都会被销毁；当条件…...

编程日记 2025/7/21 14:03:29

Django实现智能问答助手-基础配置

设置 Django 项目、创建应用、定义模型和视图、实现问答逻辑，并设计用户界面。下面是一步一步的简要说明： 目录： QnAAssistant/ # 项目目录 │ ├── QnAAssistant/ # 项目文件夹 │ ├── init.py # 空文件 │ ├── settings.py # 项目配…...

编程日记 2025/7/20 15:57:23

2024-11-25 二叉树的定义

一、基本概念 1.二叉树是n(n>0)个结点的有限集合: ① 或者为空二叉树，即n0。 ②或者由一个根结点和两个互不相交的被称为根的左子树和右子树组成。左子树和右子树又分别是一棵二叉树。特点： ①每个结点至多只有两棵子树。 ②左右子树不能颠倒&am…...

编程日记 2025/7/18 1:08:21

构建高效 Redis 集群：从问题排查到最佳实践20241125

引言：Redis 集群的重要性 Redis 作为一款高性能的内存数据库，常用于高并发场景，比如缓存、消息队列和排行榜。通过构建 Redis 集群，可以进一步提升可用性与性能。然而，集群的部署并非一帆风顺，常会遇到各种…...

编程日记 2025/7/21 13:58:40

MyBatis多表映射

一、多表映射概念: 1.多表查询结果映射思路: MyBatis思想是:数据库不可能永远是你所想或所需的那个样子。我们希望每个数据库都具备良好的第三范式或BCNF范式，可惜它们并不都是那样。如果能有一种数据库映射模式，完美适配所有的应用程序查询需求&…...

编程日记 2025/7/21 13:55:54

[M最短路] lc743. 网络延迟时间(spfa最短路+单源最短路)

文章目录 1. 题目来源2. 题目解析 1. 题目来源链接：743. 网络延迟时间相关链接： [图最短路模板] 五大最短路常用模板) 2. 题目解析怎么讲呢，挺抽象的…很久没写最短路算法了。反正也是写出来了，但脱离了模板，把…...

编程日记 2025/7/20 1:27:12

使用nvm下载多个版本node后提示vue不是内部或外部命令，执行vue create报.vuerc错误

一、使用nvm后执行含vue的相关命令提示vue不是内部或外部命令前言：之前有项目需要切换node版本，我把node卸载了然后使用nvm下载多个版本的node。现在想通过vue create搭建vue2的项目时提示vue不是内部或外部命令，执行npm i vue/cli后仍然无…...

编程日记 2025/7/20 22:50:40

高端服务器可以防护哪些攻击？

高端服务器，尤其是那些专门设计用于防御网络攻击的高防服务器，能够提供多种层次的防护，以抵御不同类型的网络攻击。以下是高端服务器可以防御的主要攻击类型： 1. DDoS攻击（分布式拒绝服务攻击） 带宽消耗攻…...

编程日记 2025/7/21 1:36:43

助力花生作物智能化采摘，基于嵌入式端超轻量级模型LeYOLO全系列【n/s/m/l】参数模型开发构建花生种植采摘场景下花生果实智能检测计数系统

秋天，是大地回馈辛勤耕耘者的季节，金黄的稻田、硕果累累的果园、还有那一片片郁郁葱葱的花生地，共同绘制出一幅幅丰收的画卷。对于农民而言，秋收不仅仅是收获的季节，更是他们与土地情感交织、汗水与希望交织的见证。花…...

编程日记 2025/7/19 17:32:46

物联网无线局域网WiFi开发(二)：WiFi_RTOS_SDK

一、编译工程模板 （一）搭建app目录在SDK目录下新建app目录 cd 到examples目录下拷贝smart_config下所有文件到app目录下 cd 到app目录下查看文件是否拷贝成功 (二)修改gen_misc.sh vim 打开gen_misc.sh进行编辑修改SDK_PATH为当前SDK路径&#xf…...

编程日记 2025/7/20 16:20:01

GitLab｜应用部署

创建docker-compose.yaml文件输入docker-compose配置 version: 3.8 services:gitlab:image: gitlab/gitlab-ce:15.11.2-ce.0restart: alwayscontainer_name: gitlab-ceprivileged: truehostname: 192.168.44.235environment:TZ: Asia/ShanghaiGITLAB_OMNIBUS_CONFIG: |exter…...

编程日记 2025/7/13 19:50:43

替换Nacos的MySQL驱动

前言：替换Nacos的MySQL驱动能实现使Nacos支持MySQL8.0及以上版本的MySQL数据库注：下述教程会使用命令先解压Nacos的jar包然后重新用命令把Nacos压缩成jar包，不然直接用压缩工具替换MySQL驱动后的Nacos是会启动不起来的（因为没有替…...

编程日记 2025/7/18 22:54:39

链表内指定区间反转

描述将一个节点数为 size 链表 m 位置到 n 位置之间的区间反转，要求时间复杂度 O(n)O(n)，空间复杂度 O(1)O(1)。例如： 给出的链表为 1→2→3→4→5→NULL1→2→3→4→5→NULL, m2,n4m2,n4, 返回 1→4→3→2→5→NULL1→4→3→2→5→NULL. …...

编程日记 2025/7/21 14:01:27

jmeter5.6.3安装教程

一、官网下载需要提前配置好jdk的环境变量 jmeter官网：https://jmeter.apache.org/download_jmeter.cgi 选择点击二进制的zip文件下载成功后，默认解压下一步，更改安装路径就行(我安装在D盘) 实用jmeter的bin目录作为系统变量然后把这…...

编程日记 2025/7/15 5:04:34

JavaScript高级程序设计基础（五）

上接语言基础：JavaScript高级程序设计基础（四） 本节内容较简单，有一定语言基础的可以跳过 2.5 语句 2.5.1 if语句具体作用不做过多赘述。需要注意的是，在判断条件里会自动调用Boolean()；并且在执行语句…...

编程日记 2025/7/20 22:46:48

Stable Diffusion 3 部署笔记

SD3下载地址：https://huggingface.co/stabilityai/stable-diffusion-3-medium/tree/main https://huggingface.co/spaces/stabilityai/stable-diffusion-3-medium comfyui 教程： 深度测评：SD3模型表现如何？实用教程助你玩转Stabl…...

编程日记 2025/7/21 11:03:42

深度解析：Vue 自定义指令到底是什么？快来了解

自定义指令的概述在Vue中，自定义指令是开发者自定义的，用来在DOM元素上执行特定操作的功能。Vue本身提供了多种内建指令（如v-bind, v-model, v-for, v-if等），但有时候我们需要创建自己的指令来实现一些特殊功能。这些功能可以是对DOM的直接操作，或者是为了满足特定的业…...

编程日记 2025/7/19 20:04:41

CVE-2022-4230

打开什么都没有使用dirsearch扫描到一个wp-admin 访问wp-admin是一个登陆页面账号密码都在标题中登陆后是这个页面在WP Statistics < 13.2.9 – 经过身份验证的 SQLi |CVE 2022-4230 |插件漏洞 (wpscan.com)中，里边有一段对漏洞的描述。 https://wpscan.com…...

编程日记 2025/7/21 6:17:38

什么是 WPF 中的依赖属性？有什么作用？

依赖属性（Dependency Property）是 WPF 的一个核心概念，它为传统的 .NET 属性提供了增强功能，支持绑定、样式、动画和默认值等功能。通过依赖属性，WPF 提供了一种灵活的数据驱动的方式来处理 UI 属性。 1. 什么是依赖属…...

编程日记 2025/7/18 19:30:23

『 Linux 』网络层 - IP协议 (二)

文章目录路由NAT技术分片与组装分片的组装IP协议分片的短板路由通常情况路由器具备了一个非常重要的功能,即构建子网; 同时路由器需要实现跨网络通信,说明路由器必须存在两个或以上的IP地址,通常在路由器中可以看到几个接口,分别是一个WAN口和几个LAN口; WAN口IP被称为公网I…...

编程日记 2025/7/16 14:56:09

Linux开发者的CI/CD（11）jenkins变量

文章目录 1. **环境变量 (Environment Variables)**常见的环境变量：示例：2. **构建参数 (Build Parameters)**常见的构建参数类型：示例：3 **在 `stages` 块内定义局部变量**示例：使用 `script` 步骤定义局部变量4 变量引用陷阱在 Jenkins 中，变量是自动化流程中非常重要的…...

编程日记 2025/7/16 15:15:01

Python和R荧光分光光度法

🌵Python片段 Python在处理荧光分光光度法数据方面非常强大，得益于其丰富的数据处理和可视化库，可以轻松实现从数据读取到分析的完整流程。荧光分光光度法用于测量物质在激发光照射下发出的荧光强度，常用于定量分析和特性研究。 …...

编程日记 2025/7/20 15:19:20

理解clickhouse 里的分区和分片键区别

文章目录分片分区两分片，0副本的cluster 分片 CREATE TABLE logs_distributed AS logs_local ENGINE Distributed(cluster_name, -- 集群名称database_name, -- 数据库名称logs_local, -- 本地表名cityHash64(user_id) -- 分片键&#xf…...

编程日记 2025/7/19 21:52:26

【数据结构笔记】习题

渐进分析【2010-THU-Mid】f(n) O(g(n))，当且仅当g(n) Ω(f(n))。（√） 【2010-THU-Mid】若f(n) O(n^2)且g(n) O(n)，则以下结论正确的是（AD） A. f(n) g(n) O(n^2) B. f(n) / g(n) O(n) C. g(n) O(f(…...

编程日记 2025/7/19 1:10:46

非交换几何与黎曼ζ函数：数学中的一场革命性对话

非交换几何与黎曼ζ函数：数学中的一场革命性对话非交换几何（Noncommutative Geometry, NCG）是数学的一个分支领域，它将经典的几何概念扩展到非交换代数的框架中。非交换代数是一种结合代数，其中乘积不是交换性的&…...

编程日记 2025/7/20 11:15:53

【c++】模板详解(2)

🌟🌟作者主页：ephemerals__ 🌟🌟所属专栏：C 目录前言一、非类型模板参数二、模板的特化 1. 概念 2. 场景举例 3. 函数模板的特化 4. 类模板的特化全特化偏特化 1. 部分特化 2. 对参数的…...

编程日记 2025/7/20 2:54:01

DICOM图像处理：深入解析DICOM彩色图像中的Planar配置及其对像素数据解析处理的实现

引言在DICOM（Digital Imaging and Communications in Medicine）标准中，彩色图像的存储与显示涉及多个关键属性，其中**Planar Configuration（平面配置）**属性（标签 (0028,0006)）尤为重要。当遇到彩色DICOM图像在浏览时被错误地分割为9张小图，而实际应显示为一…...

编程日记 2025/7/18 13:35:15

【青牛科技】D3308 一块带有 ALC 的双通道前置放大器。它适用于立体声收录机和盒式录音机。

概述： D3308 是一块带有 ALC 的双通道前置放大器。它适用于立体声收录机和盒式录音机。采用 SIP9、SOP14 的封装形式封装。主要特点：  带内置 ALC 回路的双通道均衡放大器。  低噪声： VNI1.0V（典型值）。  开环…...

编程日记 2025/7/18 20:01:43

goframe开发一个企业网站 MongoDB 完整工具包18

1. MongoDB 工具包完整实现 (mongodb.go) package mongodbimport ("context""fmt""time""github.com/gogf/gf/v2/frame/g""go.mongodb.org/mongo-driver/mongo""go.mongodb.org/mongo-driver/mongo/options" )va…...

编程日记 2025/7/16 9:47:52

自动驾驶3D目标检测综述（四）

前三篇分别介绍了前四章的内容： 第一篇（介绍、摘要和背景）：自动驾驶3D目标检测综述（一）_3d 目标检测-CSDN博客第二篇（第三章基于激光雷达的3D目标检测）：自动驾驶3D目…...

编程日记 2025/7/5 7:13:54

远程控制软件：探究云计算和人工智能的融合

在数字化时代，远程控制工具已成为我们工作与生活的重要部分。用户能够通过网络远程操作和管理另一台计算机，极大地提升了工作效率和便捷性。随着人工智能（AI）和云计算技术的飞速发展，远程控制工具也迎来了新的发展机遇…...

编程日记 2025/7/20 5:35:26

3ds Max2024软件详细安装教程+中文安装包（永久使用）

[名称]：3ds Max2024 [大小]：5.07GB [语言]：简体中文 [安装环境]：Win11/Win10 软件介绍 3DS Max是一款三维建模和渲染软件,可以创造宏伟的游戏世界,布置精彩绝伦的场景以实现设计可视化,并打造身临其境的虚拟现实 (VR) ...在广告…...

编程日记 2025/7/18 23:06:01

深入解析 Spring MVC：架构、组件与最佳实践

文章目录 1. **DispatcherServlet**2. **HandlerMapping**3. **HandlerAdapter**4. **Controller**5. **ModelAndView**6. **ViewResolver**7. **View** 工作流程配置方式XML 配置Java 配置最佳实践示例项目项目目录结构控制器 (HelloWorldController.java)服务层 (HelloWorld…...

编程日记 2025/7/20 18:26:37

专题二十三_动态规划_回文串系列问题_算法专题详细总结

目录动态规划回文串系列问题 1. 回⽂⼦串（medium） 解析： 解决回文串问题，这里提供三个思路： 1.中心扩展法：n^2 / 1 2.马拉车算法：n / n 3.动态规划算法：n^2 / n^2 1.状态表…...

编程日记 2025/7/8 1:59:10

Linux操作系统学习---初识环境变量

目录编辑环境变量的概念： 小插曲：main函数的第一、二个参数获取环境变量信息： 1.main函数的第三个参数 2.查看单个环境变量 3.c语言库函数getenv() 和环境变量相关的操作指令： 1.export---导出环境变量： 2.unse…...

编程日记 2025/7/20 10:12:30

通过map文件了解堆栈分配(STM32、MDK5)--避免堆栈溢出

在最近的一个项目的开发中，每当调用到一个函数，程序就直接跑飞。debug跟进去看不出什么逻辑错误，但发现函数内局部变量声明之后，全局变量的值被清零，后来查看局部变量地址已经超出栈的范围，于是确定是栈溢出。如果不稍微了解一下堆栈，在开发过程中可能碰到各种奇怪的错误…...

编程日记 2025/7/18 15:12:24

设计模式——状态模式

定义状态模式（State Pattern）是一种行为设计模式。它允许一个对象在其内部状态改变时改变它的行为。对象看起来好像修改了它的类，从直观上看，就像是对象根据自身的状态来动态地切换行为方式。结构组成环境（Conte…...

编程日记 2025/7/19 5:07:13

没有技术背景考软考高级选什么科目呀？

没有技术背景的外行小白特别推荐考取信息系统项目管理师 ，也就是软考高项！ 软考高项是软考高级资格考试中相对最容易的一门，同时也是报考人数最多的一门。为什么选择软考高项呢？ 以我自己的经历为例。刚进入职场时&#xf…...

编程日记 2025/7/15 15:13:25

目录

背景

实现方案

方案一：CSS 变量 + prefers-color-scheme 媒体查询

什么是 prefers-color-scheme？

代码示例

方案二：通过 JavaScript 监听系统主题切换

相关文章：