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

这篇具有很好参考价值的文章主要介绍了vue + less 实现动态主题换肤功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

在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 + less 实现动态主题换肤功能,css,vue.js,less

三、修改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 页面注意点说明

vue + less 实现动态主题换肤功能,css,vue.js,less

3. index.vue 效果

(1)默认效果
vue + less 实现动态主题换肤功能,css,vue.js,less
(2)暗黑效果
vue + less 实现动态主题换肤功能,css,vue.js,less

其他校验修改主题成功的方法
在审查元素的body上有你所定义的数据就是了
vue + less 实现动态主题换肤功能,css,vue.js,less

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

1. 代码

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

2. 代码说明

vue + less 实现动态主题换肤功能,css,vue.js,less

3. 打印themsColor

vue + less 实现动态主题换肤功能,css,vue.js,less

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

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

到了这里,关于vue + less 实现动态主题换肤功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 记录--前端换肤方案 - element+less无感换肤(无需页面刷新)

    前不久在改造一个迭代了一年多的项目时,增加了一个换肤功能。通过自己的探索,总结出了一套比较合适的改造方案供大家参考,如有更好的方案欢迎评论区踊跃评论😄 先上效果: 在查阅现有方案时,总结了目前使用的几种方案: 1、定义多套样式 首先定义一套或多套样

    2024年02月08日
    浏览(52)
  • vue css变量实现多主题皮肤切换

    实现方式 多主题皮肤切换有很多种实现方式,可以用css预处理器实现,可以用js实现,其实最近简单的一种方式是用css变量(css variable)实现 单页面应用中,可以通过设置body的css变量爱控制整个系统的颜色,body添加一个属性my-theme,该属性值用来表示当前页面的主题皮肤,切换

    2024年02月06日
    浏览(52)
  • 利用less实现多主题切换(配合天气现象)

    1. 先看效果: 2. 话不多说直接撸吧: 原理:先给body元素添加style,再根据天气现象动态更改style 开撸: 创建src/assets/style/variables.less 使用 @XXX:var(–XXX,‘style’) 声明系列变量,之后添加其他变量直接增加即可(由于之后要配置颜色,默认值可以先给\\\" \\\") 也可以声明一下常用

    2024年02月09日
    浏览(39)
  • Vue 循环map对象拿到key值和value值,VUE 获取对象{}的key值,vue根据对象id删除数组中的对象,实现局部刷新的功能,vue中JS 对象动态添加键值对 vue中JS 对象动态添加键值对

    适用场景: vue中定义的map对象 map : { name : \\\'xxx\\\' } 接口回显map格式的数据 data :{ key : value} 都可以通过以下方式拿到key和value的值 VUE 获取对象{}的key值  vue根据对象id删除数组中的对象,实现局部刷新的功能 方法一:使用过滤器 注:这个一般是根据对象id 方法二:使用splice() 注

    2024年02月16日
    浏览(56)
  • HTML、CSS和JavaScript,实现换肤效果的原理

    这篇涉及到HTML DOM的节点类型、节点层级关系、DOM对象的继承关系、操作DOM节点和HTML元素 还用到HTML5的本地存储技术。 换肤效果的原理:是在选择某种皮肤样式之后,通过JavaScript脚本来加载选中的样式,再通过localStorage存储。 先来回忆一下HTML DOM的相关知识。 DOM模型就是通

    2024年02月06日
    浏览(46)
  • Vue 循环map对象拿到key值和value值,VUE 获取对象{}的key值,vue根据对象id删除数组中的对象,实现局部刷新的功能,vue中JS 对象动态添加键值对

    适用场景: vue中定义的map对象 map : { name : \\\'xxx\\\' } 接口回显map格式的数据 data :{ key : value} 都可以通过以下方式拿到key和value的值 VUE 获取对象{}的key值  vue根据对象id删除数组中的对象,实现局部刷新的功能 方法一:使用过滤器 注:这个一般是根据对象id 方法二:使用splice() 注

    2024年02月08日
    浏览(54)
  • Naive UI+Vue3来实现点击按钮一键切换明暗主题的功能

    记录一下如何使用Naive UI+Vue3代码来实现一键切换明暗主题的功能。 效果如下: 终端下输入: 起好项目的名称,然后一路回车即可。 至此Vue3的项目已经搭建完毕,打开http://127.0.0.1:5173/就可以看到项目的默认首页了。 安装Naive UI依赖库 然后我们根据官方出的配置对项目进行

    2024年02月12日
    浏览(42)
  • 2022 Stylelint 配置详细步骤(css、less、sass、vue适用)

    目录 插件安装 本地配置  忽略文件配置 依赖安装 配置项文件 Endings  Tips 插件安装 我用的软件是VScode,搜索插件: Stylelint   (  版本:v1.2.2 ) 本地配置 打开VScode的设置,打开 settings.json 或者直接在设置里点击这个图标可以自动跳转:  在里面配置一下代码,可根据自己的需

    2024年02月04日
    浏览(50)
  • 记录--Vue3自定义一个Hooks,实现一键换肤

    使用CSS变量, 准备两套CSS颜色 , 一套是在 light模式下的颜色,一套是在dark模式下的颜色 dark模式下的 CSS 权重要比 light 模式下的权重高 , 不然当我们给html添加自定义属性 [data-theme=\\\'dark\\\'] 的时候, dark模式权重比light低,会一直不起效果 当我们点击 dark 模式的时候, 给 html 设置自定义

    2024年02月07日
    浏览(39)
  • 1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。

            注意:         1.背景颜色用ppt的取色器来获取:                 先点击ppt的形状轮廓,然后点击取色器,吸颜色,然后再点击形状轮廓的其他轮廓颜色,即可获取到对应颜色。           2.表格间的灰色线是在th和td中用border属性设置的;         3.在js中拼

    2024年02月16日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包