How does element's custom skin change function do?

element this page https://elementui.github.io/t., can support custom skin change, through the color selector can be customized to change the theme, do not know what the idea is, how to do it?
solving, it feels magical

Front-end
Jul.01,2021

1 declare several variables for css preprocessing using less/scss 

`@primary:-sharp0094ff;`

2 referencing this variable when writing component styles can also make some transformations based on this variable. For more information, please see the less/scss document
3 webpack packaged into css

.

so if you change a theme color variable, the packaged css color value will also change

< hr >

above is the original answer. Upstairs, I corrected the wrong question.
take a look at how element is implemented from the source code

. 
theme(val, oldVal) {
        if (typeof val !== 'string') return;
        const themeCluster = this.getThemeCluster(val.replace('-sharp', ''));
        const originalCluster = this.getThemeCluster(oldVal.replace('-sharp', ''));
        const getHandler = (variable, id) => {
          return () => {
            const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('-sharp', ''));
            let newStyle = this.updateStyle(this[variable], originalCluster, themeCluster);
            let styleTag = document.getElementById(id);
            if (!styleTag) {
              styleTag = document.createElement('style');
              styleTag.setAttribute('id', id);
              document.head.appendChild(styleTag);
            }
            styleTag.innerText = newStyle;
          };
        };

listens to the color value. If you change the color value, dynamically create a style tag to cascade the original style according to the current color value.
look at the element website console, you can find that at the beginning, there is no
id for docs-style and chalk-style style tags
change the color value, then there is
, so the theme has changed

.

vue instructions v-html, dynamically insert strings, as html tags, you can dynamically insert style tags.

implementation method: 


        function test(m){
            document.documentElement.style.setProperty('--divHoverColor', m);
        }
    </script>

Previous: Mac successfully installed pyspider, but could not start

Next: How do I force electron to run on computers that don't support webGL?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu