通过css变量切换站点主题

CSS变量

声明一个变量，属性名需要以两个减号（--）开始，属性值则可以是任何有效的CSS值。

:root[theme="dark"] {
  --color: #fff;
}
:root[theme="light"] {
  --color: black;
}

:root作用域是所有css，所以作为主题切换，:root作用域更合适

备用值

用 var() 函数可以定义多个备用值(fallback value)，当给定值未定义时将会用备用值替换
备用值并不是用于实现浏览器兼容性的。如果浏览器不支持CSS自定义属性，备用值也没什么用

body{
    background-color: var(--color, red);
}

JavaScript代码

在JS中，需要切换对应主题，让:root选择器选中我们需要的主题

    <script type="text/javascript">
        function changeTheme(){
            var theme = document.documentElement.getAttribute('theme');
            if(theme == 'dark'){
                document.documentElement.setAttribute('theme','light')
            }else{
                document.documentElement.setAttribute('theme','dark')
            }
        }
    </script>

再给一个简单的按钮，就可以进行切换了

<button onclick="changeTheme()">切换</button>

这样，一个简单的主题切换功能就做好了