网页自定义主题色方案

loostudy 发布于2019-08-02 14:21 / 3031人阅读

摘要：补充说明虽说是的方法，但是目前等主流方法也都支持，可以放心的使用而另一方面也支持及以上。进行本地存储通过变量实现这个方法就简单很多，不过开发前请先了解其兼容性，开发时主题色相关颜色直接调用变量，就像大家平时用一样。

前言

大家应该见过不少可以更换主题或主题颜色的网站，如果是更换内置的几套方案可以直接通过简单的替换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.2 通过css3变量实现

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

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

云服务器私有云网页自定义短信发送网页背景色 WordPress自媒体主题 js修改网页背景色

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53752.html

网页自定义主题色方案

摘要：补充说明虽说是的方法，但是目前等主流方法也都支持，可以放心的使用而另一方面也支持及以上。进行本地存储通过变量实现这个方法就简单很多，不过开发前请先了解其兼容性，开发时主题色相关颜色直接调用变量，就像大家平时用一样。 showImg(https://segmentfault.com/img/bVbo0Mb?w=1105&h=806); 前言大家应该见过不少可以更换主题或主题颜色的网站，...

Gu_Yan 2019-08-23 15:30 评论0 收藏0
网页自定义主题色方案

摘要：补充说明虽说是的方法，但是目前等主流方法也都支持，可以放心的使用而另一方面也支持及以上。进行本地存储通过变量实现这个方法就简单很多，不过开发前请先了解其兼容性，开发时主题色相关颜色直接调用变量，就像大家平时用一样。 showImg(https://segmentfault.com/img/bVbo0Mb?w=1105&h=806); 前言大家应该见过不少可以更换主题或主题颜色的网站，...

fasss 2019-08-30 15:55 评论0 收藏0
您的【用户体验优化方案】到了，请签收~

摘要：暴露年龄了广告词饭后嚼两粒大概，故事性很强，比较有意思同时直入主题，饭后吃益达口香糖有益健康。书里破茧成蝶说道，揣摩用户的心思远远不够，你不可能完整的想到别人在想什么，所以还需要去体验用户的生活。用户体验（User Experience，简称UX 或是UE），它指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。 showImg(https://segmentfault.com...

cheng10 2019-08-29 16:37 评论0 收藏0
您的【用户体验优化方案】到了，请签收~

摘要：暴露年龄了广告词饭后嚼两粒大概，故事性很强，比较有意思同时直入主题，饭后吃益达口香糖有益健康。书里破茧成蝶说道，揣摩用户的心思远远不够，你不可能完整的想到别人在想什么，所以还需要去体验用户的生活。用户体验（User Experience，简称UX 或是UE），它指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。 showImg(https://segmentfault.com...

eternalshallow 2019-08-23 11:45 评论0 收藏0
您的【用户体验优化方案】到了，请签收~

摘要：暴露年龄了广告词饭后嚼两粒大概，故事性很强，比较有意思同时直入主题，饭后吃益达口香糖有益健康。书里破茧成蝶说道，揣摩用户的心思远远不够，你不可能完整的想到别人在想什么，所以还需要去体验用户的生活。用户体验（User Experience，简称UX 或是UE），它指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。 showImg(https://segmentfault.com...

ivyzhang 2019-08-05 14:53 评论0 收藏0