Fixed theme color switching

=> User click skin => JS to switch the corresponding CSS style file and then write the value of the theme color into the cache

Here are two ways for you to choose

Switching CSS Addresses

document.getElementById(‘theme_css’).href = ‘.. /XXX.css’; If we have three themes default.css/blue.css/red.css, then we need to maintain three theme stylesheets when writing CSS, and change the CSS stylesheet link when js is clicked to switch to achieve the skin function.

** * : - N files need to be maintained at the same time - js changing the href attribute can cause some delayCopy the code
Alternate implementation under REL property of HTML
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="default.css" rel="stylesheet" type="text/css" title="default">
<link href="blue.css" rel="alternate stylesheet" disabled type="text/css" title="blue">
<link href="red.css" rel="alternate stylesheet" disabled type="text/css" title="red">
Copy the code

CSS style files fall into three categories:

  • Without the title property, the rel property value is just the **** of the stylesheet that will be loaded and rendered anyway, as in reset.css;
  • The title property, the rel property value is just the **** of the stylesheet as the default style CSS file is loaded and rendered, such as default.css;
  • **** with both title and rel values is loaded as alternate stylesheet CSS files, which are not rendered by default, such as blue.css and red.css;

Alternate means standby, equivalent to CSS preloading in standby, so there is no switch delay of the kind described above

How to use it: JavaScript code changes the disabled value of the DOM object of the ** element to false** to start rendering CSS that is not rendered by default.

// To change the skin, pass the corresponding title, eg: skirColorChange('blue');
var eleLinks = document.querySelectorAll('link[title]');
var skirColorChange = function ( value ) {
  eleLinks.forEach(function (link) {
      link.disabled = true;
      if (link.getAttribute('title') == value) {
          link.disabled = false; }}); }Copy the code

Disadvantages:

  • Download in advance, will waste a single width
  • There are still multiple files to maintain

Dynamic color value theme switch

If it is to achieve dynamic skin, custom color value, that the above several ways are not suitable.

If there is no theme color value, the default skin will be used. If there is no theme color value, the specified skin will be used. If there is no theme color value, the user will click skin => JS to switch theme color value, and then write the theme color value into the cache

Here are two ways for you to choose

ModifyVars method for less

The modifyVars method is implemented based on compilation of less in the browser. Therefore, when importing less files, you need to import them in link mode, and then modify the variables based on the method in less.js

Change the theme color event

HandleColorChange (color) {less.modifyVars({' @primarycolor ':color}). Then (() => {console.log(' modified successfully ');  }); };Copy the code

For engineering projects, start in webPack configuration:

{
      test: /\.less$/,
      loader: 'less-loader',
      options: {
          javascriptEnabled: true
      }
},
Copy the code

If it is Vue Li3.0 / Vue Li4.0, give you a complete configuration process

  1. First in vue.config.js configuration;
CSS: {loaderOptions: {less: {modifyVars: {// On-demand configuration, configurable multiple 'primary-color': 'red',}, javascriptEnabled: true,}}},Copy the code
  1. Create color.less under public/static/. This file writes all classes and styles that need to be changed.
@primaryColor: red;
.page {
  backgroud: @primaryColor;
  color: @primaryColor;
}
Copy the code
  1. Create les.min.js under public/static/;
  2. Create setting.js at SRC /XXXX;
let lessNodesAppended; const updateTheme = primaryColor => { if (! primaryColor) { return; } console.info(' Compiling theme! ') function buildIt() {// Check if less is already loaded. ModifyVars is available if (! window.less || ! window.less.modifyVars) { return; ModifyVars ({'@primary-color': primaryColor,}). Then (() => {console.log(' successful '); }). Catch (() => {console.error(' failed '); }); } if (! lessNodesAppended) { // insert less.js and color.less const lessStyleNode = document.createElement('link'); const lessConfigNode = document.createElement('script'); const lessScriptNode = document.createElement('script'); lessStyleNode.setAttribute('rel', 'stylesheet/less'); / / below the color. The less position you can modify as needed lessStyleNode. SetAttribute (' href ', __webpack_public_path__ + 'static/color.less') lessConfigNode.innerHTML = ` window.less = { async: true, env: 'production', javascriptEnabled: true }; `; Lessscriptnode. SRC = '/static/less.min.js'; lessScriptNode.async = true; lessScriptNode.onload = () => { buildIt(); lessScriptNode.onload = null; }; document.body.appendChild(lessStyleNode); document.body.appendChild(lessConfigNode); document.body.appendChild(lessScriptNode); lessNodesAppended = true; } else { buildIt(); }}; export { updateTheme }Copy the code
  1. Ok, that’s all we have, so now we need to initialize, you can call updateTheme(‘ default/theme color you need ‘) in main.js;
  2. If it’s a page to switch, you still call updateTheme(‘ Theme color you need ‘);
CSS variable methods

If you’re not using less in your project, use CSS, which is generic and easy to use. Use CSS variables to change the theme color, replace the theme color variable, and then use setProperty to change the theme color dynamically. Var (–themeColor)

body{
   --primaryColor:red;
}
.page{
    backgroud: var(--primaryColor);
    color: var(--primaryColor);
}
Copy the code

To modify the theme color: document. Body. Style. The setProperty (‘ – primaryColor ‘, ‘blue’);

conclusion

So far, we have given you a total of 4 skin changing schemes, if you have a better scheme, welcome to add ~~~