应博友 Inuyasha 的请求，现分享本站友链页源代码如下。

特性

自适应浅色主题和深色主题，自适应内容区宽度，自适应电脑、平板、手机。

夜间模式已经实现很久了，当初有人跟我讲，可以增加一个按时间切换的功能。

直到我在无意间查看 Reabble 阅读器的 CSS 样式时，发现了 @media (prefers-color-scheme: dark) 选择器。

来自：prefers-color-scheme - CSS（层叠样式表） | MDN
prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

简而言之，就是可以实现随系统（或浏览器）的深、浅色模式设置，改变网页配色。

我觉得这是比按时间切换更好的一个实现，跟随系统设置比跟随时间更加人性化一些，毕竟还有我这种，白天开深色，晚上开浅色的异类（逃）

前言

主要是 Bing 找了许多 libraries。效果在 Chrome for Windows 上都不理想，要么滚动很生硬，要么就是太复杂，就自己实现了。

本来是 PC only 的，写好后测试了一下移动端，是兼容的，效果也还不错……

不过反正移动端都自带惯性滑动了

效果

话不多说看效果

从客户得到的网页字体足足有 10MB 大小，会严重拖慢网页加载，如何处理？

阅读下面的解决方法前，建议先阅读网页字体优化，了解一些基本知识以及这么做的原因。

字体去繁体

GBK 结尾的字体偏大的原因是包含庞大的繁体字库，大多数网页并不需要，可以使用 fontTools 得到字体的简体中文子集。

Icarus 相信大家都很熟悉，但是有时候我们希望在文章中用特别的样式注明一些内容，markdown 语法就不够用了，所以 Icarus 有哪些高级玩法呢？下面就让 iMaeGoo 带大家一起了解吧。（误

TOC

如果要为网站增加矢量图标，其中两个选项是使用 SVG 和使用字体图标，两种方式各有千秋，以下是我个人做的比较。

SVG

在阅读这一部分前，可以先参考文章 HTML中嵌入SVG图片的N种方式，了解一下不同的 SVG 嵌入页面的方式。

原主题
Icarus 夜间模式（实验中）
如何给 Icarus 增加夜间模式

夜间模式单独提取的代码目前已经更新，支持 Icarus 3.0.0，有需要的朋友欢迎 checkout。

分支：https://github.com/imaegoo/hexo-theme-icarus/tree/night3
提交：https://github.com/imaegoo/hexo-theme-icarus/commit/fc3d016ae1c999347bd9ecbf3cc656e1382db06d

1
2
3
4

cd theme/icarus
git remote add imaegoo https://github.com/imaegoo/hexo-theme-icarus.git
git fetch imaegoo
git merge imaegoo/night3

此篇针对 Icarus 2 版本，Icarus 3 请参考：Icarus 夜间模式支持 3.0 了

Preview

Live Preview

https://www.imaegoo.com/

Attention

This extension is NOT FULLY TESTED, so it may not fully cover the theme styles, if you find something wrong (such as bright things in night mode), please report it in this issue, do not open new issue.

Usage

1. Merge night branch from imaegoo/hexo-theme-icarus into your icarus theme folder, or dowmload zip.
2. If you configured an image logo, you should prepare a logo for night mode, then apply them in themes/icarus/_config.yml.

   1 2 3

   logo: light: /images/logo.png dark: /images/logo-dark.png

1. 把 night 分支（imaegoo/hexo-theme-icarus）合并到你的主题分支中。如果你不懂，并且你对主题没有自己修改，直接下载修改好压缩包。
2. 如果你的网站 LOGO 是图片，你可能需要准备一黑一白两个版本的 LOGO，并在主题 themes/icarus/_config.yml 中配置。

   1 2 3

   logo: light: /images/logo.png dark: /images/logo-dark.png

Modify

If you want to customize your theme, you can modify night mode part in themes/icarus/source/css/style.styl.

Thanks

Universe background from https://github.com/fan-lv/Fan

更新了 Icarus 主题代码，右上角增加了夜间模式切换按钮，是实验中的功能，欢迎体验。

通过向 body 添加名为 night 的 class 实现，状态记在浏览器 localstorage 中。

已知问题：

1. 样式可能没有全面覆盖。
2. 夜间模式在低性能浏览器上导致页面响应缓慢，需要优化性能。

目前还没有做成插件，仅在自己的博客使用，后期如果有时间的话，会考虑做成 extension。

更新：已经发布了——

Icarus 2 请参考：如何给 Icarus 增加夜间模式
Icarus 3 请参考：Icarus 夜间模式支持 3.0 了

经常在查资料时访问各种 CSDN 博客会发现，当 屏幕高度 < 左边栏的高度 < 内容的高度 时，滚动屏幕，左边栏会随着内容一同滚动，当滚动到左边栏底部时，左边栏会停止滚动，而内容会继续滚动。

这种设计的优势在于，用户既能够滚动左边栏，又不会在左边栏不够长时，造成页面左侧大片空白的尴尬，这种布局模式，叫做 粘性布局（sticky）。

粘性布局在元素满足显示条件时，表现与普通布局没什么不同，但当元素随着页面滚动而无法显示时，会转为 fixed 布局效果，主流浏览器已经全部支持粘性布局（IE不支持）。

通俗一点讲，类似于 Excel 中的“冻结窗格”。

绝大多数网上的教程材料都用 position: sticky; top: 0; 这样的组合来举例，但为了实现 CSDN 左边栏效果，position: sticky; bottom: 0; 似乎不能和想象一样的起作用。

先说结论吧

1. sticky 的确是无法直接粘底的……
2. CSDN 使用 JS 动态计算实现，当计算到左边栏底部即将滚上屏幕时，立即对左边栏添加 position: fixed; bottom: 0; 样式，把左边栏定死，延时较为明显，快速上下滚动时能看到闪烁。
3. 我使用 position: sticky; 实现，通过 JS 计算 屏幕高度 - 左边栏高度 得到 top 的值，快速滚动时没有闪烁。

提到网页毛玻璃效果，总结下来有以下2种：

1. 模糊元素本身
2. 模糊元素后面的内容

早在之前，1就已经可以通过 CSS3 filter 属性实现，而2一直没有一个好的解决方案。对1的运用，也可以达到2的效果，通过模糊图片的一部分，就可以实现类似 bilibili 导航栏的模糊背景效果 ↓

这样实现的前提是，我们的背景是一个静态的，单一的图片，那么如果我们需要模糊的背景比较复杂呢？仔细观察QQ右栏的标题栏，和下方的应用 Dock，都是 iOS 常见的毛玻璃叠加层效果 ↓

显然模糊元素本身并不能解决所有场景的问题。

效果：

源码：

1
2
3
4

<div class="chip">
  <span class="name">Hover me!</span>
  <span class="close-bth">X</span>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.chip {
  display: flex;
  width: fit-content;
  font-size: 20px;
  text-align: center;
  background-color: #ccc;
}

.chip .name { width: 120px; }
.chip .close-bth { width: 30px; }

.chip .name:hover,
.chip .name:hover + .close-bth,
.chip .close-bth:hover {
  color: white;
  background-color: #888;
}

CodePen link:
https://codepen.io/iMaeGoo/pen/jRqYRJ

hmmmm…这种实现也没什么难的，其实是想试试在博文中插入HTML啦。

效果如图：