为icarus主题添加夜间模式

以下操作是在 icarus 主题的 4.1.1 版本下完成的。

看到这个网站的夜晚模式很炫酷，也很实用（毕竟为革命保护视力，晚上最好还是别盯着个明晃晃的屏幕一直看）。该网站的作者还分享了他构建这个模式的代码和改动步骤（icarus 主题从 2 到 3 再到 4 各版本的都有，tql），所以直接就能拿来用，hhh。

照葫芦画瓢下来之后，夜景模式的雏形是有了，但一些细节很辣眼。对此自己通过一段时间的摸索，逐渐修改了其中的一部分。在此记录下这些问题和解决过程（持续更新），以免等主题更新了需再修改时自己给忘了。

当前这些操作是在 icarus 的 4.1.1 版本下完成的。

窄版模式下的导航栏白背景

不论是在手机上浏览自己的网站，还是在电脑上当浏览器的宽度小于某一数值时，站点顶部的导航栏依旧是白色的，与大背景格格不入。对于这一问题，夜晚模式的作者表示 icarus4 系列版本下暂无解决方案。（所以作者大大宁的网站咋就没这个问题？？）

对此，自己暂时摸索出一个解决方案，就是可以把这一串代码（直接从网页开发者工具栏 default.css 里 copy 下来的，修改了两个地方）贴至现有 \themes\icarus\source\css\imaegoo\night.styl 文件的最后（前提是未对主题做其他修改，特别是 navbar 这块）：

@media screen and (max-width: 1087px) {
    .navbar > .container {
      display: block;
    }
    .navbar-brand .navbar-item,
    .navbar-tabs .navbar-item {
      align-items: center;
      display: flex;
    }
    .navbar-link::after {
      display: none;
    }
    .navbar-menu {
-     background-color: #ffffff;
-     box-shadow: 0 8px 16px rgba(10,10,10,0.1);
+     background-color: #fff0;
+     box-shadow: 0 8px 16px rgba(10,10,10,0);
      padding: 0.5rem 0;
    }
    .navbar-menu.is-active {
      display: block;
    }
    .navbar.is-fixed-bottom-touch,
    .navbar.is-fixed-top-touch {
      left: 0;
      position: fixed;
      right: 0;
      z-index: 30;
    }
    .navbar.is-fixed-bottom-touch {
      bottom: 0;
    }
    .navbar.is-fixed-bottom-touch.has-shadow {
      box-shadow: 0 -2px 3px rgba(10,10,10,0.1);
    }
    .navbar.is-fixed-top-touch {
      top: 0;
    }
    .navbar.is-fixed-top .navbar-menu,
    .navbar.is-fixed-top-touch .navbar-menu {
      -webkit-overflow-scrolling: touch;
      max-height: calc(100vh - 3.25rem);
      overflow: auto;
    }
    html.has-navbar-fixed-top-touch,
    body.has-navbar-fixed-top-touch {
      padding-top: 3.25rem;
    }
    html.has-navbar-fixed-bottom-touch,
    body.has-navbar-fixed-bottom-touch {
      padding-bottom: 3.25rem;
    }
}

修改的两个地方在原第 14 行那里 background-color: #fff0; 和 15 行那里 box-shadow: 0 8px 16px rgba(10,10,10,0);，这样使得当窄屏模式（即宽度小于 1087px）下，导航菜单的背景为透明，且其四周也不设阴影。

这波操作的灵感是来自这个issue。尚未发现这么做有啥漏洞，hhh。

滚动条样式美化

夜晚模式下，凡涉及到需要滚动的部分，那个丑陋的灰白色侧边长条方块让人看起来很不爽。后来发现已有大佬解决了这一问题：只需将这些代码插入到 \themes\icarus\include\style\base.styl 文件中 +desktop() 一行的上方即可。

// Modify the style of the scroll bar only for -webkit browsers
::-webkit-scrollbar
    width: 8px
    height: 8px

// Modify the style of the scroll bar only for -webkit browsers
::-webkit-scrollbar-track
    border-radius: 3px
    background: rgba(0,0,0,0.06)
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1)

// Modify the style of the scroll bar only for -webkit browsers
::-webkit-scrollbar-thumb
    border-radius: 3px
    background: rgba(0,0,0,0.12)
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2)

// Modify the style of the scroll bar only for -webkit browsers
::-webkit-scrollbar-thumb:hover
    background: rgba(0,0,0,0.24)

不过该大佬说，此修改只支持 Chrome 系（即 webkit）浏览器，Firefox 不支持。IE 什么的就更不用说了，hhh。

捐赠二维码被部分遮挡

捐赠板块的微信二维码此前因为太大了，夜晚模式下直接被 licensing 那个模块给遮挡了一部分。对此一开始我想尝试调整 \themes\icarus\include\style 文件中 .qrcode 里面的 z-index 到一个很大的值，但不知道为啥不管用。后来干脆就把 .qrcode 的 max-width 缩小，即把同一文件开头那里 $donate-qrcode-max-width ?= 280px 改为 $donate-qrcode-max-width ?= 120px，那个二维码图片直接就够不着 licensing 板块了，problem solved。

页内标签栏 Tabs 亮瞎眼

Emmm，这个问题其实和第一个问题的形式大致是一样的，但解决起来要简单很多。只需要在 \themes\icarus\source\js\imaegoo\night.styl 文件最后部分body.night 这一行上方插入以下代码（需缩进一大格，即表明为 night 大样式下的子样式）:

+   // tab
+   .tabs.is-boxed li.is-active a
+       background-color: #262a39
+       border-color: #dbdbdb
+       border-bottom-color: transparent !important
+
+   .tabs.is-boxed a:hover
+       background-color: #434a56
+
+   .tabs li.is-active a
+       color: #dbdbdb

body.night
    night()

然后正常更新就完了。

页内引入的 message 消息也亮瞎眼

在上一项的基础上，即在 \themes\icarus\source\js\imaegoo\night.styl 文件最后部分 body.night 这一行上方再插入以下代码:

+   // message.is-warning
+   article.message.message-immersive.is-warning
+       background-color: dark-primary-color-hover
+
+       .message-body
+           color: #ffdd57

body.night
    night()

同正常更新就完了。

（PS：这里只是针对 is-warning 这个样式的。其他五种样式，包括：