网站适配暗色模式

起因

鉴于目前无论是 iOS 还是 Android 都在推行暗色模式,因此我也一直在想办法将我的网站适配暗色模式,好让各位看官的眼睛不被亮瞎。

方案一 - JavaScript实现

这是我最先想到的方案,首先为暗色模式编写一段样式,如:

.dark .posts.simple a .each {
        border-color: transparent
    }


.dark .posts a .each {
    border: 2px solid transparent;
    border-bottom-color: #303030
}

.dark .posts a .each h2 {
    color: #ccc
}

这些样式都是 .dark 元素的子元素。

随后利用 JavaScript 判断时间,在我认为需要暗色模式的时间为 body 添加 .dark 的 class

<script type="text/javascript">
    var nowHour = (new Date()).getHours()
    if (nowHour > 17 || nowHour < 4) {
        $('body').addClass('dark')
    }
</script>

实施上,你可以写得更好(如使用日落日出时间来更改暗色模式)。

这样实现起来还算方便,但缺点也不少。首先,暗色模式的启用的判断是以加载页面时的时间判断的。也就是说,如果你在晚上打开我的博客并放到翌日早上,它的样式仍旧是暗色的;其次,因为是在加载的时候判断,所以在网络速度慢的情况下,会完整地看到从浅色样式为暗色样式的过程,俗称“闪瞎眼”。

方案二 - 媒体查询

这个也是我现在用的方案。通过 prefers-color-scheme 来切换样式。

prefers-color-scheme 媒体查询有三种结果:未指定、浅色、和暗色。

在实现的过程中,可以未指定和浅色合并,作为默认样式,然后为暗色模式编写另一套样式。

这个方案编写的样式文件大概长这样:

/* 浅色样式 */

@media (prefers-color-scheme: dark){
    /* 暗色样式 */
}

方案二完美解决了方案一的痛点,唯一的不足就是由于 prefers-color-scheme 是个比较新的属性(chrome 76 才开始支持),所以老旧的浏览器可能不支持(谁要支持 IE 这个老古董呢?)