🎉本站已添加夜间模式🌗
本文最后更新于:3 个月前
方案来自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样式的那些)
没啥技术含量,主要是做个记录水一篇文章🙊
本站配色📌
下面分享一下自己的修改情况(可能有些错误,毕竟我只会复制粘贴🤷♂️)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说说背景色
用到的工具:
- Snipaste
- Dark Reader
- 调色板
- Vscode插件 color highlight
本站所有文章除特别声明外,均采用 CC BY-SA-NC 4.0 协议 。转载请注明原作者及出处!