Fluid添加暗黑模式

博客美化
Article Directory
  1. HTML
  2. JS
  3. CSS

为Fluid添加暗色模式

之前一直就想为博客添加个暗色模式,但是拖延症晚期😿,所以一直拖到了现在,主要的代码参考自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>

这里原本是用了媒体查询的,可以根据浏览器是否开启深色模式来对应开启深色模式,不过貌似有点小问题😓,比如我的浏览器开了深色模式,但我点击了按钮,切换成了亮色模式,那肯定是说明我是喜欢以亮色模式访问该网站,但当我换了一个页面的时候(比如换了一个文章或回到首页)它又会检测到深色模式后切换到深色模式,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

对于原版CSS中的配色方案进行了微调,同时在CSS中添加了切换按钮的点击效果,原本是点击图片直接切换模式和图片,但感觉略显生硬,因此为它添加了一点小效果,就像是旧式的拉绳式的电灯,当按下时,“绳子变长”,即图片下移一部分,当鼠标松开时再回到原位,并更换图片。

将原版HTML中的<div>标签改为<a>标签,这样便可以通过:active来响应鼠标按下事件,只需要在鼠标按下时将图片下移即可。即在style文件最后添加

#dark:active
  top -300px

原本想着是不是要用贝塞尔曲线来加个动画来着。。。后来发现根本也不会按那么久。单单点击只要让图片下移就可以有差不多的效果了。🙈

light图片 dark图片