前端页面实现主题的动态切换
1.按主题编写不同的样式文件，页面加载默认主题。提供切换触发方式，通过js动态更改主题样式文件的实际引用路径。
<link id="themecss" href="default.css" rel="stylesheet" type="text/css">
js:
var linkel = document.querySelector("#themecss");
linkel.href="dark.css"
这种切换会有延时，体验不佳。且每种主题样式文件有大量重复的样式定义（值不一样），维护不便
2.是在网上很少看到的一种，借助link 元素 rel属性的alternate值，及title属性实现。同时可以加载多个主题样式文件，加有title属性且rel的属性值中包含alternate，默认只加载不渲染。再通过js根据切换事件，修改对应的主题
document.querySelector("#dark").disabled = false;
相关文章link rel=alternate网站换肤
本质上和方法1一样，都是整体切换样式文件。但由于是同时加载多个主题文件，切换主题的时候更顺畅些，当然页面的加载时间可能就更耗时了。
3.使用css中的变量。
在:root 样式中定义变量，主要是颜色值的定义。不同的主题可以定义不同的变量值
:root{
--color: #555
}
:root[theme="dark"]{
--color: #fff
}
:root 选择器会匹配 html 元素，给 <html> 动态添加自定义 theme 属性，如 <html theme="dark"> 。
那么html就匹配:root[theme="dark"] ，后续的其它样式定义就会使用这里的变量值，实现主题的动态切换。这种方式的好处是扩展性强，代码少，维护方便，切换也根据丝滑。本质上是在根元素上切换样式定义。而根元素的样式切换，根据css选择器的规则来实现。上面是根据属性选择器，同理也可以更加class选择器来实现。更多内容可以看这篇文件：
深色模式适配和主题切换 - guangzan - 博客园