随着苹果最近强推黑暗模式,越来越多的应用都要支持黑暗模式才能上架苹果商店,既然APP都适配了黑暗模式,那网站适配黑暗模式也是一件需要提上日程的事情了。
PC端实现黑暗模式有两种方式,一种是纯CSS实现,另一种是通过JavaScript操作实现。
通过媒体查询实现dark模式自动切换
纯CSS实现切换需要借助媒体查询来实现,使用这种方式会根据浏览器是否使用黑暗模式来自适应,用户不能手动去控制(除非用户更改浏览器设置)。
代码实现:
@media (prefers-color-scheme: dark) {
:root {
--accent: #3493d1;
--main: #f3f3f3;
--light: #ececec;
--lighter: #666666;
--border: #e6e6e6;
--bg: #333333;
}
}
:root {
--accent: #226997;
--main: #333;
--light: #666;
--lighter: #f3f3f3;
--border: #e6e6e6;
--bg: #ffffff;
}
html,
body {
background-color: var(--bg);
}
p {
color: