切换主题操作
- 承载主题属性的元素
- CSS变量
- 属性选择器
- 切换主题属性的开关
解释：
属性选择器使不同属性值时拥有不同的类，类中定义每个主题的CSS变量，其他类中使用这个变量当作值。
<!doctype html> <html lang="en" theme="light"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html[theme='light']{ --backgroundColor:white; --textColor:black; } :root[theme='dark']{ --backgroundColor:black; --textColor:white; } body{ background:var(--backgroundColor); color:var(--textColor); transition:.3s; } </style> </head> <body> <h1>切换主题模式</h1> <br> <button>切换</button> </body> <script> document.querySelector('button').onclick=()=>{ let theme = document.querySelector('html').attributes.theme; switch (theme.value) { case 'light': theme.value = 'dark'; break; case 'dark': theme.value = 'light'; break; } } </script> </html>
