Vue实现换主题/皮肤功能

更新日期: 2019-07-27阅读: 4.9k标签: 主题

需求:

网站换肤,主题切换。网站的主题色可以在几种常用颜色之间进行切换,还有相关图片、图标也要跟随主题进行切换。文章由两部分组成:css切换,图片图标切换


css切换

1.在 static 目录下新建一个 styles 文件夹,在 styles 下新建一个 theme.scss 文件(项目使用了sass,会自动编译成css文件,如果没有使用这些预处理工具可以直接新建 theme.css),将需要替换的 CSS 声明在此文件中。

.theme-test-btn {
    background-color: #409eff;
    border-color: #409eff;
}

.theme-test-btn:hover,
.theme-test-btn:focus {
    background-color: #66b1ff;
    border-color: #66b1ff;
}

2.在 src/assets/js/const/ 目录下新建 theme-colors.js,用于声明所有可选的主题,每种颜色都对应一个关键词,方便区分

const colors = [
    {
        themeId: 0,
        primaryBtn: '#409eff', // 主要按钮的背景色
        priBtnHover: '#66b1ff', // 主要按钮的悬浮、聚焦背景色
    },
    {
        themeId: 1,
        primaryBtn: '#67c23a',
        priBtnHover: '#85ce61',
    },
    {
        themeId: 2,
        primaryBtn: '#e6a23c',
        priBtnHover: '#ebb563',
    },
];

export default colors;

3.通过 ajax 获取 theme.css ,将颜色值替换为关键词。

data() {
    return {
        active: 0,
        themeStyleStr: '', // 存放 替换成关键词的 theme.css 内容
        colors: themeColors, // 所有可选的主题颜色数组。即:theme-colors.js 文件export的数组
    };
},
mounted() {
    // 通过 ajax 获取 theme.css 的内容,并将颜色值替换为关键词
    this.$http.getThemeFile().then(res => {
        this.themeStyleStr = this.getStyleTemplate(res);
    });
},
methods: {
    // 获取样式模板:将颜色值替换为关键词。
    getStyleTemplate(data) {
        let color = this.colors[0];
        delete color.themeId;
        let colorMap = {};
        Object.keys(color).forEach(key => {
            colorMap[color[key]] = key;
        });
        Object.keys(colorMap).forEach(key => {
            data = data.replace(new RegExp(key, 'ig'), colorMap[key]);
        });
        return data;
    },
}

this.$http.getThemeFile 方法

// 使用原生ajax获取换肤的样式文件
getThemeFile() {
    return new Promise(resolve => {
        const url = location.origin + '/static/styles/theme.css';
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(xhr.responseText);
            }
        };
        xhr.open('GET', url);
        xhr.send();
    });
}

4.把关键词再换回刚刚生成的相应的颜色值,并在页面上添加 style 标签

methods: {
    // 点击切换主题
    changeTheme(index) {
        this.active = index;
        this.setNewStyle(this.themeStyleStr, this.colors[index]);
    },
    // 根据选择的主题颜色,把关键词换成相应的主题颜色,并在页面上添加 style 标签
    setNewStyle(originalStyle, colors) {
        let oldEl = document.getElementById('theme-style');
        let cssText = originalStyle;
        Object.keys(colors).forEach(key => {
            cssText = cssText.replace(new RegExp(key, 'ig'), colors[key]);
        });
        const style = document.createElement('style');
        style.innerhtml = cssText;
        style.id = 'theme-style';
        oldEl ? document.head.replaceChild(style, oldEl) : document.head.appendChild(style);
    }
}


图片图标切换

1.图片切换和图标切换是同样的原理。在之前新建好的 theme.scss 文件追加图标引入的样式。

.theme-test-icon {
    background: url("/static/images/common/list-modify-icon.svg");
}

2.在之前新建好的 theme-colors.js 文件追加图标路径

/*图片统一使用一个路径,更换主题时需要在images文件夹下新建主题文件夹,与原始路径对应,图片文件名须一致
应避免 primaryBtn 与 primaryBtnHover 同时出现,因为正则匹配 primaryBtn 会把 primaryBtnHover 部分匹配出来,达不到效果*/
const colors = [
    {
        themeId: 0,
        primaryBtn: '#409eff', // 主要按钮的背景色
        priBtnHover: '#66b1ff', // 主要按钮的悬浮、聚焦背景色
        imagePath: '/static/images', // 图片绝对路径
    },
    {
        themeId: 1,
        primaryBtn: '#67c23a',
        priBtnHover: '#85ce61',
        imagePath: '/static/images/theme1',
    },
    {
        themeId: 2,
        primaryBtn: '#e6a23c',
        priBtnHover: '#ebb563',
        imagePath: '/static/images/theme2',
    },
];
export default colors;

3.引入需要主题切换的图片/图标,存放于 /static/images/ 之下,每个额外的主题图片需要一个文件夹进行存放,例如 /theme1 或者 /theme2。注意:各个主题的图片文件名要保持不变;图片路径是根据 theme.scss 里面引入图片样式的路径来决定的,可以根据项目实际情况进行调整。

链接: https://fly63.com/article/detial/4974

wordpress大前端DUX主题

DUX主题是基于WordPress程序的主题,由themebetter团队原创开发,是目前比较火的wordpress主题;支持百度熊掌号,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置

Web前端主题切换的几种方案

本文将介绍 Web 前端主题切换的几种常用方案,示例代码基于 React 框架。废话少说,show you the code!这种方案利用了css多层样式精确匹配的特点,通过样式覆盖的方式实现主题的切换。

采用CSS3的VAR实现动态主题切换

官方称呼其为自定义属性,坊间通常叫做css变量,因为它类似于其他js语言中的变量,可用于存储颜色、字体、大小宽度等css属性值;定义方式为两个连字符也就是中划线(--)开头,引用方式为var(custom-property-name, value)

前端 “一键换肤“ 的几种方案

现在越来越多的网站都提供了拥有换肤(切换主题)功能,如 ElementUI,既是为了迎合用户需求,或是为了凸显自己特点,因此提供了个性化定制的功能.

Sass应用之实现主题切换

实现主题切换有几种不同的方案,比如使用CSS变量,使用JavaScript动态加载对应的主题样式文件等。本文主要讲的是如何使用Sass实现主题切换。

前端实现切换主题方案

前端开发人员面临着制作增强用户体验和适应用户偏好的用户界面的任务。带有 css 的 react 主要可用于创建多色可切换主题。为用户提供了在给定时间点在主题颜色之间切换以适合他们的偏好的特权。

使用CSS变量实现主题定制真的很简单

Varlet是通过css变量来组织样式的,什么是css变量呢,其实很简单,首先声明自定义的css属性,随便声明在哪个元素上都可以,不过只有该元素的后代才能使用,所以如果要声明全局所有元素都能使用的话,可以设置到根伪类:root下

常用Vue UI框架的主题切换

在如今,很多网页已经可以手动切换明亮模式和黑暗模式,网页的主题切换已经成为了一个常用的需求,因此,本文将从常见框架的处理方式总结一些相关的操作,并探究其本质。

兼容ie浏览器 网站变灰色

在遇到特殊情况的时候,我们作为站长需要紧急将网站变灰的需求,大家都知道通过简单的CSS样式即可实现,上述代码配合指定网页在IE内核下的渲染模式,就可以达到效果,这个语句意思便是告诉IE浏览器

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!