Html css control switch theme color (background color, font color)

Write a public style color in the body

body { --themeColor: #ff9c6e; }

The effect of this sentence is to set your default theme color. --themeColor is a custom name, and the color behind #ff9c6e is also custom; you can write whatever you want.

Then reference this color in other styles var(--themeColor)

.liu_div{
            line-height: 30px;
            background-color: var(--themeColor);
        }

.liu_box{
             color: var(--themeColor);
        }

Finally, it can be realized that only changing the color of themeColor: #ff9c6e; in the body can change other background and font colors at the same time

The implementation of the background gradient is : only change the transparency of the background color

//背景渐变 

.liu_box{

background: linear-gradient(180deg, var(--themeColor) 60%, var(--themeColor) 100%);

}

.js calls setProperty to control the color value, the core code

document.body.style.setProperty('--themeColor', this.$store.state.home.themeColor)