判断系统颜色模式
CSS 判断颜色模式
使用媒介查询 perfers-color-scheme
,支持 dark,light,no-preference 三种模式。 以下是使用 Vite vue-ts 模板创建项目自动生成的代码
css
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}