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;
    }
}