CSS | Dark Mode
闲来无事，在网上闲逛，发现了一些好玩的东西。
黑暗主题
对于网站而言，有些网站会提供不同的主题，但一般需要用户的主动触发，或点击，或选择。
进来在晚上玩手机的时候，打开了浏览器的暗黑模式，发现有的网站会自动将网站的背景色改为暗色。感觉很神奇呀，没有进行再次的触发，就可以改变背景色。
经过一番搜索后发现其实就是媒体查询
@media (prefers-color-scheme: dark) {
}
配合上 CSS Variable 美滋滋
CSS Variable | CSS变量
实践出真知
/* value */
:root {
--main-color: rgb(222, 222, 222);
--main-deep-color: rgb(197, 167, 167);
--main-pink-color: rgb(238, 229, 229);
}
/* Text and background color for dark mode */
@media (prefers-color-scheme: dark) {
:root {
--main-color: #000;
--main-pink-color: rgb(34, 32, 32);
--main-deep-color: #000;
}
}
网友评论