Preface

You should have seen many websites that can change the theme or theme color. If you want to change the built-in scheme, you can directly replace the css file, we won't talk about it. This article introduces a simple scheme of user-defined theme color replacement!

1. Relevant knowledge points

1.1 CSSStyleSheet.insertRule()

CSSStyleSheet.insertRule(rule, index);

Parameters:

• rule: string, containing style rules to insert
• index: number, insert location, optional, default: 0

document.styleSheets[0].insertRule('.selector {color: red}', 0);

1.2 CSSStyleSheet.addRule()

CSSStyleSheet.addRule(selector, cssText, index)

Parameters:

• selector: string, selector text
• rule: string, containing style rules to insert
• index: number, insertion position, optional, default: length - 1

document.styleSheets[0].addRule('.selector', 'color: red', 0);

On the difference between insertRule and addRule

• addRule is IE specific method
• Parameters are slightly different, and insertRule adds style rules to the first one of css by default, while addRule adds to the last one by default.

Note: Although addRule is the method of IE, mainstream methods such as chrome are also supported at present, which can be used safely. On the other hand, insertRule also supports IE9 and above.

1.3 CSS3 variables

We can create variables like Sass and Less;

:root{
  --color: pink;
}
div{
  color: var(--color);
}
.content{
  --red: red;
  --string: 'Support string';
  --Chinese name: 20;
  background-color: var(--red);
}

Unfortunately, IE is not supported at present, but JS can be used to judge

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

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

More about css3 variables: Please order here.

2. Specific scheme

2.1 implementation through insertRule/addRule

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

        //When setting the theme color, the original style file is removed. Although the styles can be overwritten, in order to avoid adding too much, it is better to clear it.
        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;
        
        //For local storage
        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 implementation through css3 variables

    //This method is much simpler, but before development, please understand its compatibility. When developing, the related colors of theme colors directly call variables, just like you usually use Sass.
    
    function setTheme(color){
        // Set variables,
        document.body.style.setProperty('--ThemeColor', 'red');
    }

If you have any better plan, please leave a message and share it