常用的主题切换实现方式之一，就是通过 link 标签的 rel 属性来实现的 当 rel 标签的值是 alternate，就代表该样式是可以替换的 title 属性要加就全加上或者全不加，因为 title 会导致系统直接识别成样式文件，意思就是如果两个样式文件，第一个没有加该属性，第二个加了该属性，系统会直接使用有该属性的样式进行载入假如此时页面有三个样式文件，分别是：default.css、dark.css、light.css 可以通过激活可替换样式即可实现主题的切换，适合确定的主题样式之间切换
body {
background-color : white;
}
body {
background-color : black;
}
body {
background-color : lightcyan;
}
<! DOCTYPE html > < htmllang = " en" class = " dark" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < linktype = " text/css" href = " css/default.css" rel = " stylesheet" title = " default" > < linktype = " text/css" href = " css/dark.css" rel = " stylesheet alternate" title = " dark" > < linktype = " text/css" href = " css/light.css" rel = " stylesheet alternate" title = " light" > </ head> < body> < selectname = " 主题" onchange = " changeTheme ( this . value) " > < optionvalue = " default" > </ option> < optionvalue = " dark" > </ option> < optionvalue = " light" > </ option> </ select> </ body> < scriptsrc = " static/js/jquery.min.js" > </ script> < script>
function changeTheme ( theme ) {
$ ( 'link' ) . attr ( 'disabled' , true )
$ ( ` link[title= ${ theme} ] ` ) . attr ( 'disabled' , false )
}
</ script> </ html>
上面是主题样式文件之间的切换，对于那些在拾色器中任意选择颜色更换主题的就不大适用了 这时候切换主题更适合通过变量去设置系统的主题 现在 :root 中定义全局变量，然后通过 var() 在样式中去使用变量，然后通过去 setProperty 修改该变量值即可更换主题样式了 <! DOCTYPE html > < htmllang = " en" class = " dark" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style>
:root {
--theme-color : #333333;
}
html {
background-color : var ( --theme-color, "#E65A65" ) ;
}
</ style> </ head> < body> < selectname = " 主题" onchange = " changeTheme ( this . value) " > < optionvalue = " #333333" > </ option> < optionvalue = " #1a7efc" > </ option> < optionvalue = " #16d46b" > </ option> < optionvalue = " #f1ce6b" > </ option> </ select> </ body> < script>
function changeTheme ( theme ) {
document. documentElement. style. setProperty ( '--theme-color' , theme)
}
</ script> </ html>
![[深度学习]卷积神经网络的概念,入门构建(代码实例)](https://img-blog.csdnimg.cn/35523bc19eba4435aa985645dbd55d8d.png)
