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

在Vue或React项目中使用Tailwind CSS实现暗黑模式切换：从系统适配到手动控制

article 2025/6/9 10:40:06

在这里插入图片描述在现代Web开发中，暗黑模式(Dark Mode)已成为提升用户体验的重要功能。本文将带你使用Tailwind CSS在React项目(Vue项目类似)中实现两种暗黑模式控制方式：

系统自动适配 - 根据用户设备偏好自动切换
手动切换 - 通过按钮让用户自由选择

一、项目准备

使用vite创建一个项目，vue和react都可以，我这里是react

 npm create vite@latest

在项目中启用tailwindcss

npm install tailwindcss @tailwindcss/vite

在项目下的vite.config.ts中添加tailwindcss插件

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'// https://vite.dev/config/
export default defineConfig({plugins: [react(),tailwindcss(),],
})

在index.css中引入tailwindcss，并在main.tsx中引入index.css

/* index.css */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'createRoot(document.getElementById('root')!).render(<StrictMode><App /></StrictMode>,
)

接下来我们在App.tsx中编写我们的暗黑模式切换代码

二、tailwindcss暗黑模式切换

2.1 `prefers-color-scheme`控制暗黑模式

Tailwind 默认通过 prefers-color-scheme CSS 媒体查询控制暗模式。意思是 它会根据用户的操作系统或浏览器设置自动应用暗模式或亮模式样式。

2.1.1 什么是 `prefers-color-scheme`？

prefers-color-scheme 是一种 CSS 媒体查询，可以检测用户系统的外观偏好：

@media (prefers-color-scheme: dark) {/* 暗模式样式 */
}@media (prefers-color-scheme: light) {/* 亮模式样式 */
}

操作系统（如 macOS、Windows、iOS、Android）或浏览器如果启用了“暗模式”，那么 prefers-color-scheme: dark 条件会变为 true。

2.1.2 Tailwind 如何利用 `prefers-color-scheme`？

Tailwind 提供了一个 dark: 变体，可以根据是否处于暗模式应用不同的样式。

例子：

<h1 class="text-black dark:text-white">Hello</h1>

当用户系统是亮模式 → 显示黑色文字
当用户系统是暗模式 → 显示白色文字

Tailwind 默认启用的是基于 media 的暗模式，也就是：

// tailwind.config.js
module.exports = {darkMode: 'media', // 默认值，根据系统设置自动切换
}

2.2 用户自己控制暗黑模式切换

如果我们不想根据用户系统自动切换，而是希望 手动控制暗模式（例如通过按钮），可以在index.css中这样设置：

@import "tailwindcss";
/* 代表用户通过通过类名控制暗黑模式 */
@custom-variant dark (&:where(.dark, .dark *));

然后在App.tsx中写入代码就可以用按钮手动控制暗黑模式了，使用 JavaScript 动态添加或移除 dark 类名，就可以实现手动切换。

import React, { useState } from 'react'const App: React.FC = () => {const [darkmode, setDarkmode] = useState(false)return (<div className={darkmode ? 'dark' : ''}><button className='rounded px-4 py-4 bg-sky-200 mx-2 my-2 cursor-pointer' onClick={()=>setDarkmode(!darkmode)}>切换模式</button><div className="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5"><div><span className="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg"><svg className="h-6 w-6 stroke-white"></svg></span></div><h3 className="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Writes upside-down</h3><p className="text-gray-500 dark:text-gray-400 mt-2 text-sm ">The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.</p></div></div>)
}export default App

当然，除了用类名控制还可以使用数据属性手动控制暗黑模式。原理和用类名控制差不多，区别是一个是css类选择器，一个是用css属性选择器。

@import "tailwindcss";
/* 使用数据属性手动控制暗黑模式切换 */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

<html data-theme="dark"><body><div class="bg-white dark:bg-black"><!-- ... --></div></body>
</html>

总结：只要我们在项目中的顶层Dom元素中动态控制类名(或属性名)，就可以在整个页面精细的对每个Dom元素进行暗色和亮色主题的定制，当然官方还支持多个自定义主题，有兴趣的话可以看官方文档。

在Vue或React项目中使用Tailwind CSS实现暗黑模式切换：从系统适配到手动控制

在现代Web开发中，暗黑模式(Dark Mode)已成为提升用户体验的重要功能。本文将带你使用Tailwind CSS在React项目(Vue项目类似)中实现两种暗黑模式控制方式： 系统自动适配 - 根据用户设备偏好自动切换手动切换 - 通过按钮让用户自由选择一、项目准备使…...

编程日记 2025/6/9 10:40:06

Linux--命令行参数和环境变量

1.命令行参数 Linux 命令行参数基础 1.1参数格式位置参数：无符号，按顺序传递（如 ls /home/user 中 /home/user 是位置参数） 选项参数： 短选项：以 - 开头，单个字母（如 -l 表示长格…...

编程日记 2025/6/9 10:39:03

Android 集成 Firebase 指南

Firebase 是 Google 提供的一套移动开发平台，包含分析、认证、数据库、消息推送等多种服务。以下是在 Android 应用中集成 Firebase 的详细步骤： 1. 准备工作安装 Android Studio - 确保使用最新版本创建或打开 Android 项目 - 项目需要配置正确的包…...

编程日记 2025/6/9 10:37:59

springboot线上教学平台

摘要：在社会快速发展的影响下，使线上教学平台的管理和运营比过去十年更加理性化。依照这一现实为基础，设计一个快捷而又方便的网上线上教学平台系统是一项十分重要并且有价值的事情。对于传统的线上教学平台控制模型来说，网上线上…...

编程日记 2025/6/9 10:36:55

阿里云 Linux 搭建邮件系统全流程及常见问题解决

阿里云 Linux 搭建 [conkl.com]邮件系统全流程及常见问题解决目录阿里云 Linux 搭建 [conkl.com]邮件系统全流程及常见问题解决一、前期准备（关键配置需重点检查）1.1 服务器与域名准备1.2 系统初始化（必做操作） 二、核心组件安装…...

编程日记 2025/6/9 10:35:52

【Elasticsearch】映射：fielddata 详解

映射：fielddata 详解 1.fielddata 是什么2.fielddata 的工作原理3.主要用法3.1 启用 fielddata（通常在 text 字段上）3.2 监控 fielddata 使用情况3.3 清除 fielddata 缓存 4.使用场景示例示例 1：对 text 字段进行聚合示例 2&#…...

编程日记 2025/6/9 10:34:51

用Python训练自动驾驶神经网络：从零开始驾驭未来之路

用Python训练自动驾驶神经网络：从零开始驾驭未来之路哈喽，朋友们！我是Echo_Wish，今天咱们聊点超酷的话题——自动驾驶中的神经网络训练，用Python怎么玩转起来？说实话，自动驾驶一直是科技圈的香饽饽，为什么？因为它承载了未来交通的无限可能：减少事故、提升效率、节…...

编程日记 2025/6/9 10:33:46

【电路】阻抗匹配

📝 阻抗匹配一、什么是阻抗匹配？ 阻抗匹配（Impedance Matching）是指在电子系统中，为了实现最大功率传输或最小信号反射，使信号源、传输线与负载之间的阻抗达到一种“匹配”状态的技术。研究对象&#x…...

编程日记 2025/6/9 10:32:45

mariadb5.5.56在centos7.6环境安装 1 下载安装包 https://mariadb.org/mariadb/all-releases/#5-5 2 上传安装包的服务器 mariadb-5.5.56-linux-systemd-x86_64.tar.gz 3 解压安装包 tar -zxvf mariadb-5.5.56-linux-systemd-x86_64.tar.gz mv mariadb-5.5.56-linux-syst…...

编程日记 2025/6/9 10:31:43

MySQL 索引失效：六大场景与原理剖析

我们都熟知索引是优化 MySQL 查询性能的利器。但你是否遇到过这样的困境：明明在表上建立了索引，查询却依然缓慢，EXPLAIN 分析后发现索引并未被使用？这就是所谓的“索引失效”。索引失效并非一个 Bug，而是 MySQL 查询…...

编程日记 2025/6/9 10:30:41

打造你的 Android 图像编辑器：深入解析 PhotoEditor 开源库

📸 什么是 PhotoEditor？ PhotoEditor 是一个专为 Android 平台设计的开源图像编辑库，旨在为开发者提供简单易用的图像编辑功能。它支持绘图、添加文本、应用滤镜、插入表情符号和贴纸等功能，类似于 Instagram 的编辑体验。该库采…...

编程日记 2025/6/9 10:29:40

DeepSeek 终章：破局之路，未来已来

目录一、DeepSeek 技术发展现状回顾二、未来发展趋势2.1 多模态融合的拓展2.2 模型可解释性的强化2.3 垂直领域的深化应用三、面临的技术挑战3.1 数据隐私与安全难题3.2 算法偏见与公平性困境3.3 网络攻击与恶意利用威胁四、挑战应对策略探讨4.1 技术层面的解决方案4.2 算法…...

编程日记 2025/6/9 10:28:38

八：操作系统设备管理之缓冲、缓存与假脱机

弥合鸿沟：操作系统中的缓冲、缓存与假脱机技术深度解析在计算机系统的世界里，存在着一个根本性的速度差异：中央处理器（CPU）的执行速度飞快，而输入/输出（I/O）设备（如硬盘…...

编程日记 2025/6/9 10:27:32

Azure 虚拟机端口资源：专用 IP 和公共 IP Azure Machine Learning 计算实例BUG

## 报错无解找不到Azure ML 计算实例关联的 NSG .env 文件和 ufw status： .env 文件中 EXPOSE_NGINX_PORT8080 是正确的，它告诉 docker-compose.yaml 将 Nginx 暴露在宿主机的 8080 端口。 sudo ufw status 显示 Status: inactive，意味着宿…...

编程日记 2025/6/9 10:26:28

Java核心技术-卷I-读书笔记（第十二版）

第一章 Java程序设计概述 09年sun被oracle收购->11年java7（简单改进）->14年java8（函数式编程）->2017年java9->2018年java11->2021年java17 第二章 Java编程环境 Java9后新增JShell，提供类似脚本试执…...

编程日记 2025/6/9 10:25:24

从C到C++语法过度1

从C到C语法过度1 文章目录从C到C语法过度11. 字符串string2. 引用3. 类型转换3.1 新式转换 const_cast3.2 新式转换 static_cast 4. 关键字auto 1. 字符串string C语言从本质上来说，是没有字符串这种类型的，在C语言中如果要表达字符串，只能…...

编程日记 2025/6/9 10:24:12

AI是如何换装的？

AI换装是一种基于计算机视觉、深度学习和生成对抗网络（GAN）的技术，能够通过算法自动识别人像并更换服饰，实现虚拟换装的效果。这项技术广泛应用于电商服装试穿、虚拟偶像、影视特效、社交媒体滤镜等领域。 AI换装的核心技术 1. 图像分割与人体解析换装的第一步是图像分…...

编程日记 2025/6/9 10:23:09

MATLAB遍历生成20到1000个节点的无线通信网络拓扑推理数据

功能： 遍历生成20到1000个节点的无线通信网络拓扑推理数据，包括网络拓扑和每个节点发射的电磁信号，采样率1MHz/3000，信号时长5.7s，单帧数据波形为实采数据生成效果： 拓扑及空间位置： 节点电磁…...

编程日记 2025/6/9 10:22:06

python爬虫：grequests的详细使用（基于gevent和requests的异步HTTP请求库）

更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录一、grequests 概述1.1 grequests 介绍1.2 注意事项1.3 替代方案比较1.4 基本组件1.5 grequests 安装二、基本用法2.1 创建请求任务2.2 发送请求并获取响应2.3 带参数的请求三、高级用法3.1 自定义回调函数3.2 设置超时…...

编程日记 2025/6/9 10:21:02

如何排查和解决PHP连接数据库MYSQL失败写锁的问题

在使用PHP连接MySQL数据库时，可能会遇到连接失败和写锁问题。这类问题可能会影响应用的正常运行，本文将详细介绍排查和解决这些问题的方法。一、PHP连接MySQL数据库失败 1. 排查连接失败的常见原因数据库配置错误： 检查数据库主机、用户名…...

编程日记 2025/6/9 10:19:55

卫星接收天线G/T值怎么计算？附G/T计算excel表格链接

我们在进行无线通信链路设计时，都会涉及接收天线最重要的参数G/T。今天，咱们就来聊聊G/T值该怎么计算，计算过程中有哪些需要留意的地方，以及当你看到产品说明书中标注了G/T指标，还需要进一步了解哪些信息。 G/T的含义 …...

编程日记 2025/6/9 10:18:50

基于dify的营养分析工作流：3分钟生成个人营养分析报告

你去医院做体检，需要多久拿到体检报告呢？医院会为每位病人做一份多维度的健康报告吗？"人工报告需1小时/份？数据误差率高达35%？传统工具无法个性化？ Dify工作流AI模型的组合拳，正在重塑健康…...

编程日记 2025/6/9 10:17:40

Kali Linux 安全工具解析

Kali Linux 安全工具解析目录 Kali Linux 安全工具解析一、Kali Linux 概述1.1 核心特性1.2 系统要求二、核心工具分类与实战应用2.1 信息收集工具2.1.1 Nmap2.1.2 Recon-ng2.1.3 theHarvester 2.2 漏洞利用工具2.2.1 Metasploit Framework2.2.2 SQLMap2.2.3 Burp Suite 2.3 …...

编程日记 2025/6/9 10:16:37

端午编程小游戏--艾草驱邪

刚刚过去的端午，参加了学校的一个活动，用python做了一个小游戏，当然这个小游戏还可以继续改进，可以加个bgm什么的...... 可以小玩一下 import pygame import random import math import sys import timepygame.init() pygame.mi…...

编程日记 2025/6/9 10:15:31

新成果：GaN基VCSEL动态物理模型开发

作为高速数据传输与光电信号处理的核心器件，垂直腔面发射激光器（VCSEL）在高速光通信、激光雷达等领域应用广泛，其动态特性直接关联器件调制速率及稳定性等关键参数。近期，天津赛米卡尔科技有限公司技术团队开发了GaN基…...

编程日记 2025/6/9 10:14:29

0x-4-Oracle 23 ai-sqlcl 25.1.1 独立安装-配置和优化

一、独立安装sqlcl 1. 安装 Java 环境 SQLcl 需要 Java 1.8.0_220 或更高版本， Oracle Linux9.6 上已经默认安装Oracle 23ai后Java 是11 lts版本如果java jdk安装错误将遇上SQLcl困扰n多人的bug sql /nolog 错误：找不到或加载主类 oracle.dbto…...

编程日记 2025/6/9 10:13:27