1 demand: according to the selected theme color, automatically switch the current theme
2 idea: I use sass to do a mixin, to change the color according to different parameters, but now it is also my css pass what value, he shows what is written dead, if I put the js selected value into the mixin introduced by css? I"d like to ask you for advice.
Why is it so complicated?
has to be operated through js. Just change it directly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
font-size: var(--fonts-size);
background: var(--backgroundColor)
}
</style>
</head>
<body>
<div class="box">111111111111111111</div>
<script>
var box = document.querySelector('.box');
box.style.setProperty('--fonts-size', "50px")
box.style.setProperty('--backgroundColor', "red")
</script>
</body>
</html>
@mixin font_color ($color){
color: $color; //
[data-theme="theme1"] & {
color: $color-theme1; // js
}
[data-theme="theme2"] & {
color: $color-theme2;
}
[data-theme="theme3"] & {
color: $color-theme3;
}
} refer to this project
We think the project is done with reference to the custom skinning in this project.
there are two ways to change skin:
you can refer to
Previous: How to use the chrome plug-in jsonview
Next: How to use encapsulated components by calling methods, such as ant's Message.info (option)
vuePress config.js how to configure sass to implement public components to call public styles, public methods. the official document description is too vague. https: vuepress.vuejs.org co. module.exports = { title: , description: Just ...