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

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

目录

      • 背景
      • 实现方案
        • 方案一:CSS 变量 + prefers-color-scheme 媒体查询
          • 什么是 prefers-color-scheme?
          • 代码示例
        • 方案二:通过 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 文件中,可以通过以下方式来定义亮色和暗色主题的样式:

// 默认为亮主题
: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 监听系统的主题切换,动态更新应用的样式。

  1. 声明启用 darkmode 支持

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

{"darkmode": true
}
  1. 监听主题变化

接下来可以使用 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);
},
  1. 使用 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 中实现系统主题适配:亮/暗模式

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

autogen框架中使用chatglm4模型实现react

本文将介绍如何使用使用chatglm4实现react&#xff0c;利用环境变量、Tavily API和ReAct代理模式来回答用户提出的问题。 环境变量 首先&#xff0c;我们需要加载环境变量。这可以通过使用dotenv库来实现。 from dotenv import load_dotenv_ load_dotenv()注意.env文件处于…...

读《Effective Java》笔记 - 条目9

条目9&#xff1a;与try-finally 相比&#xff0c;首选 try -with -resource 什么是 try-finally&#xff1f; try-finally 是 Java 中传统的资源管理方式&#xff0c;通常用于确保资源&#xff08;如文件流、数据库连接等&#xff09;被正确关闭。 BufferedReader reader n…...

【软件入门】Git快速入门

Git快速入门 文章目录 Git快速入门0.前言1.安装和配置2.新建版本库2.1.本地创建2.2.云端下载 3.版本管理3.1.添加和提交文件3.2.回退版本3.2.1.soft模式3.2.2.mixed模式3.2.3.hard模式3.2.4.使用场景 3.3.查看版本差异3.4.忽略文件 4.云端配置4.1.Github4.1.1.SSH配置4.1.2.关联…...

nextjs window is not defined

问题产生的原因 在 Next.js 中&#xff0c;“window is not defined” 错误通常出现在服务器端渲染&#xff08;Server - Side Rendering&#xff0c;SSR&#xff09;的代码中。这是因为window对象是浏览器环境中的全局对象&#xff0c;在服务器端没有window这个概念。例如&am…...

C语言实现冒泡排序:从基础到优化全解析

一、什么是冒泡排序&#xff1f; 冒泡排序&#xff08;Bubble Sort&#xff09;是一种经典的排序算法&#xff0c;其工作原理非常直观&#xff1a;通过多次比较和交换相邻元素&#xff0c;将较大的元素“冒泡”到数组的末尾。经过多轮迭代&#xff0c;整个数组会变得有序。 二…...

windows11下git与 openssl要注意的问题

看了一下自己贴文的历史&#xff0c;有一条重要的忘了写了。 当时帮有位同事配置gitlab&#xff0c;众说周知gitlab是不太好操作。 但我还是自认自己git还是相当熟的。 解决了一系列问题&#xff0c;如配置代理&#xff0c;sshkey&#xff0c;私有库&#xff0c;等等&#xff0…...

lua除法bug

故事背景&#xff0c;新来了一个数值&#xff0c;要改公式。神奇的一幕出现了&#xff0c;公式算出一个非常大的数。排查是lua有一个除法bug,1除以大数得到一个非常大的数。 function div(a, b)return tonumber(string.format("%.2f", a/b)) end print(1/73003) pri…...

Ubuntu下Docker容器java服务往mysql插入中文数据乱码

一、问题描述 1、java服务部署在ubuntu下的docker容器内&#xff0c;但是会出现部分插入中文数据显示乱码&#xff0c;如图所示&#xff1a; 二、解决方案 1、查看mysql是否支持utf8&#xff0c;登录进入Mysql 输入命令&#xff1a; mysql -u root -pshow variables like c…...

C语言根据字符串变量获取/设置结构体成员值

一、背景 在项目中需要根据从数据库中获取的字段与对应的键值付给对应结构体成员上&#xff0c;而c语言中没有类似的反射机制&#xff0c;所以需要实现类似功能。例&#xff0c;从表中查到a 10&#xff0c;在结构体t中&#xff0c;需要将 t.a 10。 二、实现 感谢ChatGPT&…...

Selenium 自动化测试demo

场景描述&#xff1a; 模拟用户登录页面操作&#xff0c;包括输入用户名、密码、验证码。验证码为算数运算&#xff0c;如下&#xff1a; 使用到的工具和依赖&#xff1a; 1. Selenium&#xff1a;pip install selenium 2. 需要安装浏览器驱动&#xff1a;这里使用的是Edge 3…...

LeetCode 111.二叉树的最小深度

题目&#xff1a; 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明&#xff1a;叶子节点是指没有子节点的节点。 思路&#xff1a;自底向上&#xff08;归&#xff09;/自顶向下&#xff08;递&#xff09; DF…...

大工C语言作业答案

前言 这里是大连理工大学新版C语言课程MOOC作业的答案。 后期我会把全部的作业答案开源出来&#xff0c;希望对大家有帮助。 第九周第一题 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> int B(int i) {int sum 1;while (i > 0){sum i * sum;i--;}return su…...

【Unity踩坑】Unity中父对象是非均匀缩放时出现倾斜或剪切现象

The game object is deformed when the parent object is in non-uniform scaling. 先来看一下现象 有两个Cube, Cube1&#xff08;Scale2,1,1)&#xff0c;Cube2&#xff08;Scale1,1,1&#xff09; 将Cube2拖拽为Cube2的子对象。并且将position设置为&#xff08;-0.6,1,0&a…...

QT 跨平台实现 SSDP通信 支持多网卡

一.多网卡场景 在做SSDP通信的时候,客户端发出M-search命令后, 主机没有捕捉到SSDP的消息,你可以查看下,是不是局域网下,既打开了wifi,又连接了本地网络,mac os下很容易出现这种场景。此时,我们发送消息时,需要遍历所有网卡并发送M-search命令。 二.QT相关接口介绍 1…...

如何寻找适合的HTTP代理IP资源?

一、怎么找代理IP资源&#xff1f; 在选择代理IP资源的时候&#xff0c;很多小伙伴往往将可用率作为首要的参考指标。事实上&#xff0c;市面上的住宅IP或拨号VPS代理IP资源&#xff0c;其可用率普遍在95%以上&#xff0c;因此IP可用率并不是唯一的评判标准 其实更应该关注的…...

数据结构(ArrayList顺序表)

一、引言 1.什么是顺序表 定义&#xff1a; 顺序表是一种基于阵列实现的线性表结构&#xff0c;用连续的存储空间保存表中的数据元素&#xff0c;并按顺序排列。 底层依赖阵列&#xff0c;支持随机访问。元素之间没有额外的连接信息&#xff0c;如指针或链表节点。通过动态扩容…...

直接抄作业!Air780E模组LuatOS开发:位运算(bit)示例

在嵌入式开发中&#xff0c;位运算是一种高效且常用的操作技巧。本文将介绍如何使用Air780E模组和LuatOS进行位运算&#xff0c;并通过示例代码帮助读者快速上手。 一、位运算概述 位运算是一种在计算机系统中对二进制数位进行操作的运算。由于计算机内部数据的存储和处理都是…...

RK3588-LinuxSDK安装

安装依赖软件 执行如下命令,安装 LinuxSDK 开发包依赖软件。 备注:安装过程中,请保证 Ubuntu 可正常访问互联网,若提示"*** is already the newest version ***"表示该软件已安装,请忽略。 Host# sudo apt-get install -y git ssh make gcc libssl-dev \ liblz…...

MATLAB 中有关figure图表绘制函数设计(论文中常用)

在撰写论文时&#xff0c;使用 MATLAB 导出的图像常常因大小和格式不统一&#xff0c;导致投稿时编辑部频繁退稿&#xff0c;要求修改和调整。这不仅浪费时间&#xff0c;也增加了工作量。为了减少这些麻烦&#xff0c;可以在 MATLAB 中导出图像时提前设置好图表的大小、格式和…...

Unity UGUI原理剖析

UI最重要的两部分 UI是如何渲染出来的点击事件如何触发何时发生UI重绘 1&#xff1a;UI如何渲染出来的 UI渲染一定是有顶点的&#xff0c;没有顶点就没法确定贴图的采样&#xff0c;UGUI的顶点在一张Mesh上创建&#xff0c;经过渲染管线UI就渲染到屏幕上了&#xff0c;UI的渲染…...

Spring框架使用xml方式配置ThreadPoolTaskExecutor线程池,并且自定义线程工厂

一、自定义线程工厂 自定义线程工厂需要实现java.util.concurrent.ThreadFactory接口&#xff0c;重写newThread方法。 示例代码&#xff1a; package com.xiaobai.thread;import org.apache.log4j.Logger;import java.util.concurrent.ThreadFactory; import java.util.conc…...

架构-微服务-服务网关

文章目录 前言一、网关介绍1. 什么是API网关2. 核心功能特性3. 解决方案 二、Gateway简介三、Gateway快速入门1. 基础版2. 增强版3. 简写版 四、Gateway核心架构1. 基本概念2. 执行流程 五、Gateway断言1. 内置路由断言工厂2. 自定义路由断言工厂 六、过滤器1. 基本概念2. 局部…...

基于springboot的HttpClient、OKhttp、RestTemplate对比

HttpClient详细 Httpclient基础&#xff01;&#xff01;&#xff01;&#xff01;实战训练&#xff01;&#xff01;&#xff01;&#xff01;-CSDN博客 OKhttp使用 OKhttp导包 <!-- ok的Http连接池 --><dependency><groupId>com.squareup.okhttp3</g…...

(计算机组成原理)期末复习

第一章 计算机的基本组成&#xff1a;硬件软件&#xff08;程序&#xff09;计算机系统 软件有系统软件&#xff08;系统管理工具&#xff09;&#xff0c;应用软件 计算机硬件&#xff1a;包括主机和外设&#xff0c;主机包括CPU和内存&#xff0c;***CPU由运算器和控制器所组…...

从0到1部署Tomcat和添加servlet(IDEA2024最新版详细教程)

本文不仅细化了每一个步骤&#xff0c;实现了从0到1部署Tomcat和添加servlet。还针对IDEA2024版和以前的版本在部署上的区别&#xff0c;做了详细介绍&#xff0c;尤其是add framework support部分。与此同时&#xff0c;针对控制台中文乱码问题&#xff0c;本文也给出了详细解…...

【Java从入门到放弃 之 Java程序基础】

Java程序基础 Java程序基础基本数据类型和变量数据类型变量赋值基本运算算术运算比较运算逻辑运算 Java程序基础 基本数据类型和变量 数据类型 对Java语言而言&#xff0c;有如下基本数据类型。 整数类型&#xff1a;有4种整型byte/short/int/long&#xff0c;它们占用的字…...

2024年11月26日Github流行趋势

项目名称&#xff1a;v2rayN 项目维护者&#xff1a;2dust yfdyh000 CGQAQ ShiinaRinne Lemonawa 项目介绍&#xff1a;一个支持Xray核心及其他功能的Windows和Linux图形用户界面客户端。 项目star数&#xff1a;70,383 项目fork数&#xff1a;11,602 项目名称&#xff1a;fre…...

相亲交友小程序项目介绍

一、项目背景 在当今快节奏的社会生活中&#xff0c;人们忙于工作和事业&#xff0c;社交圈子相对狭窄&#xff0c;寻找合适的恋爱对象变得愈发困难。相亲交友作为一种传统而有效的社交方式&#xff0c;在现代社会依然有着巨大的需求。我们的相亲交友项目旨在为广大单身人士提…...

使用ENSP实现默认路由

一、项目拓扑 二、项目实现 1.路由器AR1配置 进入系统试图 sys将路由器命名为R1 sysname R1关闭信息中心 undo info-center enable 进入g0/0/0接口 int g0/0/0将g0/0/0接口IP地址配置为2.2.2.1/24 ip address 2.2.2.1 24进入g0/0/1接口 int g0/0/1将g0/0/1接口IP地址配置为1.…...