TailwindCSS 多主题色配置

TailwindCSS 多主题色配置

现在大多数网站都支持主题色变换,比如切换深色模式。那么我们该如何进行主题色配置呢?

tailwind dark

tailwind 包含一个 dark变体,当启用深色模式时,可以为网站设置不同样式

<div class="bg-white dark:bg-gray-800"><h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1><p class="text-gray-600 dark:text-gray-300">Lorem ipsum...</p>
</div>
启用深色模式

tailwind.config.js 文件darkMode选项默认是false,需要启用深色模式,则可以设置为 media 或者 class

启动了深色模式后, dark:{class}类将会优先于无前缀的类

默认情况下,dark 变体只对 backgroundColorborderColorgradientColorStops``placeholderColortextColor 启用。

  1. media(通过用户的操作系统进行控制)
    // tailwind.config.js
    module.exports = {darkMode: 'media',// ...
    }
    
  2. class (手动控制,HTML树中出现 dark类时起作用)
    // tailwind.config.js
    module.exports = {darkMode: 'class',// ...
    }
    

这种操作可以实现模式切换,但是也不难看出,class中使用dark:{class} 还是比较繁琐的,而且不易查找和修改,并且无法实现多种主题色配置

自定义配置主题色

想要配置不同的主题色,那么就希望配置的颜色可以在不同主题下进行变化。那么如何实现这样的能力呢?我们可以在最外层dom结构上配置不同的类,不同类下的颜色赋予不同值,那么就可以实现多种主题色的切换了,是不是感觉实现很简单,接下来介绍一下代码项目不同主题色的配置。

以小程序(taro + react + rtk)进行介绍,其他原理类似

  • 首先需要建立一个主题文件夹放置我们需要配置的不同主题的css
    theme

    .textLight1 {/* text */--t-1: #1c1d1f;--t-2: #58647a;--t-3: #8390a8;
    }
    
    .textDark1 {/* text */--t-1: #fafafa;--t-2: #d2d3d6;--t-3: #9fa4ad;
    }
    

    以此类推 相同的的变量key值对应不同的value值

  • 其次需要在入口处引入我们的主题文件 并在配置文件中加入我们定义的变量
    app.css

    @import './theme';
    

    tailwind.config.js

    // Example `tailwind.config.js` file
    const colors = require('tailwindcss/colors')module.exports = {theme: {colors: {/* text */'t-1': 'var(--t-1)','t-2': 'var(--t-2)','t-3': 'var(--t-3)',},},
    }
    
  • 有了主题文件跟对应的主题类名 textLight1textDark1…,我们便可以进行切换了 在外层包裹组件中使用对应的类名 就可以达到切换主题的效果。

    注意在组件中需要使用对应的key值才会有该效果

     <Text className="text-t-1">Test</Text>
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/212881.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ThingWorx 9.2 Windows安装

参考官方文档安装配置 1 PostgreSQL 13.X 2 Java, Apache Tomcat, and ThingWorx PTC Help Center 参考这里安装 数据库 C:\ThingworxPostgresqlStorage 设置为任何人可以full control 数据库初始化 pgadmin4 创建用户twadmin并记录口令password Admin Userpostgres Thin…

漏刻有时百度地图API实战开发(9)Echarts使用bmap.js实现轨迹动画效果

Bmap.js是Echarts和百度地图相结合开发的一款JavaScript API&#xff0c;它可以帮助用户在web应用中获取包括地图中心点、地图缩放级别、地图当前视野范围、地图上标注点等在内的地图信息&#xff0c;并且支持在地图上添加控件&#xff0c;提供包括智能路线规划、智能导航(驾车…

C# WPF上位机开发(通讯协议的编写)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 作为上位机&#xff0c;它很重要的一个部分就是需要和外面的设备进行数据沟通的。很多时候&#xff0c;也就是在这个沟通的过程当中&#xff0c;上…

PyQt下使用OpenCV实现人脸检测与识别

背景&#xff1a; 一 数字图像处理与识别警务应用模型 基于前期所学知识&#xff0c;与公安实践相结合&#xff0c;综合设计数字图像处理与识别警务应用模型,从下列4个研究课题中选择2个进行实验实现&#xff1a;图像增强与复原、人脸检测与识别、虹膜内外圆检测与分割、车牌…

Html转PDF,前端JS实现Html页面导出PDF(html2canvas+jspdf)

Html转PDF&#xff0c;前端JS实现Html页面导出PDF&#xff08;html2canvasjspdf&#xff09; 文章目录 Html转PDF&#xff0c;前端JS实现Html页面导出PDF&#xff08;html2canvasjspdf&#xff09;一、背景介绍二、疑问三、所使用技术html2canvasjspdf 四、展示开始1、效果展示…

C语言----文件操作(一)

一&#xff1a;C语言中文件的概念 对于文件想必大家都很熟悉&#xff0c;无论在windows上还是Linux中&#xff0c;我们用文件去存储资料&#xff0c;记录笔记&#xff0c;常见的如txt文件&#xff0c;word文档&#xff0c;log文件等。那么&#xff0c;在C语言中文件是什么样的存…

threadpool github线程池学习

参考项目 https://github.com/progschj/ThreadPool 源码分析 // 常规头文件保护宏, 避免重复 include #ifndef THREAD_POOL_H #define THREAD_POOL_H// 线程池, 存储线程对象; #include <vector>// 任务队列, 双向都可操作队列, queue 不能删除首个元素 #include <…

微信小程序制作-背单词的小程序制作

微信小程序–背单词的 好久没有发过文章了&#xff0c;但是不代表着我不去学习了喽&#xff0c;以下是我最近做的东西&#xff0c;前端的UI由朋友设计的&#xff0c;目前这个是前端使用的是微信小程序后端是Python的一个轻量型框架&#xff0c;FastApi&#xff0c;嗯&#xff…

MyBatis 四大核心组件之 Executor 源码解析

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

List 接口

1 List 接口 java.util 中的集合类包含 Java 中某些最常用的类。最常用的集合类是 List 和 Map。 List是一种常用的集合类型&#xff0c;它可以存储任意类型的对象&#xff0c;也可以结合泛型来存储具体的类型对象&#xff0c;本质上就是一个容器。 1.1 List 类型介绍 有序性…

06-React组件 Redux React-Redux

React组件化&#xff08;以Ant-Design为例&#xff09; 组件化编程&#xff0c;只需要去安装好对应的组件&#xff0c;然后通过各式各样的组件引入&#xff0c;实现快速开发 我们这里学习的是 Ant-design &#xff08;应该是这样&#xff09;&#xff0c;它有很多的组件供我们…

计算机网络测试题第二部分

前言:如果没有做在线测试请自主独立完成&#xff0c;本篇文章只作为学习计算机网络的参考&#xff0c;题库中的题存在一定错误和不完整&#xff0c;请学习时&#xff0c;查找多方书籍论证&#xff0c;独立思考&#xff0c;如果存在疑虑可以评论区讨论。查看时&#xff0c;请分清…

pytorch debug 常用工具

自动辨识图像格式可视化 import numpy as np import matplotlib.pyplot as plt from PIL import Imagedef convert_to_numpy(image_input):"""自动检测输入图像类型&#xff0c;并将其转换为NumPy数组。"""if isinstance(image_input, np.ndarr…

7-3 Left-pad

根据新浪微博上的消息&#xff0c;有一位开发者不满NPM&#xff08;Node Package Manager&#xff09;的做法&#xff0c;收回了自己的开源代码&#xff0c;其中包括一个叫left-pad的模块&#xff0c;就是这个模块把javascript里面的React/Babel干瘫痪了。这是个什么样的模块&a…

物联网IC

物联网IC 电子元器件百科 文章目录 物联网IC前言一、物联网IC是什么二、物联网IC的类别三、物联网IC的应用实例四、物联网IC的作用原理总结前言 物联网IC的功能和特性可以根据不同的物联网应用需求来选择和配置,以满足物联网设备在连接、通信、感知和控制方面的需求。 一、物…

猜数字游戏Ⅱ

你和朋友一起玩猜数字游戏&#xff0c;你写出一个秘密数字&#xff0c;请朋友猜这个数字是多少。朋友每猜测一次&#xff0c;你就会给他一个包含下述信息的提示&#xff1a; 猜测数字中有多少位属于数字和确切位置都猜对了&#xff08;称为 "Bulls"&#xff0c;公牛&…

VOL-vue 框架 文件上传控件关于大文件上传等待的修改

我的项目在测试voltable列表组件中对阿里云OSS做附件上传时&#xff0c;几十M的文件可能就会需要一段时间来上传&#xff0c;才能有OSS的状态和链接返回。 但是控件VolUpload.vue并没有去在这方面做任何交互体验上的控制&#xff0c;而且VolUpload.vue本身写的几个上传函数都是…

SpringBoo在项目停止(服务停止/关闭退出)之后执行的方法

SpringBoo在项目停止/服务停止/关闭退出之后执行的方法 1.实现DisposableBean接口2.使用PreDestroy注解 SpringApplication会向JVM注册一个关闭钩子(hook)&#xff0c;以确保ApplicationContext在退出时正常关闭。 可以使用所有标准的Spring生命周期回调&#xff08;例如Dispos…

内测分发是什么?十年的前端开发者带你了解

内测分发是软件开发过程中的一个阶段&#xff0c;特别指软件还未完全完成或准备对外广泛发布前&#xff0c;向一定范围的用户群体提供该软件版本的测试机会&#xff0c;以便收集反馈和修复潜在的问题。在讲解内测分发之前&#xff0c;我们需要明确几个相关概念&#xff1a; 软件…

区块链媒体宣发:揭示优势与趋势,引领信息传播新时代

在数字化潮流中&#xff0c;区块链技术正以惊人的速度改变着传媒行业的格局。从区块链媒体宣发中获得的种种优势和未来的趋势&#xff0c;不仅为企业带来了新的推广途径&#xff0c;也在信息传播领域掀起了一场革命。本文将深入探讨区块链媒体宣发的优势以及未来的发展趋势。 1…