背景

意想不到，Tony 主题有了歪果仁的关注(塑料英语~~原形毕露~~)，这个 29 岁歪果仁是个增长黑客、自由职业者，住在成都帮外国企业面向中国市场优化网站产品，包括 SEO 之类(对于本博客来说并不存在的东西)的。

听起来很厉害，还很愿意帮助我完善 Tony 主题的英文 README (~~虽然之后并没有~~)。聊天中他提到了一个于今年 10 月份左右才发布浏览器支持的 CSS media 特征 —— prefers-color-scheme，能根据系统设置的主题模式(深色、浅色、自动)匹配 CSS 样式。

Tony 主题的 DarkMode 在目前最新版本中仍然采用的是加载完整独立的夜间模式 CSS 文件来实现 (可见我对夜间模式并没有热切的偏好)，由于目前支持主题切换的系统只有最新 Win10、macOS Mojave 及以上、Android 10、IOS 13，所以一开始我是拒绝的(~~完全不能构成原因好吧~~)... 直到他向我展示了如下生动活泼高端大气炫酷多彩用户体验爆棚的效果：

为了满足之后其他 Tony 主题用户不可避免的支持需求和我迫切想在年底之前在水一篇文章的渴望，我决定还是给他支持一下...

代码

我把原来的 SCSS 代码分成了三个来写，别问我为什么，问就是 @extend 语句不能用在 @media 里...

我使用 SASS 来高效地编写 CSS 代码，它是一个 CSS 的扩展语言，改善了纯 CSS 代码编写中的许多低效率的操作，减少了不必要的重复。编写 CSS 代码异常高效：https://www.sass.hk/

@media (prefers-color-scheme: dark) {
    @import "style_dark";
}

// style_light.scss 包含 @extend 语句，不能用在 @media 里
@import "style_light";

↑ style.scss 代码

@media (prefers-color-scheme: dark) {
.center-info {
    p {
        font-weight: 600 !important;
        font-size: 1.2rem !important;
        color: #333 !important;
    }
}
}

@media (prefers-color-scheme: light) {
.center-info {
    p { 
        font-weight: 600;
        font-size: 1.2rem;
        color: #fff;
      } 
}
}

↑ 亮色主题和暗色主题适配实例

效果

后记

其实我一直对夜间/深色模式没有特殊的偏好，也很少去使用它，但也都能适应。夜间模式也是最近又被微信推火了一波，但可以肯定的是它对于用户体验的提升来说绝对没有各种所谓的设计师口中所述的那么可观...

本博客及 Tony 主题开始支援深色主题样式自动切换

Subscribe

Comments