精华内容
下载资源
问答
  • vue更换主题设置主题

    2021-01-27 17:08:34
    用var来盛放变量名 2、在代码中使用(在main.js引入后就不需要在每个vue单页面中引入了,怎么实现,网上也有很多) background-color: $bgWhiteColor; 3、点击的时候改变css变量的值,document.getElementsByTagName...

    1、创建一个后缀为.scss文件将下述代码放进去。将scss文件引入main.js中(如果引入报错可以网上搜一下,很多!)

    :root {
        --bg_white_color: #fff;
        --bg_pink_color:pink;
        --bg_black_color:#373737;
        --bg_huiSe_color:#ccc;
        --bg_HongSe_color:#E02D30;
    }
     
    $bgWhiteColor: var(--bg_white_color); //白色。用var来盛放变量名
    $bgPinkColor: var(--bg_pink_color); // 粉色。用var来盛放变量名
    $bgBlackColor: var(--bg_black_color); //黑色。用var来盛放变量名
    $bgHuiSeColor: var(--bg_huiSe_color); //灰色。用var来盛放变量名
    $bgHongSeColor: var(--bg_HongSe_color); //主题红色。用var来盛放变量名
    

    2、在代码中使用(在main.js引入后就不需要在每个vue单页面中引入了,怎么实现,网上也有很多)

    background-color: $bgWhiteColor;
    

    3、点击的时候改变css变量的值,document.getElementsByTagName(‘body’)[0].style.setProperty()改变的是css变量的值。

    pinkThem(){//点击事件
                document.getElementsByTagName('body')[0].style.setProperty('--bg_white_color','pink');
                document.getElementsByTagName('body')[0].style.setProperty('--bg_pink_color','pink');
                document.getElementsByTagName('body')[0].style.setProperty('--bg_black_color','pink');
            },
     
    
    展开全文
  • 1.换主题颜色 在这个面板重新下载规定好颜色 按下载按钮 然后将下载得到的css文件跟原先引用的element-ui的css文件替换下 2.更换语言

    1.换主题颜色

    在这个面板重新下载规定好颜色 按下载按钮 然后将下载得到的css文件跟原先引用的element-ui的css文件替换下
    在这里插入图片描述
    在这里插入图片描述

    2.更换语言

    第四行en可以换 换了之后就是其他语言了
    在这里插入图片描述

    展开全文
  • Ant-design-vue更换主题

    万次阅读 2019-03-28 14:44:15
    使用ant-design-vue,框架本身使用的蓝色主题色,需要更换成UI指定的颜色。 解决方案 在build文件夹下找到util.js,在util.js文件中找到function generateLoaders,修改return部分 // ...

    需求

    使用ant-design-vue,框架本身使用的蓝色主题色,需要更换成UI指定的颜色。

    解决方案

    在build文件夹下找到util.js,在util.js文件中找到function generateLoaders,修改return部分

    // https://vue-loader.vuejs.org/en/configurations/extract-css.html
      return {
        css: generateLoaders(),
        postcss: generateLoaders(),
       // less: generateLoaders('less'),
       less: generateLoaders('less', {
        modifyVars: {
        // 这三个地方都设置成你需要的主题色
        'primary-color': '#d10100',
        'link-color': '#d10100',
        'border-radius-base': '2px',
      },
      javascriptEnabled: true,
      }),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
      }
    

    踩坑注意

    此处只提供使用vue-cli构建的项目踩坑提示,如果在main.js中引入的是antd.css,需要注意可能修改了不生效,此时需要将main.js中引入的antd.css修改成antd.less, 并且安装less loader,执行:npm install less less-loader --save-dev即可安装。

    其他构建方式如果修改之后不生效请参看官网:
    ant-design-vue配置主题色不生效

    展开全文
  • renren-fast-vue-源码

    2021-03-20 04:14:45
    renren-fast-vue基于vue,element-ui进行开发,实现后台管理前端功能,提供一套更优的前端解决方案 前一级分离,通过token进行数据交互,可独立部署 主题定制,通过scss变量统一一站式定制 动态菜单,通过菜单管理...
  • vue实现换主题\皮肤功能

    千次阅读 2019-02-13 17:16:52
    现在的app和pc网站做的越来越花哨,但是有时候用户并不喜欢你给他挑选好的主题颜色,这个时候就需要一个皮肤的功能了。 那么我们怎么在vue中实现这个皮肤的功能呢? 实现思路 我们用vue一般都是写单页面...

    现在的app和pc网站做的越来越花哨,但是有时候用户并不喜欢你给他挑选好的主题颜色,这个时候就需要一个换皮肤的功能了。

    那么我们怎么在vue中实现这个换皮肤的功能呢?
    打包完成

    1. 实现思路

      • 我们用vue一般都是写单页面程序,因此在实际发布的时候只有一个html以及一堆静态文件(js、css、img之类)。而在html中引用了这些js和css。我们要换皮肤的话其实就是动态的去切换css,所以在这里实现换皮肤其实也就是动态的更改html中引用css的路径,使得当用户选择了不同的皮肤,页面引用的css不同从而呈现的样式也不一样。
    2. 优化策略

      • 其实在实际场景中,需要通过切换皮肤来改变css的元素占所有css的比重并不会很多,因此我们需要把需要通过切换改变的css单独提取出来,在动态改变css路径时只需要去改变这个控制皮肤的css就可以了。
      • 把皮肤相关的css压缩。
    3. 实现代码分析
      如下是我们的html代码,注意其中的<link rel="stylesheet" name="theme" href="">,其他的都是正常引用。

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
       <title>iView admin</title>
       <meta charset="UTF-8">
       <!--  -->
       <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
       <!-- 引入的css -->
       <link rel="stylesheet" href="/dist/main.css">
       <!-- 注意这是我们换皮肤需要的css -->
       <link rel="stylesheet" name="theme" href="">
       <!-- 图标 -->
       <link rel="icon" href="./td_icon.ico" type="image/x-icon"/>
    </head>
    <body>
    <div id="app"></div>
    <!-- 用到的js -->
    <script type="text/javascript" src="/dist/vender-base.js"></script>
    <script type="text/javascript" src="/dist/vender-exten.js"></script>
    <script type="text/javascript" src="/dist/main.js"></script>
    </body>
    </html>
    

    接下来就是具体实现换皮肤功能了,换皮肤一般都是点击一个按钮弹出一些皮肤的选项,选中选项后皮肤生效。
    我们将换皮肤功能抽成一个组件theme-switch。pc端使用iview,手机端使用了vant。一共有3套皮肤用于切换。
    目录结构

    • pc端
    <template>
        <div style="display:inline-block;padding:0 6px;">
            <Dropdown trigger="click" @on-click="setTheme">
                <a href="javascript:void(0)">
                    <Icon :style="{marginTop: '-2px', verticalAlign: 'middle'}" color="#495060" :size="18" type="paintbucket"></Icon>
                    <Icon type="arrow-down-b"></Icon>
                </a>
                <DropdownMenu slot="list">
                    <DropdownItem v-for="(item, index) in themeList" :key="index" :name="item.name">
                        <Row type="flex" justify="center" align="middle">
                            <span style="margin-right:10px;"><Icon :size="20" :type="item.name.substr(0, 1) !== 'b' ? 'happy-outline' : 'happy'" :color="item.menu"/></span>
                            <span><Icon :size="22" type="record" :color="item.element"/></span>
                        </Row>
                    </DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
    </template>
    
    <script>
    import Cookies from 'js-cookie';
    import config from '../../../../build/config.js';
    export default {
        name: 'themeSwitch',
        data () {
            return {
                themeList: [
                    {
                        name: 'black_b',
                        menu: '#495060',
                        element: '#2d8cf0'
                    },
                    {
                        name: 'black_g',
                        menu: '#495060',
                        element: '#00a854'
                    },
                    {
                        name: 'black_y',
                        menu: '#495060',
                        element: '#e96500'
                    }
                ]
            };
        },
        methods: {
        	// 点击切换事件
            setTheme (themeFile) {
                let menuTheme = themeFile.substr(0, 1);
                let mainTheme = themeFile.substr(-1, 1);
                if (menuTheme === 'b') {
                    // 黑色菜单
                    this.$store.commit('changeMenuTheme', 'dark');
                    menuTheme = 'dark';
                } else {
                    this.$store.commit('changeMenuTheme', 'light');
                    menuTheme = 'light';
                }
                let path = '';
                   // 取到我们在html上给皮肤的css留的坑并且设置路径
                let themeLink = document.querySelector('link[name="theme"]');
                let userName = Cookies.get('user');
                if (localStorage.theme) {
                    let themeList = JSON.parse(localStorage.theme);
                    let index = 0;
                    let hasThisUser = themeList.some((item, i) => {
                        if (item.userName === userName) {
                            index = i;
                            return true;
                        } else {
                            return false;
                        }
                    });
                    if (hasThisUser) {
                        themeList[index].mainTheme = mainTheme;
                        themeList[index].menuTheme = menuTheme;
                    } else {
                        themeList.push({
                            userName: userName,
                            mainTheme: mainTheme,
                            menuTheme: menuTheme
                        });
                    }
                    localStorage.theme = JSON.stringify(themeList);
                } else {
                    localStorage.theme = JSON.stringify([{
                        userName: userName,
                        mainTheme: mainTheme,
                        menuTheme: menuTheme
                    }]);
                }
                let stylePath = '';
                if (config.env.indexOf('dev') > -1) {
                    stylePath = './src/views/main-components/theme-switch/theme/';
                } else {
                    stylePath = 'dist/';
                }
                if (mainTheme !== 'b') {
                    path = stylePath + mainTheme + '.css';
                } else {
                    path = '';
                }
                themeLink.setAttribute('href', path);
            }
        },
        created () {
            let path = '';
            // 判断运行环境用于切换地址
            if (config.env.indexOf('dev') > -1) {
                path = './src/views/main-components/theme-switch/theme/';
            } else {
                path = 'dist/';
            }
            let name = Cookies.get('user');
            // 如果用户之前选择过皮肤则直接使用之前选择的,否则使用默认皮肤
            if (localStorage.theme) {
                let hasThisUser = JSON.parse(localStorage.theme).some(item => {
                    if (item.userName === name) {
                        this.$store.commit('changeMenuTheme', item.menuTheme);
                        this.$store.commit('changeMainTheme', item.mainTheme);
                        return true;
                    } else {
                        return false;
                    }
                });
                if (!hasThisUser) {
                    this.$store.commit('changeMenuTheme', 'dark');
                    this.$store.commit('changeMainTheme', 'b');
                }
            } else {
                this.$store.commit('changeMenuTheme', 'dark');
                this.$store.commit('changeMainTheme', 'b');
            }
            // 根据用户设置主题
            if (this.$store.state.app.themeColor !== 'b') {
                let stylesheetPath = path + this.$store.state.app.themeColor + '.css';
                // 取到我们在html上给皮肤的css留的坑并且设置路径
                let themeLink = document.querySelector('link[name="theme"]');
                themeLink.setAttribute('href', stylesheetPath);
            }
        }
    };
    </script>
    
    • 手机端
    <template>
      <div style="display:inline-block;padding:0 6px;">
        <div @click="showBtn">换皮肤</div>
        <van-actionsheet v-model="show" :actions="themeList" @select="setTheme"/>
      </div>
    </template>
    
    <script>
    import Cookies from "js-cookie";
    
    import { Actionsheet } from "vant";
    // import config from "../../../../build/config.js";
    export default {
      name: "themeSwitch",
      components: {
        [Actionsheet.name]: Actionsheet
      },
      data() {
        return {
          show: false,
          themeList: [
            {
              name: "黑色",
              data: "black_b"
            },
            {
              name: "绿色",
              data: "black_g"
            },
            {
              name: "黄色",
              data: "black_y"
            }
          ]
        };
      },
      methods: {
        showBtn() {
          this.show = true;
        },
        setTheme(themeFile) {
          themeFile = themeFile.data;
          let menuTheme = themeFile.substr(0, 1);
          let mainTheme = themeFile.substr(-1, 1);
          if (menuTheme === "b") {
            // 黑色菜单
            this.$store.commit("changeMenuTheme", "dark");
            menuTheme = "dark";
          } else {
            this.$store.commit("changeMenuTheme", "light");
            menuTheme = "light";
          }
          let path = "";
          let themeLink = document.querySelector('link[name="theme"]');
          let userName = Cookies.get("user");
          if (localStorage.theme) {
            let themeList = JSON.parse(localStorage.theme);
            let index = 0;
            let hasThisUser = themeList.some((item, i) => {
              if (item.userName === userName) {
                index = i;
                return true;
              } else {
                return false;
              }
            });
            if (hasThisUser) {
              themeList[index].mainTheme = mainTheme;
              themeList[index].menuTheme = menuTheme;
            } else {
              themeList.push({
                userName: userName,
                mainTheme: mainTheme,
                menuTheme: menuTheme
              });
            }
            localStorage.theme = JSON.stringify(themeList);
          } else {
            localStorage.theme = JSON.stringify([
              {
                userName: userName,
                mainTheme: mainTheme,
                menuTheme: menuTheme
              }
            ]);
          }
          let stylePath = 'css/';
        //   stylePath = "./src/view/component/theme-switch/theme/";
          // if (config.env.indexOf('dev') > -1) {
          //     stylePath = 'src/view/component/theme-switch/theme';
          // } else {
          //     stylePath = 'dist/';
          // }
          if (mainTheme !== "b") {
            path = stylePath + mainTheme + ".css";
          } else {
            path = "";
          }
          themeLink.setAttribute("href", path);
          this.show = false;
        }
      },
      created() {
        let path = "";
        path = "css/";
        // if (config.env.indexOf("dev") > -1) {
        //   path = "src/view/component/theme-switch/theme";
        // } else {
        //   path = "dist/";
        // }
    
        let name = Cookies.get("user");
        if (localStorage.theme) {
          let hasThisUser = JSON.parse(localStorage.theme).some(item => {
            if (item.userName === name) {
              this.$store.commit("changeMenuTheme", item.menuTheme);
              this.$store.commit("changeMainTheme", item.mainTheme);
              return true;
            } else {
              return false;
            }
          });
          if (!hasThisUser) {
            this.$store.commit("changeMenuTheme", "dark");
            this.$store.commit("changeMainTheme", "b");
          }
        } else {
          this.$store.commit("changeMenuTheme", "dark");
          this.$store.commit("changeMainTheme", "b");
        }
        console.log(path);
        // 根据用户设置主题
        if (this.$store.state.app.themeColor !== "b") {
          let stylesheetPath = path + this.$store.state.app.themeColor + ".css";
          let themeLink = document.querySelector('link[name="theme"]');
    
          themeLink.setAttribute("href", stylesheetPath);
        }
      }
    };
    </script>
    
    

    在首页引用该组件,初次渲染时进入该组件的creat方法,如果用户之前选择过皮肤则直接使用之前选择的,否则使用默认皮肤。在store中加入相应方法。

    changeMenuTheme (state, theme) {
        state.menuTheme = theme;
    },
    changeMainTheme (state, mainTheme) {
         state.themeColor = mainTheme;
     }
    

    动态切换最关键的是这两行代码:
    let themeLink = document.querySelector('link[name="theme"]')
    themeLink.setAttribute('href', stylesheetPath)
    但是这个时候我们皮肤相关的css并没有打到代码中,需要我们额外进行配置。
    在webpack的配置文件中找到plugins,加入以下插件:

    • pc端
     new CopyWebpackPlugin([
                {
                    from: 'td_icon.ico'
                },
                {
                    from: 'src/styles/fonts',
                    to: 'fonts'
                },
                {
                    from: 'src/views/main-components/theme-switch/theme'
                }
            ],
    
    • 手机端
     new CopyWebpackPlugin([
                {
                    from: 'static',
                    to: 'static'
                },
                {
                    from: 'src/view/component/theme-switch/theme',
                    to: './css'
                }
            ])
    

    之前我们可能已经有了这个插件了,现在只是需要把皮肤相关的css额外配置一下。以上工作完成之后已经可以动态的切换html中皮肤相关的css路径了。接下来就需要我们在需要切换css的地方引用具体的class并且写三套样式分别放在theme中的css文件里。

    注意在具体的vue文件中不需要引用theme中的css,因为html中已经帮我们引用了

    如果报各种与路径有关的错误那就是你的路径真的写错啦。好好对比一下组件中引用的路径,webpack中配置的路径和你的项目路径吧~

    当然这只是换皮肤的一种实现思路,也就是动态切换html中的引用路径。也希望大家集思广益提供更多的解决思路~

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

    2021-01-06 15:17:03
    需求:不同的项目需要引入同一个模块,但是ui主题色需要修改 解决: 1,后端提供接口,前端动态设置主题色 2,前端主题色配置在less文件中 /** 用于less变量声明 */ @border_color: #e6e6e6; // 边框颜色 @main_...
  • 主要介绍了vue在线动态切换主题色方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Ant design vue中实现动态更换主题

    千次阅读 热门讨论 2020-09-03 20:34:24
    Ant design vue中实现动态更换主题色 一、 使用的插件 “ant-design-vue”: “^1.6.5” “antd-theme-generator”: “^1.1.7”,实现动态更换主题色的核心插件 “less”: “^2.7.3”,超过2.7版本实现动态更换主题色...
  • vue 更改主题颜色

    千次阅读 2019-10-04 02:32:25
    启动一个项目,发现其中很多按钮,和图标整体颜色都为紫色,且个别按钮为浅紫色。 尝试更改elment-ui样式...一番搜索后,发现更改主题能达到效果 转载于:https://www.cnblogs.com/lt1007/p/11389294.html...
  • vue 切换主题

    2020-11-18 10:40:16
    vue 切换主题色 效果 切换主题色思路 使用 vuex 存放当前主题变量 根据主题动态切换根元素 #app 的类名 使用 less 函数与 less 变量控制相应主题色 main.js导入主题文件 代码实现 目录结构 @/theme/...
  • 自定义主题实现
  • 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 单页应用为业务场景 方式一:class切换方式 实现: 在每个需要更换的页面定义多个...
  • vue vue-cli 应用 实现换肤功能 主题切换

    万次阅读 热门讨论 2018-03-08 15:43:33
    加载应用时 自动更换主题需要的东西:vue-cli 全家桶 主要(vuex,vue-router),less ,webpack,两套同样目录结构的主题静态资源(css,图片)最终效果主题1: 主题2: 具体实现: 一、把所需要改变主题vue组件...
  • 思路:通过自己上一篇博客https://www.cnblogs.com/aidixie/p/10309862.html做出多个不同的自定义主题,在不通的主体的css样式前加上不同的class名,在页面跟不同肤色时,通过改变body上的cal...
  • Vue-element自定义切换主题,可以自己随意添加需要的颜色值
  • Github项目地址https://github.com/JofunLiang/vue-project-themable-demo演示地址https://jofunliang.github.io/vue-project-themable-demo/可行性测试为了检验方法的可行性,在public文件夹下新建一个themes文件夹...
  • ant-design-vue运行时切换主题

    千次阅读 热门讨论 2019-05-23 22:24:05
    安装并引入 ant-design-vue 按需引入antd 定制主题 提取antd的less变量文件 切换主题 项目地址 创建项目 可以参照https://vue.ant.design/docs/vue/use-with-vue-cli-cn/创建项目并引入ant-design-vue 1、...
  • vue 一键换肤 换主题

    千次阅读 2020-10-14 09:30:48
    该一键换肤只是定义好几个颜色,并进行简单的切换。 在src下的assets文件下面定义一个css文件夹,在对应的文件里面定义_handle.scss和_themes.scss文件,如下: ...* 这里我定义了5套主题方案,想要再多只需在`
  • vue实战-实现换主题/皮肤功能

    千次阅读 2019-02-19 16:29:03
    现在的app和pc网站做的越来越花哨,但是有时候用户并不喜欢你给他挑选好的主题颜色,这个时候就需要一个皮肤的功能了。 那么我们怎么在vue中实现这个皮肤的功能呢? 实现思路 我们用vue一般都是写单页面...
  • vue——echarts更换主题

    千次阅读 2019-05-10 15:32:21
    2、在main.js里引入echarts主题的js,一般在 node_modules---echarts---theme---macarons.js。 theme里边有各种各样的主题,任意选一种,这里我选的是macarons。引入: import 'echarts/theme/macarons.js' 3、在...
  • 第三步:根据全局变量中存储的不同主题皮肤值按需导入主题样式 我把该方法写在APP.vue文件里面,如果你们有自己封装底层的方法,也可以视项目情况而定 APP.vue文件中的代码如下: ... 温馨提示:由于涉及到公司信息...
  • <head> <!-- 动态主题 -->...app.vue created() { // 根据手机类型(ios || android)更改主题颜色 let theme = navigator.userAgent.match(/iPhone|iPad|iPod/i) ? 'ios' : 'android'; this
  • Vue3.0 antd 2.0 动态切换主题

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,424
精华内容 3,369
关键字:

vue换主题

vue 订阅