最后更新于:2020 七月 14日 , 星期二 , 10:02 上午

方案来自Royce2003
感谢大佬的代码及注释,对小白非常友好。

这里直接上具体操作

HTML

\themes\fluid\layout\layout.ejs 中找到 <body>,在其之后加入如下代码(注意!一定紧跟在 body 标签之后,否则会出现闪烁)

<div id="dark" onclick="switchDarkMode()"></div>
<script>
  var isNight = new Date().getHours() >= 22 || new Date().getHours() < 7;
  if( matchMedia('(prefers-color-scheme: dark)').matches || 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>

可以改成自己喜欢的其它图标或者字符

JS

随便找个 JS 把下面代码加进去,直接加到 </body> 之前也行

//点击事件
function switchDarkMode() {
	if ($('body').hasClass('dark')) {
		$("#dark").html("🌞");
		document.body.classList.remove('dark');
		localStorage.setItem('noDark', '1');
		localStorage.setItem('dark', '0');
	} else {
		$("#dark").html("🌙"); 
		document.body.classList.add('dark');
		localStorage.setItem('dark', '1');
		localStorage.setItem('noDark', '0');
	}
}

(我直接加在main.js)

CSS

下面是Royce2003的样式代码,基本覆盖所有内容,根据自身情况修改

(继续加进main.styl)

/* 切换按钮 */
#dark
  cursor pointer
  position fixed
  right 40px
  bottom 98px
  width 16px
  height 14px
  z-index 100
  font-size 20px

/*暗黑模式*/
.dark

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

  p
  .index-info a  
    color #a09c9c !important

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

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


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


  /* 打字机 */
  #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 #1abc9c !important


  /* footer */
  footer
  footer a
    color #a09c9c
    

  /* 归档页 */
  .list-group-item
    color #a09c9c
    background-color #282c34
    
  .list-group-item:hover
  .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

嗯这里的配色着实花了我一些时间,幸好有Snipaste截图工具,开一个Dark Reader chrome插件,取色很方便。

上面的文件直接保存然后刷新本地网页即可预览效果,
建议边修改边刷新预览。


暂时遇到的问题:

  • 在手机上,右上角的菜单按钮颜色不知道怎么调整解决
    .animated-icon span /* 手机端 */
    background-color #a09c9c
    这里无论我怎么改(eee~fff),它都只有灰色或者全黑两种状态,我想改成白色来着,和左上角标题配色相符🙄

  • 图标常驻右下角也不是个事儿,有碍观瞻解决

  • 文章页日/夜模式切换按钮位置不搭解决
    有空再看看怎样添加按钮至底部

  • 代码块背景色还是白的

  • 部分文字鼠标悬浮时没有变色

  • 其它字体图标颜色的小问题(大概是指定了html样式的那些)
    image.png
    image.png


没啥技术含量,主要是做个记录水一篇文章🙊

本站配色📌

下面分享一下自己的修改情况(可能有些错误,毕竟我只会复制粘贴🤷‍♂️
layout.ejs

  <!--夜间模式🌕🌚-->
  <div id="dark" onclick="switchDarkMode()"></div>
<script>
  var isNight = new Date().getHours() >= 22 || new Date().getHours() < 7;
  if( matchMedia('(prefers-color-scheme: dark)').matches || isNight || localStorage.getItem('dark') === '1') {
    if(!(isNight&&localStorage.getItem('noDark') === '1')) {
      document.body.classList.add('dark');
    }
  }
</script>

main.js

//夜间模式🌗点击事件
function switchDarkMode() {
	if ($('body').hasClass('dark')) {
		document.body.classList.remove('dark');
		localStorage.setItem('noDark', '1');
		localStorage.setItem('dark', '0');
	} else {
		document.body.classList.add('dark');
		localStorage.setItem('dark', '1');
		localStorage.setItem('noDark', '0');
	}
}

main.styl

//夜间模式样式🌕🌚仅作部分配色修改。感谢Royce2003提供的代码
/* 切换按钮 删掉*/


/*暗黑模式*/
.dark
  background-color #181a1b
  /* 主体 */
  #board 
    background-color #181a1b
    color #cbc7bf
  
  img  
    filter brightness(90%)

  p
  .index-info a  
    color #cbc7bf !important
  .index-btm
    color #cbc7bf
  .post-prevnext
    color #cbc7bf
  .post-meta
    color #cbc7bf

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

  /* 顶栏 */
  .navbar-col-show
  .top-nav-collapse  
    background-color #273238
    
  .navbar a  
    color #ffffff !important
    
  .animated-icon span   /* 手机端 */
    background-color #ffffff
    color #ffffff


  /* page-number */
  .pagination a:hover
  .pagination .current  
    background-color #1e2021;


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


  /* back to top */
  #scroll-top-button
    background-color #181a1b

    i
      color #b7b1a7
    

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

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


  /* footer */
  footer
  footer a
    color #c5c2ba
    

  /* 归档页 */
  .list-group-item
    color #cac6be
    background-color #181a1b

  .list-group-item:hover
  .tagcloud a:hover
    background-color #46484d


  /* 友链页 */
  .links
    .card  
      background-color #181a1b
        
    .card-body:hover  
      background-color #1e2021
        
    .link-title
    .link-intro  
      color #a09c9c
    

  /* note标签 由冼仙修改使用snipaste获取Dark Reader提供的配色 */
  .note-info
    background-color #122c31
    border-color #238fa1

  .note-danger
    background-color #360b0e
    border-color #9a1823

  .note-success
    background-color #172d1c
    border-color #367a46

  .note-warning
    background-color #3c300a
    border-color #87712b

  .note-primary
    background-color #212325
    border-color #1561b3

  .note-secondary
    background-color #212325
    border-color #545455

  .note-light
    background-color #191a1b
    border-color #636363

  .cbp_tmtimeline>li .cbp_tmlabel
    background: #254a25
  .cbp_tmtimeline > li:nth-child(2n+1) .cbp_tmlabel
    background: #7e2907
//Artitalk说说背景色

用到的工具:


本站所有文章除特别声明外,均采用 CC BY-SA-NC 4.0 协议 。转载请注明原作者及出处!

使用robots.txt优化搜索结果 上一篇
水龙吟·燕云十八飞骑 下一篇

 目录

既见君子 云胡不喜