Fluid添加暗黑模式

本文最后更新于：2024年3月18日下午

为Fluid添加暗色模式

之前一直就想为博客添加个暗色模式，但是拖延症晚期:crying_cat_face:，所以一直拖到了现在，主要的代码参考自Royce的博客，emmm，这里还是把代码搬一下。。

HTML

首先是HTML，在\themes\fluid\layout\layout.ejs中找到<body>标签，然后在下方加入以下代码

<div id="dark" onclick="switchDarkMode()"></div>
<script>
  var isNight = new Date().getHours() >= 22 || new Date().getHours() < 7;
  if( isNight || localStorage.getItem('dark') === '1') {
    if(!(isNight&&localStorage.getItem('noDark') === '1')) {
      document.body.classList.add('dark');
    }
  }
  document.getElementById('dark').innerHTML = document.querySelector("body").classList.contains("dark")?"🌙":"🌞";
</script>

这里原本是用了媒体查询的，可以根据浏览器是否开启深色模式来对应开启深色模式，不过貌似有点小问题:sweat:，比如我的浏览器开了深色模式，但我点击了按钮，切换成了亮色模式，那肯定是说明我是喜欢以亮色模式访问该网站，但当我换了一个页面的时候（比如换了一个文章或回到首页）它又会检测到深色模式后切换到深色模式，emmmm，所以就先删了。。

JS

然后是JS，在主题下的source\js文件夹下新建一个 DarkMode.js 文件，在其中加入以下代码

//点击事件
function switchDarkMode() {
	if ($('body').hasClass('dark')) {
        /*$("#dark").html("🌞");*/
       document.getElementById("dark").style.background = "url('/img/dark.png')";
		document.body.classList.remove('dark');
		localStorage.setItem('noDark', '1');
		localStorage.setItem('dark', '0');
	} else {
        /*$("#dark").html("🌙"); */
        document.getElementById("dark").style.background = "url('/img/light.png')";
		document.body.classList.add('dark');
		localStorage.setItem('dark', '1');
		localStorage.setItem('noDark', '0');
	}
}

然后在Fluid主题的_config.yml中找到custom_js项，加入新建的 js 文件。

这个原版代码是通过注释中的两个字符——“🌞“和“🌙”来进行区分暗色模式和亮色模式。但个人觉得不太美观，同样，他的博客中也有一篇提到了 “返回页面顶”的一个类似于小挂件的效果，于是就想将那个挂件的效果改为更改模式，因此用PS粗粗地P了两个图，分别是带月亮dark.png和带太阳的light.png，在该段JS代码中，在切换模式的同时，将两个图片进行了切换。

CSS

最后是CSS，在主题下的source\css文件夹下，新建一个DarkMode.styl因为使用的是 style 文件，所以可以不在 _config.yml中引入，直接在同目录下的main.styl中进行导入即可。添加以下代码。

/* 切换按钮 */
#dark
  cursor pointer
  position fixed
  z-index 100
  left 50px 
  width 70px
  height 600px
  top -350px
  box-shadow 0 0 /* 去除外边框的阴影 */

  & > i
    display none /* 隐藏一个小箭头图标，否则会在图片上出现箭头 */

/*暗黑模式*/
.dark
  background-color rgb(31, 31, 31)
  

  /* 主体 */
  #board 
    background-color #1c1c21
    color #a09c9c
  
  blockquote
    border-left .25em solid #68696a
  img  
    filter brightness(50%)

  p
  .index-info a  
    color #718096

  .index-info a:hover
    color #3aa7f9

  .markdown-body
    h1,h2,h3,h4,h5,h6,s,li  
      color rgb(191, 191, 191) !important

    
  .markdown-body a
    color rgb(153, 189, 230)

  /* 顶栏 */
  .navbar-col-show
  .top-nav-collapse  
    background-color #282c34
    
  .navbar a  
    color rgb(191, 191, 191) !important
    
  .animated-icon span   /* 手机端 */
    background-color rgb(191, 191, 191)


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


  /* 打字机 */
  #subtitle
  .dark.typed-cursor--blink
  .scroll-down-arrow
    color #dfdfdf


  /* 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 #3aa7f9 !important

  /* footer */
  footer
  footer a
    color #718096
    
  /* 表格 */
  .markdown-body table td
  .markdown-body table th 
    padding: 6px 13px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(54, 54, 54);
    border-image: initial;


  /* 归档页 */
  .list-group-item
    color rgb(191, 191, 191)
    background-color #282c34
    
  .list-group-item:hover
  .tagcloud a:hover
    background-color #46484d


  /* 友链页 */
  .links
    .card  
      background-color #1c1c21
        
    .card-body:hover  
      background-color #46484d
        
    .link-title
    .link-intro  
      color rgb(191, 191, 191)
    

  /* 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 rgb(69, 89, 110)
    border-color rgb(28, 67, 110)

  /* aPlayer */
  .aplayer 
    background rgb(28, 28, 33)  !important

  .aplayer-lrc:after
    background linear-gradient(rgba(28, 28, 33, 0) 0px, rgba(28, 28, 33, 0.8)) !important

  .aplayer-lrc:before
    background linear-gradient(rgb(28, 28, 33) 0px, rgba(28, 28, 33, 0)) !important

  .aplayer.aplayer-withlist .aplayer-info
    border-bottom 1px solid rgb(48, 48, 48) !important

  /* valine */
  .v .vwrap 
    margin-bottom 10px
    position relative
    border-width 1px
    border-style solid
    border-color rgb(41, 41, 41)
    border-image initial
    border-radius 4px
    overflow hidden
    padding 10px

  a:active
    color #3aa7f9 

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