两种让用户自定义项目主题色的方案

栏目: CSS · 发布时间: 5年前

内容简介:大家应该见过不少可以更换主题或主题颜色的网站,如果是更换内置的几套方案可以直接通过简单的替换css文件来实现,我们就不说了;本文就介绍一种用户自定义替换的主题题色的简单方案!参数:

两种让用户自定义项目主题色的方案

前言

大家应该见过不少可以更换主题或主题颜色的网站,如果是更换内置的几套方案可以直接通过简单的替换css文件来实现,我们就不说了;本文就介绍一种用户自定义替换的主题题色的简单方案!

1. 相关知识点

1.1 CSSStyleSheet.insertRule()

CSSStyleSheet.insertRule(rule, index);

参数:

  • rule: string,包含要插入的样式规则
  • index: number, 插入的位置, 可选,默认:0
document.styleSheets[0].insertRule('.selector {color: red}', 0);

1.2 CSSStyleSheet.addRule()

CSSStyleSheet.addRule(selector, cssText, index)

参数:

  • selector: string,选择器文本
  • rule: string,包含要插入的样式规则
  • index: number, 插入的位置, 可选,默认:length - 1
document.styleSheets[0].addRule('.selector', 'color: red', 0);

关于insertRule与addRule的区别

  • addRule是IE专用的方法
  • 传参略有不同,并且 insertRule 默认将样式规则添加到 css的第一条 ,而 addRule 默认添加到 最后一条

补充说明:虽说addRule是IE的方法,但是目前chrome等主流方法也都支持,可以放心的使用;而另一方面insertRule也支持IE9及以上。

1.3 CSS3变量

可以让我们像Sass、Less那样创建变量;

:root{
  --color: pink;
}
div{
  color: var(--color);
}
.content{
  --red: red;
  --string: '支持字符串';
  --中文名: 20;
  background-color: var(--red);
}

遗憾的是目前不支持IE,不过可以用JS来判断

varisSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

更多关于css3变量: 请点这里

2. 具体方案

2.1 通过insertRule/addRule 实现

function setTheme(color){
        let link = document.createElement("style");
        let head = document.getElementsByTagName("head")[0];

        //设置主题色时现将原先的样式文件移除,虽然样式之间可以覆盖,但为了避免添加过多,还是清一下。
        document.getElementById('theme') && head.removeChild(document.getElementById('theme'));
        link.rel = "stylesheet";
        link.type = "text/css";
        link.id = "theme";
        head.appendChild(link);

        let themeData = {
          color: color,
        };

        let len = document.styleSheets.length - 1;
        
        //进行本地存储
        localStorage.setItem('Theme', JSON.stringify(themeData));
        document.styleSheets[len].addRule('.T-BG', `background-color: ${this.color} !important`);
        document.styleSheets[len].addRule('.T-FT', `color: ${color} !important`);
        document.styleSheets[len].addRule('.T-FT-H:hover', `color: ${color} !important`);
        document.styleSheets[len].addRule('.T-BD', `border-color: ${color} !important`);
        document.styleSheets[len].addRule('.T-SD', `box-shadow: 0 0 5px 1px ${color} !important`);
        document.styleSheets[len].addRule('.T-SD-H:hover', `box-shadow: 0 0 5px 1px ${color} !important`);
        document.styleSheets[len].addRule('.T-TSD-H:hover', `text-shadow: 0 0 5px ${color} !important`);
        document.styleSheets[len].addRule('.T-TSD', `text-shadow: 0 0 5px ${color} !important`);
    }

2.1 通过css3变量 实现

//这个方法就简单很多,不过开发前请先了解其兼容性,开发时主题色相关颜色直接调用变量,就像大家平时用Sass一样。
    
    function setTheme(color){
        // 设置变量,
        document.body.style.setProperty('--ThemeColor', 'red');
    }

如果大家还有什么比较好的方案也希望留言多多分享


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

区块链技术驱动金融

区块链技术驱动金融

阿尔文德·纳拉亚南、约什·贝努、爱德华·费尔顿、安德鲁·米勒、史蒂文·戈德费德 / 林华、王勇 / 中信出版社,中信出版集团 / 2016-8-25 / CNY 79.00

从数字货币及智能合约技术层面,解读了区块链技术在金融领域的运用。“如果你正在寻找一本在技术层面解释比特币是如何运作的,并且你有一定计算机科学和编程的基本知识,这本书应该很适合你。” 《区块链:技术驱动金融》回答了一系列关于比特币如何运用区块链技术运作的问题,并且着重讲述了各种技术功能,以及未来会形成的网络。比特币是如何运作的?它因何而与众不同?你的比特币安全吗?比特币用户如何匿名?区块链如何......一起来看看 《区块链技术驱动金融》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具