折腾一下博客夜间模式

折腾一下博客夜间模式

啊哈,与时俱进

小日子

2020.12.11

0 #dark #css

最近看到 GitHub 更新了黑暗模式(夜间模式),自己也心血来潮,给自己博客更新下 CSS。

本以为需要改的东西地方会很多,结果基本上就是在 SCSS 中设置好颜色变量,对需要改动的地方更新下新的颜色就行了。

我目前是基于 prefers-color-scheme 这个 media query 来自动调用夜间模式的,黑白分明。

@media (prefers-color-scheme: dark) {
  // TO-DO, colors in dark mode
}

先上线试试,或许以后会增加访客设置选项,不知道如何设置更好,有建议的朋友可以留言交流下。

Ads by Google

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.4 billion 🇨🇳. This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Sass 基础

Web Notes

2017.08.17

Sass 基础

该来的总会来,用到的时候总是要去学习的。Bootstrap 4 进入 Beta,就想着是不是要折腾一下博客模板,这次就试试用 Scss 来更新吧。

CSS 选择器笔记

Web Notes

2016.12.01

CSS 选择器笔记

CSS 选择器用于选择需要添加样式的元素,其重要性不言而喻。最近更新博客模板就不断调整 CSS 样式,好多时候就因为选择器不熟悉而不能应用样式,所以干脆好好学习总结一下常用的 CSS 选择器,也为下一步学习 jQuery 做好准备。

Syntax highlight with Rouge in Jekyll

Tutorials

2017.03.18

Syntax highlight with Rouge in Jekyll

By default, Jekyll 3 and above versions integrated with Rouge, a pure Ruby syntax highlighter which supports over 100 languages. Since Rouge themes are compatible with Pygments’s stylesheets, it’s nice for us to choose a favorable style.