小编点评
```html
```
**内容解析：**
1. **定义不同主题颜色**：`:root`中的`--theme-color`定义不同主题的颜色，而`html[theme=\"dark\"]`则根据`theme`属性的值切换颜色。
2. **通过切换html自定义属性来控制主题**：当`theme`属性设置为`dark`时，`--theme-color`的值更改为`#000`，设置字体颜色为黑色。否则，`--theme-color`的值设置为`#000`，设置字体颜色为白色。
3. **设置主题颜色**：`.theme`样式定义了一个背景颜色为`var(--theme-color)`，其中`--theme-color`是通过`html[theme=\"dark\"]`中定义的属性的值。
**示例使用：**
```html
```
当点击“改变主题”按钮时，主题会切换为黑色。
正文
1、定义不同主题颜色
:root{
--theme-color: blue;
--font-size: 18px;;
}
html[theme="dark"]{
--theme-color: #000;
2、通过切换html自定义属性来控制主题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="theme">
</div>
<button>改变主题</button>
</body>
<script>
document.getElementsByTagName('button')[0].addEventListener('click',changeTheme,false);
function changeTheme(){
console.log('changeTheme')
if(document.documentElement.getAttribute('theme') === 'dark'){
document.documentElement.setAttribute('theme','light');
}else{
document.documentElement.setAttribute('theme','dark');
}
}
</script>
</html>
<style>
:root{
--theme-color: blue;
--font-size: 18px;;
}
html[theme="dark"]{
--theme-color: #000;
--font-size: 13px;
}
.theme{
width: 700px;
height: 700px;
background: var(--theme-color);
}
</style>
