黑暗模式 - 卤蛋的自我修养

本文最后更新于：2020年7月18日上午

Fluid主题已经支持暗色模式，请忽略此篇文章。

写在前面

本文用的方法是大佬教程^[1]和源码^[2]的再整理，可以优先看教程^[1]，本文做了部分修改。

nav.ejs

找到layout\_partial\nav.ejs，在开始的地方加入

<a id="mdark" onclick="switchDarkMode()"><i class="iconfont icon-sun"></i></a>
<script>
  var isNight = new Date().getHours() >= 22 || new Date().getHours() <= 7;
  if(((matchMedia('(prefers-color-scheme: dark)').matches)||isNight||(localStorage.getItem('dark') === '1'))&&!(isNight&&localStorage.getItem('noDark') === '1')) {
    document.body.classList.add('dark');
  }
</script>

找到theme.search.enable，添加一个新的nav-item

<% if(theme.search.enable) { %>
  <li class="nav-item" id="search-btn">
    <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;&nbsp;<i
        class="iconfont icon-search"></i>&nbsp;&nbsp;</a>
  </li>
<% } %>
<!-- 在导航栏添加切换开关 -->
<li class="nav-item">
  <a id="dark" class="nav-link" onclick="switchDarkMode()"><i class="iconfont icon-moon"></i></a>
</li>

末尾添加

<script>
  document.getElementById('dark').innerHTML = document.querySelector("body").classList.contains("dark") ? '<i class="iconfont icon-moon"></i>' : '<i class="iconfont icon-sun"></i>';
  document.getElementById('mdark').innerHTML = document.querySelector("body").classList.contains("dark") ? '<i class="iconfont icon-moon"></i>' : '<i class="iconfont icon-sun"></i>';
</script>

custom.styl

在博客下（不是主题目录）source\css文件夹(如果没有需新建)，添加如下样式到custom.styl里

.icon
  width 1.5em
  height 1.5em

.comments img
  max-width 100%

/* 切换按钮 */
#dark
  display none

  i
    font-size 1.25rem
    color #EBA300

  &:hover
    background-color transparent

#mdark i /* 页面切换图标的位置 */
  position fixed
  right 1rem
  bottom 5rem
  font-size 2rem
  z-index 99
  color #EBA300

@media (min-width: 992px)
  #mdark
    display none
  #dark
    display block

/*暗黑模式*/
.dark
  background-color #282c34

  #dark, #mdark
    i
      color #757575

  /* 背景遮罩 */
  .mask
    background-color rgba(0,0,0,.7) !important
    // 打字机
    span
      color #a09c9c

  /* 主体 */
  #board 
    background-color #282c34
    color #a09c9c
  
  img  
    filter brightness(60%)

  p, .index-card a, .post-meta, .drop-cap
    color #a09c9c

  a
    color #718096

    &:hover
      color #12977d

  .post-meta .hover-with-bg
    &::before
      background #282C34

    &::after
      background #282C34

  .markdown-body
    h1, h2, h3, h4, h5, h6, li, s
      color:#a09c9c !important

    blockquote
      border-left .25em solid #6c6c6c;

  .hover-with-bg:hover
    background-color #24282F

  /* 顶栏 */
  .nav-link, .navbar-brand
    color:#a09c9c !important

  .navbar-col-show, .top-nav-collapse
    background-color rgba(40, 44, 52, .8)

  .animated-icon span   /* 手机端 */
    background-color #a09c9c

  /* page-number */
  .pagination
    .current, a:hover
      background-color #6b6b6b73

  /* back to top */
  #scroll-top-button
    background-color #282c34

    i
      color #a09c9c 

  /* Toc */
  .tocbot-list a
    color #a09c9c

  .tocbot-active-link, footer a:hover
    color #1abc9c !important

  /* footer */
  footer, footer a
    color #a09c9c
 
  /* 归档页 */
  .list-group-item
    color #a09c9c
    background-color #282c34

    &:hover
      background-color #46484d

  /* 标签页 */
  .tagcloud a:hover
    background-color #46484d

  /* 友链页 */
  .links
    .card 
      background-color #282c34

    .card-body:hover
      background-color #46484d

    .link-title, .link-intro
      color #a09c9c

  /* note */
  .note-info
    background-color #3b5359
    border-color #006d80

  .note-danger
    background-color #783f42
    border-color #670009

  .note-success
    background-color #2a3e2e
    border-color #005915

  .note-warning
    background-color #5b543e
    border-color #846500

  .note-primary
    background-color #455a6f
    border-color #004188

  /* Valine */
  div#comments
    *
      background-color #282c34

    input, textarea
      color #a09c9c !important

可以自己做相应的调整，另外有些样式在暗黑模式不兼容（期待强哥出官方的😄）。
在fluid_config.yml指定自定义 css 文件路径设置

custom_css: 
  - /css/custom.css

switchDarkMode

这个我是直接把switchDarkMode()的js文件放到了cdn里，就没有修改主题文件（改得越少麻烦也少🤭），然后在自定义 js文件路径设置（可以用我的，不过要注意iconfont的设置，也可以放到自己的cdn里）

custom_js: 
  - //cdn.jsdelivr.net/gh/pxxyyz/blog-file/js/switchDarkMode.js

如果想自己弄，就看下面的js，随便放在themes\fluid\source\js的任意文件中，也可以新建一个js文件（那还不如放在cdn里🤭）

// Dark Mode 点击
function switchDarkMode() {
  if ($('body').hasClass('dark')) {
    $('#dark').html('<i class="iconfont icon-sun"></i>');
    $('#mdark').html('<i class="iconfont icon-sun"></i>');
    $('body').removeClass("dark");
    localStorage.setItem('noDark', '1');
    localStorage.setItem('dark', '0');
  } else {
    $('#dark').html('<i class="iconfont icon-moon"></i>'); 
    $('#mdark').html('<i class="iconfont icon-moon"></i>'); 
    $('body').addClass('dark');
    localStorage.setItem('dark', '1');
    localStorage.setItem('noDark', '0');
  }
}

iconfont

最后要注意icon的设置，我用的两个图标都是阿里巴巴国际站官方图标库里的，可以ctrl+f搜一下

icon-sun 对应"Daytime mode" icon
icon-moon 对应"night mode" icon

使用方法

选择合适的图标，添加入库
点开购物车，选择添加到项目
选择图标，编辑图标，修改Font Class / Symbol，将图标的代码修改为sun或moon，选择仅保存（也可diy一下）
更新代码，复制代码至fluid_config.yml指定自定义 css 文件路径设置
应用icon格式为<i class="iconfont icon-sun"></i>或<i class="iconfont icon-moon"></i>

custom_css: 
  - //at.alicdn.com/t/font_1806861_nr5lijinha.css

当然，也可直接icon的代码来修改对应的css或js（比较麻烦）。

ps.前面流程正确但不能正确得到图标，说明Unicode(16进制)（见step 3修改Class）和主题自带的图标重复(可以看themes\fluid\_static_prefix.yml第三方库第一个)，修改自己的Unicode即可，步骤与step 3一致。

小结

再申明一遍，这篇水水的博客的内容来自于大佬的教程^[1]和源码^[2]，我自身照着做了做，然后整理出来供大家参考。最后感慨下，现在高中生真的厉害。

如果有问题请在下方留言。

参考

博客技术

Fluid dark

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

LaTeX论文合集模板上一篇

变分模态分解下一篇