Taro +vue3 中实现全局颜色css变量的设置和使用

当我们现在需要弄一个随时修改的页面颜色主题色  

我们可以随时修改

我使用的是 Taro 框架

  一般有一个app.less 文件

我们在这个里面 设置一个root 全局样式

:root {--primary-color: #028fd4;--secondary-color: #028fd6;/* 添加其他颜色变量 */
}

这样在全局我们就可以使用这个css 变量

在其他的web端框架 以及uni-app 等移动端框架中 我感觉也是这样使用的  

这个主题色 一般可以这样总定义的 方便我们随时可以 修改前端的主题颜色

css中使用

例如

我们现在使用一个css 样式

.actived {// background-color: #ee0a24 !important;background: linear-gradient(to right, var(--primary-color), var(--secondary-color)) !important;// opacity: 0.2;color: #fff !important;font-size: 18px !important;
}

我们直接把颜色 替换为 

var(--primary-color)

行内中书写 全局变量css

实例

 <nut-button plain @click="forgetPassword" color="linear-gradient(to right, var(--primary-color),var(--secondary-color))"style="border: 0;background-color: #f5f5f5;color: var(--primary-color);">忘记密码</nut-button>

在行内使用 直接是 字符串就行了 不用使用模板字符串 变量 因为本来就不是变量

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

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

相关文章

汽车信息安全--如何理解TrustZone(2)

目录 1.概述 2 如何切换安全状态 3 TrustZone里实现了什么功能&#xff1f; 4. 与HSM的比较 1.概述 汽车信息安全--如何理解TrustZone(1)-CSDN博客讲解了什么是Trustzone&#xff0c;下面我们继续讲解与HSM的区别。 2 如何切换安全状态 在引入安全扩展后&#xff0c;Arm…

OpenHarmony硬件合成方案解析

本文档主要讲解在OpenHarmony中&#xff0c;硬件合成适配的方法及原理说明。 环境说明&#xff1a; OHOS版本&#xff1a;3.1-Release及以上 一、背景介绍 1.1 什么是合成 要理解什么是合成&#xff0c;合成做了什么&#xff1f;我们先通过分解设置界面来回答这个问题: 在…

MySQL中的Performance Schema是什么?

MySQL中的Performance Schema是什么&#xff1f; Performance Schema 是 MySQL 的一个特性&#xff0c;主要用于监控 MySQL 服务器在运行时的性能和资源使用情况。它首次引入于 MySQL 5.5 版本&#xff0c;并在后续版本中得到增强。Performance Schema 提供了一种方式来收集数…

base64算法

1 介绍 将二进制数据编码为文本字符串的算法 理解&#xff1a;把一个能看懂的明文变成一个看不懂的密文数据统称为加密 2 使用 A 在浏览器控制台使用 加密 window.btoa(加密的数据) 解密 window.atob(MTIzNDQ) B 在VSconde中使用 加密 解密

机器学习-保险花销预测笔记+代码

读取数据 import numpy as np import pandas as pddatapd.read_csv(rD:\人工智能\python视频\机器学习\5--机器学习-线性回归\5--Lasso回归_Ridge回归_多项式回归\insurance.csv,sep,) data.head(n6) EDA 数据探索 import matplotlib.pyplot as plt %matplotlib inlineplt.hi…

STM32之串口中断接收丢失数据

五六年没搞STM32了&#xff0c;这个项目一切都挺顺利&#xff0c;万万没想到被串口接收中断恶心到了。遇到的问题很奇怪 HAL_UART_Receive_IT(&huart1, &rx_buffer[rx_index], LCD_UART_LEN); 这个代码中 LCD_UART_LEN1的时候&#xff0c;接收过来的数据&#xff0c;数…

MySQL查询JSON字符串

MySQL版本&#xff1a;8.0.27 表结构及数据 /*Navicat Premium Data TransferSource Server : LocalSource Server Type : MySQLSource Server Version : 80027 (8.0.27)Source Host : 127.0.0.1:3306Source Schema : mumangguoTarget Server T…

如何用Python实现智能客服问答系统

随着人工智能技术的不断发展&#xff0c;机器人客服与聊天系统成为了热门话题。Python作为一种简单易学、功能强大的编程语言&#xff0c;在机器人客服与聊天系统的开发中具有广泛应用。 本文将介绍如何使用Python实现机器人客服与聊天系统&#xff0c;包括实现方式、代码示例和…

可能内存溢出的高级排序算法-归并排序

归并排序 归并排序在经典递归实现中需要的额外空间相对较多。这是因为在归并排序的过程中&#xff0c;需要与原始数组大小相同的额外空间来存储临时合并的数组。所以&#xff0c;其空间复杂度为O(n)&#xff0c;其中n表示待排序数组的长度。在递归过程中&#xff0c;需要创建临…

LeetCode 0039.组合总和:回溯 + 剪枝

【LetMeFly】39.组合总和&#xff1a;回溯 剪枝 力扣题目链接&#xff1a;https://leetcode.cn/problems/combination-sum/ 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合…

[NSSCTF]prize_p5

前言 之前就学过反序列化的字符串逃逸 但是没怎么做题 补一下窟窿 题目 <?phperror_reporting(0);class catalogue{public $class;public $data;public function __construct(){$this->class "error";$this->data "hacker";}public functi…

Ali-Sentinel-链路控制

归档 GitHub: Ali-Sentinel-链路控制 链结构 参考&#xff1a;入口控制-处理链 具体实现 NodeSelectorSlot 给上下文设置统计节点 com.alibaba.csp.sentinel.slots.nodeselector.NodeSelectorSlot Spi(isSingleton false, order Constants.ORDER_NODE_SELECTOR_SLOT)…

2023-2024年度广东省职业院校学生技能大赛“ 网络系统管理”赛项竞赛规程(正式稿)

2023-2024年度广东省职业院校学生技能大赛“ 网络系统管理”赛项竞赛规程&#xff08;正式稿&#xff09; 信息安全管理与评估 网络系统管理 网络搭建与应用 云计算 软件测试 移动应用开发 任务书&#xff0c;赛题&#xff0c;解析等资料&#xff0c;知识点培训服务 添加博主wx…

Python 中的下划线变量

Python 中的下划线变量 _name: 这是一种约定俗成的方式&#xff0c;表示这是一个私有变量&#xff0c;意味着它应该在类的内部使用&#xff0c;而不应该直接从外部访问。但实际上&#xff0c;Python并没有严格的私有化机制&#xff0c;这只是一种约定&#xff0c;因为外部仍然可…

Nginx高级配置与重写规则详解:从入门到实践

摘要: 本文将深入探讨Nginx的高级配置与重写规则,通过实际案例讲解如何优化Nginx的配置,实现URL重写、负载均衡、缓存优化等功能。文章旨在帮助读者更好地理解和应用Nginx,提升网站性能和用户体验。 一、Nginx简介 Nginx是一款高性能的HTTP和反向代理服务器,也是IMAP/POP…

代码随想录训练营day43

第九章 动态规划 part05 1.LeetCode. 最后一块石头的重量 II 1.1题目链接&#xff1a;1049.最后一块石头的重量II 文章讲解&#xff1a;代码随想录 视频讲解&#xff1a;B站卡哥视频 1.2思路&#xff1a;本题其实就是尽量让石头分成重量相同的两堆&#xff0c;相撞之后剩下…

【嵌入式DIY实例】-RFID门禁系统

DIY RFID门禁系统 文章目录 DIY RFID门禁系统1、RFID RC522介绍2、硬件准备与接线2、代码实现RFID(Radio Frequency Identification)简称为射频识别。 在本文中,将演示如何使用这项技术来实现门安全系统。 1、RFID RC522介绍 RFID rc522是一种基于射频的模块,其感应范围接…

Java中的多线程编程与并发控制

Java中的多线程编程与并发控制 一、引言 随着计算机硬件技术的不断发展&#xff0c;多核处理器已经成为现代计算机系统的标配。在这样的背景下&#xff0c;多线程编程与并发控制成为了Java开发中不可或缺的一部分。多线程编程能够充分利用多核处理器的并行计算能力&#xff0…

嵌入式软件工程师要会画板子吗?

答案:要 作为嵌入式软件工程师,本来就经常和硬件打交道。调试各种协议也要看波形,用示波器什么的。软件玩多了也会腻,可以玩玩硬件,自己从 0 做出一个东西的感觉是不一样的。职业生涯那么长,多尝试一些总是好的,一个软硬件都懂的人,才能更好的带项目。 博主玩过很多板…

个人学习-前端相关(1):ECMAScript 6-变量、模板字符串、解构表达式

前言 由于最近公司有接到一些小程序或者app相关的内容&#xff0c;可能考虑要做一些样例供参考。虽然在20年短暂学习和使用过vue2&#xff0c;但由于时间久远且技术发展太快&#xff0c;需要对一些旧知识进行巩固&#xff0c;新的内容进行学习。 ECMAScript 6简介 ECMAScrip…