<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
:root {
--THEME: var(--USER-THEME, red);
--THEME-COLOR: var(--USER-THEME-COLOR, green);
}
width: 300px;
height: 300px;
background: var(--THEME);
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.con {
width: 100px;
height: 100px;
background: var(--THEME-COLOR);
}
</style>
</head>
<body>
<div id="main">
<div class="con"></div>
</div>
</body>
<script type="text/javascript">
document.getElementById("main").onclick = function() {
const elm = document.documentElement
const colorArr = ['blue', 'black']
elm.style.setProperty('--USER-THEME', colorArr[0]);
elm.style.setProperty('--USER-THEME-COLOR', colorArr[1]);
}
</script>
</html>
