精华内容
下载资源
问答
  • vue 切换主题色

    2020-11-18 10:40:16
    vue 切换主题色 效果 切换主题色思路 使用 vuex 存放当前主题变量 根据主题动态切换根元素 #app 的类名 使用 less 函数与 less 变量控制相应主题色 main.js导入主题文件 代码实现 目录结构 @/theme/...

    vue 切换主题色

    效果

    在这里插入图片描述

    切换主题色思路

    1. 使用 vuex 存放当前主题变量
    2. 根据主题动态切换根元素 #app 的类名
    3. 使用 less 函数与 less 变量控制相应主题色
    4. main.js导入主题文件

    代码实现

    目录结构

    在这里插入图片描述

    @/theme/themeFunction.less用于写 less 函数,主要作用是提供主题样式
    @/theme/theme.less用于调用 less 函数,传入主题色

    编码

    • vuex 中存放主题色和修改主题色的方法
    state: {
      theme: 'blue' // 主题色
    },
    mutations: {
      // 修改主题色
      changeTheme (state, val) {
        state.theme = val
      }
    }
    
    • 给根元素动态赋类名@/src/App.vue
    <template>
      <div id="app" :class="`${theme}_theme`">
        <!-- ... -->
      </div>
    </template>
    
    <script>
    import { mapState } from 'vuex'
    export default {
      computed: {
        ...mapState(['theme']),
      },
    }
    </script>
    
    • 编写 less 函数@/theme/themeFunction.less
    // themeFn接收多个参数
    .themeFn(@themeColor, @themeColorHover, @themeColorActive, @themeColorDisable) {
      // themeFn内部只书写与颜色相关的样式(以下样式仅供参考,具体代码需要结合项目修改)
      // 推荐使用 !important
    
      // 定义字体颜色,项目中有需要修改字体颜色的地方,直接加上 theme_font_color 类名即可
      .theme_font_color {
        color: @themeColor !important;
      }
    
      // 定义 elementUI 按钮颜色,项目中有需要修改按钮颜色的地方,直接加上 custom_btn_plain 类名即可
      .custom_btn_plain {
        &.el-button {
          border-color: @themeColor !important;
          color: @themeColor !important;
          &:hover {
            border-color: @themeColorHover !important;
            background: @themeColorHover !important;
            color: #ffffff !important;
          }
          &:active {
            border-color: @themeColorActive !important;
            background: @themeColorActive !important;
            color: #ffffff !important;
          }
        }
        &.is-disabled,
        &.is-disabled:hover,
        &.is-disabled:active {
          border-color: @themeColorDisable !important;
          background: @themeColorDisable !important;
        }
      }
    }
    
    • 调用 less 函数@/theme/theme.less
    // 注意需要导入themeFunction文件
    @import './themeFunction.less';
    // 蓝色主题
    .blue_theme {
      .themeFn(
        rgba(21, 142, 238, 1),
        rgba(34, 159, 247, 1),
        rgba(1, 137, 217, 1),
        rgba(34, 159, 247, 0.3)
      );
    }
    
    // 红色主题
    .red_theme {
      .themeFn(
        rgba(207, 0, 112, 1),
        rgba(215, 0, 64, 1),
        rgba(200, 8, 82, 1),
        rgba(215, 0, 64, 0.3)
      );
    }
    
    • main.js导入主题文件
    // ...
    import './theme/theme.less'
    // ...
    

    写在最后

    以上仅为部分核心代码,换肤方案完整 demo 请参考我的github 仓库

    展开全文
  • vue切换主题

    千次阅读 2019-05-14 19:38:44
    本文介绍两种elementUI切换主题色的方法 项目示例:https://github.com/yangzm0618/tags 1:官方提供的方法,直接修改scss文件达到修改目的,开发人员使用(比官网容易理解,有图有真相)。 2:通过选颜色值在...

    本文介绍两种elementUI切换主题色的方法

    项目示例:https://github.com/yangzm0618/tags

     

    1:官方提供的方法,直接修改scss文件达到修改目的,开发人员使用(比官网容易理解,有图有真相)。

    2:通过选颜色值在项目中达到换肤目的,用户使用。此方法根据官方主题切换修改而来

    先搭建项目:

      npm install -g vue //全局安装vue

      npm install -g webpack //全局安装webpack

      npm install -g vue-cli //全局安装vue-cli

      ---->

      进入项目目录--->

      vue-init webpack  my-project (vue init webpack  my-project 这个官方已不用,使用会报错)

      

       然后一次做下去就好了--->

      安装elementUI :npm i element-ui -S

      安装sass: npm install node-sass sass-loader --save-dev

      项目结构 -----------------运行结果

             

     

    1. 第一种方法,官方提供的方法,直接修改scss

      在main.js引入elementUI,以及主题:(主题是可以自己设置下载配置的--官方工具

      

      然后在项目src->assets目录下创建element-variables.scss 内容可以从官网复制过来,  然后在main.js引入,见上图注释的代码

        结束第一种,可以随便写几个element组件试试下

     

    2:通过选颜色值在项目中达到换肤目的,根据官方修改主题项目修改而来

      说明:项目主题分为两部分,一个是element组件主题,一个是自己定义组件或者DOM主题。

      此方法主要思路就是:用户先从线上拉去配置主题的css文件,当用户更改颜色后,在把css文件里面所有的颜色值

      替换掉,然后把这个css文件重新插入到html中达到改变颜色。

      在这里都需要修改再方法1的基础上进行扩展:在element-variables.scss添加 默认我们自己设置的颜色。

      当然这个颜色也可以在其他公共css修改。

      1.    

      2. 安装两个插件:

        npm install css-color-function  

        npm install object-assign

       3. 

      4. 从 unpkg.com/element-ui/lib/theme-chalk/index.css 把最新css文件复制下来copy到项目静态文件目录中:

        因为:项目中是先从element官方拉取主题css,如果拉取不到再去本地找备用的。

        

      5.接下来就是写代码了。在App.vue上引入自定义的修改主题组件,在随便弄些element组件观察变化:

        

      5. 写组件:Theme.vue  

    复制代码

     <!-- 切换主题色  -->
    <template>
        <div>
            <el-color-picker  @change="colorChange" v-model="colors.primary" ></el-color-picker>
        </div>
    </template>
    <script>
    import generateColors from "../../utils/color";
    import objectAssign from "object-assign";
    export default {
        name: "App",
        data() {
            return {
                originalStylesheetCount: -1,//记录当前已引入style数量
                originalStyle: "",//获取拿到的.css的字符串
                colors: {
                    //颜色选择器默认颜色值,这个值要和element-variables一样
                    primary: "#409EFF"
                },
                // primaryColor: "", //提交成功后设置默认颜色
                cssUrl: [
                    "//unpkg.com/element-ui/lib/theme-chalk/index.css",
                    "./static/css/index.css"
                ]
            };
        },
        methods: {
            colorChange(e) {
                if(!e)return;
                localStorage.setItem('color',e)
                this.primaryColor = this.colors.primary;
                this.colors = objectAssign(
                    {},
                    this.colors,
                    generateColors(this.colors.primary)
                );
                this.writeNewStyle();
            },
            writeNewStyle() {
                let cssText = this.originalStyle;
                Object.keys(this.colors).forEach(key => {
                    cssText = cssText.replace(
                        new RegExp("(:|\\s+)" + key, "g"),
                        "$1" + this.colors[key]
                    );
                });
                if (this.originalStylesheetCount === document.styleSheets.length) {
                    // 如果之前没有插入就插入
                    const style = document.createElement("style");
                    style.innerText =
                        ".primaryColor{background-color:" + this.colors.primary + "}" + cssText;
                    document.head.appendChild(style);
                } else {
                    // 如果之前没有插入就修改
                    document.head.lastChild.innerText =
                        ".primaryColor{background-color:" +
                        this.colors.primary +
                        "} " +
                        cssText;
                }
            },
            getIndexStyle(url) {
                let that = this;
                var request = new XMLHttpRequest();
                request.open("GET", url);
                request.onreadystatechange = function() {
                    if (
                        request.readyState === 4 &&
                        (request.status == 200 || request.status == 304)
                    ) {
                        // 调用本地的如果拿不到会得到html,html是不行的
                        if (request.response && !/DOCTYPE/gi.test(request.response)) {
                            that.originalStyle = that.getStyleTemplate(request.response);
                            that.writeNewStyle()
                        } else {
                            that.originalStyle = "";
                        }
                    } else {
                        that.originalStyle = "";
                    }
                };
                request.send(null);
            },
            getStyleTemplate(data) {
                const colorMap = {
                    "#3a8ee6": "shade-1",
                    "#409eff": "primary",
                    "#53a8ff": "light-1",
                    "#66b1ff": "light-2",
                    "#79bbff": "light-3",
                    "#8cc5ff": "light-4",
                    "#a0cfff": "light-5",
                    "#b3d8ff": "light-6",
                    "#c6e2ff": "light-7",
                    "#d9ecff": "light-8",
                    "#ecf5ff": "light-9"
                };
                Object.keys(colorMap).forEach(key => {
                    const value = colorMap[key];
                    data = data.replace(new RegExp(key, "ig"), value);
                });
                return data;
            }
        },
        mounted() {
            // 默认从线上官方拉取最新css,2秒钟后做一个检查没有拉到就从本地在拉下
            let that = this;
            // 如果是记住用户的状态就需要,在主题切换的时候记录颜色值,在下次打开的时候从新赋值
            this.colors.primary = localStorage.getItem('color')||this.colors.primary//例如
            this.getIndexStyle(this.cssUrl[0]);
            setTimeout(function() {
                if (that.originalStyle) {
                    return;
                } else {
                    that.getIndexStyle(that.cssUrl[1]);
                }
            }, 2000);
            this.$nextTick(() => {
                // 获取页面一共引入了多少个style 文件
                this.originalStylesheetCount = document.styleSheets.length;
            });
        }
    };
    </script>
    

     

    展开全文
  • 主要介绍了vue在线动态切换主题色方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue项目实现切换主题色思路

    千次阅读 2020-11-03 17:22:15
    需求:用户通过取色器选择自己喜欢的颜色,替换项目中的主题色 实现效果: 实现思路: 在项目中使用的是less,使用@themeColor定义了...首先在App.vue中设置主题色: <style lang="less"> #app { --the

    需求:用户通过取色器选择自己喜欢的颜色,替换项目中的主题色

    实现效果:

    实现思路:

    在项目中使用的是less,使用@themeColor定义了主题色,便想着尝试用js修改less的变量即可,但查询了一下只知道有less.modifyVars方法可以修改,但没有详细的说明,顺便查到了可以修改js可以修改原生css的变量,而且简单易懂,便尝试使用css来定义主题色并设置修改。

    首先在App.vue中设置主题色:

    <style lang="less">
    #app {
        --themeColor:#008cff;
    }
    </style>

     和使用less并不冲突,使用--定义变量有自己的作用域,所以最好在根目录定义,这里我选择App.vue的#app父容器中定义。

    定义好之后怎么使用呢,只需要在子组件的style中使用var(--themeColor)即可使用。

    <style lang="less">
    .z-header-container {
        width: 100%;
        height: 66px;
        //background: #fff;
        text-align: center;
        background: var(--themeColor);
    }
    </style>

    接下来便是怎么让用户能够来修改这个主题色,首先想到这是一个全局的变量,在vue中管理全局变量自然是使用vuex

    在store文件中定义好themeColor变量,以及修改它的方法changeThemeColor。

    import Vue from "vue";
    import Vuex from "vuex";
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
        state:{
            themeColor: "#008cff"
        },
        mutations:{
            changeThemeColor(state,val){
                state.themeColor = val;
            }
        }
    })
    
    export default store;

     在main.js中引入store

     然后在头部组件中使用elementUI的颜色选择器,当用户修改颜色时,提交修改,修改state中的主题色

     然后在App.vue中监听state中主题色的改变。要是改变了,也就改变对应css的主题色变量:

    首先用computed计算属性得到themeColor的值,然后使用watch监听,改变的话使用.setProperty方法修改。最终达到效果。

     

    展开全文
  • 'red'类似颜色暂不支持 到此这篇关于vue在线动态切换主题色方案的文章就介绍到这了,更多相关vue 动态切换主题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们! 时间: 2020-03-25

    主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css

    具体实现步骤如下:

    1.添加webpack插件,新建文件webpack/themePlugin.js

    const ThemeColorReplacer = require('webpack-theme-color-replacer')

    const forElementUI = require('webpack-theme-color-replacer/forElementUI')

    const config = require('../src/config/appConfig')

    module.exports = new ThemeColorReplacer({

    fileName: 'css/theme-colors.[contenthash:8].css',

    matchColors: [

    ...forElementUI.getElementUISeries(config.themeColor), //element-ui主色系列

    // '#0cdd3a', //自定义颜色

    ],

    changeSelector: forElementUI.changeSelector,

    isJsUgly: process.env.NODE_ENV !== 'development',

    // injectCss: false,

    // resolveCss(resultCss) { // optional. Resolve result css code as you wish.

    // return resultCss + youCssCode

    // }

    })

    matchColors数组中可配置多个自定义要替换的主题色

    2.在vue.config.js中添加这个插件

    const themePlugin=require('./webpack/themePlugin');

    module.exports = {

    configureWebpack: {

    plugins: [

    themePlugin

    ]

    }

    }

    3.新建文件themeColorClient.js

    import client from 'webpack-theme-color-replacer/client'

    import forElementUI from 'webpack-theme-color-replacer/forElementUI'

    import appConfig from '@/config/appConfig'

    export let curColor = appConfig.themeColor

    // 动态切换主题色

    export function changeThemeColor(newColor) {

    var options = {

    newColors: [...forElementUI.getElementUISeries(newColor)],

    }

    return client.changer.changeColor(options, Promise)

    .then(() => {

    curColor = newColor

    localStorage.setItem('theme_color', curColor)

    });

    }

    export function initThemeColor() {

    const savedColor = localStorage.getItem('theme_color')

    if (savedColor) {

    curColor = savedColor

    changeThemeColor(savedColor)

    }

    }

    4.在需要的时候调用 initThemeColor初始化颜色 changeThemeColor改变主题颜色

    import { initThemeColor,changeThemeColor } from './utils/themeColorClient'

    initThemeColor()

    changeThemeColor('#F56C6C')//传入颜色格式应该为十六进制颜色值,'red'类似颜色暂不支持

    到此这篇关于vue在线动态切换主题色方案的文章就介绍到这了,更多相关vue 动态切换主题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

    时间: 2020-03-25

    展开全文
  • vue 主题更换 elemeny-ui下动态切换主题色 一、文章学习来源 https://www.cnblogs.com/rogerwu/p/9542165.html 二、在这里插入代码片 <template> <el-color-picker class="theme-picker" popper-class=...
  • 1、“ant-design-vue” 不限版本 注意:ant-design-vue是基于babel-plugin-import按需引入的,在根目录下建了babel.config.js内容如下 module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ], ...
  • vue项目进行主题色切换,主要是echart、element-ui、主题色等三个位置的颜色调整 echart 和element 调用第三方框架进行切换,提前准备好其主题色 本系统主题色需要自己进行代码提取,经过网上查询,本次采用css...
  • appConfig.themeColor // 动态切换主题色 export function changeThemeColor(newColor) { var options = { newColors: [...forElementUI.getElementUISeries(newColor)], } return client.changer.changeColor...
  • 1.创建项目使用vue-cli V3.0+创建项目vue create antd-vue-theme-demo选择css预处理器(其他的根据项目所需选择)由于ant-design-vue的样式使用的是less作为开发语言,所以这里我们选择Less其他的根据自己的需要配置...
  • 事先声明:本文没有使用到Element官网的切换主题方法。 解决这个需求,我用到的是less,并且通过动态修改class来完成的。 第一步先引入less,这里默认安装好了Node.js。 npm install less less-loader --save-dev ...
  • vue + element-UI 实现深色模式和主题色动态切换 ...我看了ruoyi项目之后,感觉被它的可以切换主题色惊艳到了(当然其他也是,如代码生成,动态路由等等),但是它虽然做了深色模式,但是深色模式只涉及了菜
  • vue,elementUI切换主题,自定义主题

    千次阅读 2018-09-28 16:33:00
    本文介绍两种elementUI切换主题色的方法 项目示例:http://test.ofoyou.com/theme/ git代码:记得star哦,谢谢 1:官方提供的方法,直接修改scss文件达到修改目的,开发人员使用(比官网容易理解,有图有真相)。 ...
  • 项目项目中用了element-ui,有切换主题色的需要。但官方的方式,有几个问题: 1、需要下载整个element-ui的样式css,并替换其中的css样式颜色。文件较大,下载慢且影响性能。 2、只能替换element-ui本身的颜色样式...

空空如也

空空如也

1 2 3 4 5
收藏数 97
精华内容 38
关键字:

vue切换主题色

vue 订阅