vue + less 实现动态主题换肤功能

文章目录

  • 前言
  • 一、前提条件
    • 1. 初始化vue项目
    • 2. 安装插件
  • 二、新建文件夹主题theme
    • 1.style.less文件
    • 2.model.js文件
    • 3.theme.js文件
    • theme文件夹最终效果
  • 三、修改vue.config.js文件
  • 四、页面上的具体使用
    • 1. index.vue 页面
    • 2. index.vue 页面注意点说明
    • 3. index.vue 效果
  • 五、在js中使用定义的颜色变量
    • 1. 代码
    • 2. 代码说明
    • 3. 打印themsColor
  • 六、关于定义颜色的变量不是十六进制的原因


前言

在vue项目中(我的是2.6.11版本的)使用less做到切换主题肤色。话不多说,直接开始。

一、前提条件

1. 初始化vue项目

我这里的项目是2.6.11版本的

"vue": "^2.6.11",

2. 安装插件

安装一些less的插件

npm install less --save // less插件
npm install less-loader@5.0.0 --save // less-loader作用就是将less代码转译为浏览器可以识别的CSS代码。
npm install style-resources-loader -D // 在样式引入时,对于变量的引入,需要在每个文件里都要引入一遍,为了避免每次使用时都需要单独引入一遍的问题,采用了 style-resources-loader

二、新建文件夹主题theme

路径: src > assets > style > theme
翻译:theme 的中文就是主题
注意点:考虑到切换样式也是样式中的,所以放在style里面,当然,你可以放在任意位置,只要你后面的路径同一改了就好。

1.style.less文件

// 默认的主题颜色(白低黑字)
@baseColor: var(--baseColor, rgba(25,121,255));
@pageBgColor: var(--pageBgColor, rgba(255,255,255));
@scrollBgColor: var(--scrollBgColor, rgba(0, 0, 0));
@resultBgColor: var(--resultBgColor, rgba(255,192,203));
@resultBorderColor: var(--resultBorderColor, rgba(255,255,0));
@resultTextColor: var(--resultTextColor, rgba(0,0,0, 0.9));

// 导出变量 (如果在 src/assets/style/theme/model文件中配置了,就直接导出里面的字体使用)
:export {
  name: "less";
  baseColor: @baseColor;
  pageBgColor: @pageBgColor;
  scrollBgColor: @scrollBgColor;
  resultBgColor: @resultBgColor;
  resultBorderColor: @resultBorderColor;
  resultTextColor: @resultTextColor;
}

2.model.js文件

// 一套默认主题以及一套暗黑主题
export const themes = {
  default: {
    baseColor: `${25}, ${121},${255}`, // 基色(无变化) 
    pageBgColor: `${255}, ${255},${255}`, // 页面的背景色
    scrollBgColor: `${0}, ${0},${0}`, // 滚动条的背景色
    resultBgColor: `${255}, ${192},${203}`, // 结果背景色
    resultBorderColor: `${255}, ${255},${0}`, // 结果区背景色
    resultTextColor: `${0}, ${0},${0}, 0.9`, // 结果文字
  },
  dark: {
    baseColor: `${25}, ${121},${255}`, // 基色(无变化) 
    pageBgColor: `${0}, ${0},${0}`, // 页面的背景色
    scrollBgColor: `${255}, ${255},${255}`, // 滚动条的背景色
    resultBgColor: `${135}, ${206},${235}`, // 结果背景色
    resultBorderColor: `${0}, ${128},${0}`, // 结果区背景色
    resultTextColor: `${255}, ${255},${255}, 0.9`, // 结果文字
  },
};

3.theme.js文件

import { themes } from "./model";
// 修改页面中的样式变量值
const changeStyle = (obj) => {
  for (let key in obj) {
    document
      .getElementsByTagName("body")[0]
      .style.setProperty(`--${key}`, obj[key]);
  }
};
// 改变主题的方法
export const setTheme = (themeName) => {
  localStorage.setItem("theme", themeName); // 保存主题到本地,下次进入使用该主题
  const themeConfig = themes[themeName] ? themes[themeName] : themes['default'];
  changeStyle(themeConfig);
};

theme文件夹最终效果

在这里插入图片描述

三、修改vue.config.js文件

const path = require('path');
module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
        path.resolve(__dirname, "./src/assets/style/theme/style.less"),
      ],
    },
  },
};

注意: 修改vue.config.js文件 记得重新启动项目。

四、页面上的具体使用

1. index.vue 页面

<template>
  <div class="index">
    <button class="btn" @click="themeDefault">默认</button>
    <button class="btn" @click="themeDark">暗黑</button>
    <div class="content">
      这是一个可以切换主题的盒子
    </div>  
  </div>  
</template>

<script>
import { setTheme } from "../assets/style/theme/theme"; // 引入切换主题方法
export default {
  data() {
    return {
    }
  },
  methods: {
  // 默认主题方案(白底黑字)
    themeDefault() {
      document.documentElement.removeAttribute('theme-mode'); // 重置为浅色模式
      this.themeChange = true;
      setTheme("default"); // 初始化未默认主题
    },

    // 暗黑主题(黑底白字)
    themeDark() {
      document.documentElement.setAttribute('theme-mode', 'dark'); // 重置为深色模式
      this.themeChange = false;
      setTheme("dark");
    },
  },
  mounted: function() {
    this.themeDefault(); // 进入页面默认渲染默认主题方案
  }
}
</script>

<style lang="less" scoped>
@import '../assets/style/theme/style.less'; // 引入主题样式文件

.index{
  width: 100%;
  height: 100%;
  .btn {
    width: 50px;
    height: 30px;
    background-color: green;
  }
  .content {
    width: 100px;
    height: 100px;
    color: rgba(@resultTextColor, 1);
    background-color: rgba(@resultBgColor, 1);
    border: 10px solid  rgba(@resultBorderColor, 1);
  }
}
</style>

2. index.vue 页面注意点说明

在这里插入图片描述

3. index.vue 效果

(1)默认效果
在这里插入图片描述
(2)暗黑效果
在这里插入图片描述

其他校验修改主题成功的方法
在审查元素的body上有你所定义的数据就是了
在这里插入图片描述

五、在js中使用定义的颜色变量

1. 代码

import themsColor from '../assets/style/theme/style.less'; // 引入主题样式文件
export default {
  data() {
    return {
      themsColor,
    }
  },
  mounted: function() {
    console.log('themsColor', themsColor);
  }
}

2. 代码说明

在这里插入图片描述

3. 打印themsColor

在这里插入图片描述

六、关于定义颜色的变量不是十六进制的原因

如果你在modes.js中使用 #ffffff #333333 类似这样的颜色,其实也是可以的,而且在页面中可以直接使用 color: @resultTextColor,看过去似乎简单了很多,那为什么要改用rgb的方式呢?
相信有仔细注意代码的人可能注意到了这个颜色的值${255}, ${255},${255}, 0.9, 是的,透明度。
如果直接写死的十六进制的话,没有可以操作的空间。包括我实际项目最开始用的也是十六进制,后面才改成的rgb的方式。不仅仅是文字,包括颜色中也会有禁用等需要直接修改透明度的方法,不用因此再添加一个类似的变量考虑才使用的rgba的方法。当然,这也仅仅是一种思路。如果你有更好的方法可以忽略。
注意点:有透明度的就和颜色一样,加在后面就好了,没有透明度的话,就在后面加上1,不然可能没效果

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

空降流量危机?QQ音乐升级架构应对高并发

# 关注并星标腾讯云开发者 # 每周3 | 谈谈我在腾讯的架构设计经验 # 第2期 | 赵威&#xff1a;QQ音乐评论系统如何实现高可用&#xff1f; QQ 音乐自诞生以来&#xff0c;已有多个版本的评论业务系统。最新版本是19年再次全新迭代&#xff0c;基于 tlist 存储&#xff0c;按照发…

SpringBoot复习:(48)RedisAutoConfiguration自动配置类

RedisAutoConfiguration类代码如下&#xff1a; 可以看到在这个类中配置了2个bean: redisTemplate和stringRedisTemplate. 而它通过EnableConfigurationProperties(RedisProperties.class)注解&#xff0c;把配置文件中配置的Redis相关的信息引入进来了&#xff0c;RedisPrope…

FPGA应用学习笔记------系统复位一(同异复位)

要满足复位恢复时间才能正常复位&#xff0c;不然会产生输出准稳态&#xff0c;输出逻辑错误 复位恢复时间只会存在复位释放时刻&#xff0c;不会出现在确立时刻&#xff0c;则不推荐完全异步复位 完全同步复位&#xff0c;肯定是同步于时钟滴&#xff0c;并将总是满足时钟条件…

arcgis pro3.0-3.0.1-3.0.2安装教程大全及安装包下载

一. 产品介绍&#xff1a; ArcGIS Pro 这一功能强大的单桌面 GIS 应用程序是一款功能丰富的软件&#xff0c;采用 ArcGIS Pro 用户社区提供的增强功能和创意进行开发。 ArcGIS Pro 支持 2D、3D 和 4D 模式下的数据可视化、高级分析和权威数据维护。 支持通过 Web GIS 在一系列 …

windows下dll文件的创建详细教程

1、前言 dll文件是啥&#xff0c;就不作过多赘述了。现在直接教大家如何创建与使用dll文件。 本文基于windows系统&#xff0c;使用的编译相关工具为visual studio 2019。 2、创建dll 2.1 创建dll工程 首先打开visual studio&#xff0c;然后选择创建新项目&#xff0c;在搜…

Scratch 之 制作超丝滑 FNF 推条

这个教程是不用画笔的&#xff0c;所以不用担心推条是最后一层了&#xff01; 导入素材 你以为真是这样吗&#xff1f;NO&#xff0c;NO&#xff0c;NO&#xff0c;其实是这样的 没错&#xff0c;中间是空的&#xff01;中间是空的&#xff01;中间是空的&#xff01;&#xf…

云计算-知识点大纲

前言&#xff1a;云计算的基本概念学习&#xff0c;基础知识大纲梳理。 说明&#xff1a;仅仅是知识点的整理&#xff0c;很多内容直接从阿里云、腾讯云、华为云等直接搬运过来的。 云计算 云计算的概念 什么是云计算&#xff1f;百度百科的介绍如下&#xff1a; “云”实…

Layui精简版,快速入门

目录 LayUI之入门 1.什么是layui 2.layui入门 3.自定义模块 4.用户登录 5.主页搭建 LayUI之动态树 main.jsp main.js LayUI之动态选项卡 1.选项卡 main.jsp main.js 2.用户登录 User.java UserDao.java UserAction.java R.java LayUI之用户管理 1.用户查询…

如何实现Excel中多级数据联动

摘要&#xff1a;本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 前言 在类Excel表格应用中&#xff0c;常用的需求场景是根据单元格之间的数据联动&…

【Vue-Router】嵌套路由

footer.vue <template><div><router-view></router-view><hr><h1>我是父路由</h1><div><router-link to"/user">Login</router-link><router-link to"/user/reg" style"margin-left…

62、华为昇腾开发板Atlas 200I DK A2配置mmpose的hrnet模型推理python/c++

基本思想&#xff1a;适配mmpose模型&#xff0c;记录一下流水帐&#xff0c;环境配置和模型来自&#xff0c;请查看参考链接。 链接: https://pan.baidu.com/s/1IkiwuZf1anyKX1sZkYmD1g?pwdi51s 提取码: i51s 一、转模型 (base) rootdavinci-mini:~/sxj731533730# atc --mo…

pytest的fixture梳理

fixture特性 1. 可以重复使用&#xff0c;多个用例可以使用同一个fixture 2. 一个测试用例可以使用多个装置 import pytest # Arrange pytest.fixture def first_entry():return "a"# Arrange pytest.fixture def second_entry():return 2# Arrange pytest.fixtur…

深入探索:解读创意的力量——idea的下载、初步使用

目录 ​编辑 1.IDEA的简介 2.IDEA的下载 2.1下载路径https://www.jetbrains.com/zh-cn/idea/download/?sectionwindows​编辑​ 2.2下载的步骤 3 idea的初步使用 3.1新建一个简单的Java项目 3.1.1首先需要创建一个新的工程 3.1.2创建一个新的项目&#xff08;模块&am…

java实现docx,pdf文件动态填充数据

一&#xff0c;引入pom 根据需求引入自己所需pom org.apache.poi poi 4.1.1 org.apache.poi poi-ooxml 4.1.1 org.jxls jxls 2.6.0 ch.qos.logback logback-core org.jxls jxls-poi 1.2.0 fr.opensagres.xdocreport fr.opensagres.xdocreport.core 2.0.2 fr.opensagres.xdocrep…

【CSS】文本效果

文本溢出、整字换行、换行规则以及书写模式 代码&#xff1a; <style> p.test1 {white-space: nowrap; width: 200px; border: 1px solid #000000;overflow: hidden;text-overflow: clip; }p.test2 {white-space: nowrap; width: 200px; border: 1px solid #000000;ove…

深入探索Spring框架:解密核心原理、IOC和AOP的奥秘

深入探索Spring框架&#xff1a;解密核心原理、IOC和AOP的奥秘 1. 理解 Spring 的核心原理1.1 控制反转&#xff08;IOC&#xff09;1.2 面向切面编程&#xff08;AOP&#xff09; 2. 深入 IOC 容器的实现机制2.1 容器的创建2.2 Bean 的生命周期2.3 依赖注入 3. 深入 AOP 的实现…

IP 协议的相关特性和数据链路层相关知识总结

目录 IP 协议的相关特性 一、IP协议的特性 二、 IP协议数据报格式 三、 IP协议的主要功能 1. 地址管理 动态分配 IP地址 NAT机制 NAT背景下的通信 IPV6 2. 路由控制​​​​​​​ 3.IP报文的分片与重组 数据链路层相关知识 1、以太网协议&#xff08;Ethernet&#xff09; 2.M…

SpringBoot系列---【SpringBoot在多个profiles环境中自由切换】

SpringBoot在多个profiles环境中自由切换 1.在resource目录下新建dev&#xff0c;prod两个目录&#xff0c;并分别把dev环境的配置文件和prod环境的配置文件放到对应目录下&#xff0c;可以在配置文件中指定激活的配置文件&#xff0c;也可以默认不指定。 2.在pom.xml中最后位置…

php从静态资源到动态内容

1、从HTML到PHP demo.php:后缀由html直接改为php,实际上当前页面已经变成了动态的php应用程序脚本 demo.php: 允许通过<?php ... ?>标签,添加php代码到当前脚本中 php标签内部代码由php.exe解释, php标签之外的代码原样输出,仍由web服务器解析 <!DOCTYPE html>…

zabbix案例--zabbix监控Tomcat

目录 一、 部署tomcat 二、配置zabbix-java-gateway 三、配置zabbix-server 四、配置zabbix-web界面 一、 部署tomcat tar xf apache-tomcat-8.5.16.tar.gz -C /usr/local/ ln -sv /usr/local/apache-tomcat-8.5.16/ /usr/local/tomcat cd /usr/local/tomcat/bin开启JMX…