/** .dark，通过改变 html 标签的类名切换主题*/
:root{ :root.dark{
--color-bg: #000; --color-bg: #000;
} ==> }
.lay-card{ .dark .lay-card{}
color: #FFF; color: #FFF;
} }
/** js */
// 设置为暗色主题
document.documentElement.classList.add('dark')
// 恢复亮色主题
document.documentElement.classList.remove('dark')
// 切换亮/暗主题
document.documentElement.classList.toggle('dark')
----------------------------------------------------------
/** [theme-mode='dark']，通过改变 html 标签上 theme-mode 的属性切换主题*/
:root{ :root[theme-mode='dark']{
--color-bg: #000; --color-bg: #000;
} ==> }
.lay-card{ [theme-mode='dark'] .lay-card{}
color: #FFF; color: #FFF;
} }
/** js */
// 设置为暗色主题
document.documentElement.setAttribute('theme-mode', 'dark')
// 恢复亮色主题
document.documentElement.removeAttribute('theme-mode');