精华内容
下载资源
问答
  • 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在线动态切换主题色方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 切换主题色(换肤)

    2021-12-09 09:44:21
    先创建几套主题颜色的css文件,这里是在public下 日间主题长这样,css写在root下,自己还需要什么颜色自己可以定义 /*日间模式*/ :root { --menuBg: #3367F5; --menuHover: #263445; } 夜间主题 /*夜间模式*/...

    先创建几套主题颜色的css文件,这里是在public下

     日间主题长这样,css写在root下,自己还需要什么颜色自己可以定义

    /*日间模式*/
    :root {
    	--menuBg: #3367F5;
    	--menuHover: #263445;
    }

    夜间主题

    /*夜间模式*/
    :root {
    	--menuBg: #020D26;
    	--menuHover: #263445;
    }

    注意:日间夜间里面字段一定要对应,简单的讲就是,日间里面有--menuBg,那么夜间里面也要有,只是后面跟的颜色不同

    之后在pubilc文件下的index.html 下引入

      <!--皮肤-->
      <link id="skin" rel="stylesheet" type="text/css" href="./skin/day.css">

    别忘了定义id

    之后呢,在你点击切换主题的事件里,获取id,去修改它,引入不同的css文件就ok了

    document.head.querySelector('#skin').setAttribute('href', `./skin/${skinType}.css`)

    补充:这种css定义的样式在页面上这么用,然后在你切换主题时,后面的样式也会发生变化

     

    展开全文
  • 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方法修改。最终达到效果。

     

    展开全文
  • vue项目更换主题色

    2021-01-06 15:17:03
    需求:不同的项目需要引入同一个模块,但是ui主题色需要修改 解决: 1,后端提供接口,前端动态设置主题色 2,前端主题色配置在less文件中 /** 用于less变量声明 */ @border_color: #e6e6e6; // 边框颜色 @main_...

    需求:不同的项目需要引入同一个模块,但是ui主题色需要修改

    解决:

    1,后端提供接口,前端动态设置主题色

    2,前端主题色配置在less文件中

    /** 用于less变量声明 */
    @border_color: #e6e6e6;    // 边框颜色
    @main_theme: var(--mainTheme, #50CFA0);    // 按钮颜色 字体颜色
    @main_backdrop_theme: var(--mainBackdropTheme, rgba(23, 94, 250, 0.1));      // 半透明背景色
    

    3,main.js文件请求主题色接口设置主题色

    async function getThem() {
      const params = {
        codes: ['mainTheme', 'mainBackdropTheme']
      };
      //axios 请求接口
      const result = await CommonServe.getTheme('INDEX_ID', params);
    
      if (result.code === 0) { // 登陆成功
      //设置主题色
        document.getElementsByTagName('body')[0].style.setProperty('--mainTheme', result.data.mainTheme.value ? result.data.mainTheme.value : '#50cfa0');//如果没有值,就默认一个颜色
        document.getElementsByTagName('body')[0].style.setProperty('--mainBackdropTheme', result.data.mainBackdropTheme.value ? result.data.mainTheme.value : '#50cfa0');//如果没有值,就默认一个颜色
      }
    }
    getThem();
    
    展开全文
  • vue+scss主题色切换

    2021-08-15 16:34:10
    mainColor: #D6000F, //主题色 activeMainColor: #ab343c, //页面主标题色/重要文字/弹框标题色 titleColor: #08121C, //默认字体色/二级信息字体色 infoColor: #545454, //菜单列表背景色 menuBackgroundColor:#BC...
  • <p>ant-design-vue动态切换主题色的自定义样式怎么控制border 宽高这些啊  是用antd-theme-generator实现的 还有其他方法嘛</p>
  • vue 动态更换主题色

    2021-12-11 18:04:46
    1.在全局css里定义一个变量, 值为blue :root{ --theme: blue; } 2.在js中更改css变量(–theme)的值 document.documentElement.style.setProperty("--theme","orange"); 3.在css中使用变量 ...
  • Vue-element自定义切换主题,可以自己随意添加需要的颜色值
  • Vue3.0 antd 2.0 动态切换主题
  • ant-design-vue实现动态切换主题色

    千次阅读 2021-03-29 14:12:13
    1、“ant-design-vue” 不限版本 注意:ant-design-vue是基于babel-plugin-import按需引入的,在根目录下建了babel.config.js内容如下 module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ], ...
  • Vue3.0 antd 2.0 动态切换主题
  • 主要介绍了Vue + Scss 动态切换主题颜色实现换肤的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue项目进行主题色切换,主要是echart、element-ui、主题色等三个位置的颜色调整 echart 和element 调用第三方框架进行切换,提前准备好其主题色 本系统主题色需要自己进行代码提取,经过网上查询,本次采用css...
  • vue.config.js里配置 css: { loaderOptions: { less: { lessOptions: { modifyVars: { 'primary-color': '#5f6c8c', 'link-color': '#5f6c8c', 'border-radius-base': '2px', }, javascriptEnabled: true, }, }, }, ...
  • vue项目中主题色问题

    2021-04-27 14:38:57
    首先主题颜色是后台接口返回到前台的。接下来我总结一下我的项目: 1、这个接口页面一打开就调用了 2、新css属性setProperty document.getElementsByTagName('body')[0].style.setProperty('--primaryColor', '#...
  • 怎样在ant design vue中改主题色 一.使用vue3.0以上版本 二.项目根目录下新建文件vue.config.js module.exports = { css: { loaderOptions: { less: { lessOptions: { // If you are using less-loader@5 ...
  • 本篇文章以less为例,sass可以按照相同逻辑实现。...大家使用的使用可以将这些不同主题色的所有颜色值单独存放在不同的css文件中,方便后期维护。 相关说明: 1.--color-primary以--开头的通通被称为c

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,005
精华内容 802
关键字:

vue切换主题色

vue 订阅