简短代码实现网站黑化(夜间模式)

Author： Zi_Gao
发布时间：February 26, 2020
3561 views
21 comments
3572 words
Categories：网站维护

## 前言
handsome没有暗盒模式我就来增加一个
我们要用到[Darkmode.Js][1]

## 正文

### 引入资源
```html
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.4.0/lib/darkmode-js.min.js"></script>
<script>
   new Darkmode({ label: '?' ,backgroundColor: '#ECEBD6'}).showWidget();
</script>
```
必须在footer.php引入
这是我用的

Darkmode类可以添加参数入`label: '?'`代表有一个?的图标，具体看下
```js
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: '?', // default: ''
  autoMatchOsTheme: true // default: true
```

### 设置暗黑模式的CSS

如果不单独设置暗黑模式的CSS会很怪
怎么设置呢它会在body中添加`darkmode--activated`我们可以自定义它
我们只需要在元素的名字签名添加`.darkmode--activated`即可，如:
```css
.darkmode--activated .logo {
  color: #000;
}
```
我们可以在引入资源代码之后添加上`<style>`标签对
现在`<style>`标签对里更改好CSS然后放在主题的自定义CSS里

## 大功告成

是不是非常炫酷呢？

支持一下查看handsome适用css
<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

[1]: https://darkmodejs.learn.uno/

Last modification：July 8, 2022

大哥给点钱吧~ヽ(･ω･´ﾒ)(微信支付宝 QQ都是一个码哦～

21 comments

米易对
June 27, 2020

打个卡，看看怎么用

Reply
系唔系
June 19, 2020

看看哦

Reply
okok
June 7, 2020

该评论仅登录用户及评论双方可见

Reply
Catalpa
May 5, 2020

OωO这个我爱了，但是我评论咋不显示

Reply
1. 子高
  May 5, 2020
  
  @Catalpa
  
  ajax评论刷新一下就好了
  
  Reply
Catalpa
May 5, 2020

该评论仅登录用户及评论双方可见

Reply
a
April 19, 2020

滴！访客卡！打卡时间：下午10:09:48，请上车的乘客系好安全带~

Reply
a
April 19, 2020

写得好好哟,支持支持！ ::tieba:Y.tb89:: 骚年,我怀疑你写了一篇假的文章！ ::tieba:Y.tb94::

Reply
1. 子高
  April 21, 2020
  
  @a
  
  你这邮箱，你这名字服了啊
  
  Reply
撒的
April 5, 2020

很卡顿不喜欢

Reply
Wasabi
March 24, 2020

::tieba:Y.tb2:: ::tieba:Y.tb2:: 写得好好哟,支持支持！ ::tieba:Y.tb89::

Reply
1. 子高
  March 26, 2020
  
  @Wasabi
  
  谢谢 ::emoji:Y.emoji20::
  
  Reply
爆胎
March 20, 2020

支持

Reply
1. 子高
  March 22, 2020
  
  @爆胎
  
  谢谢支持 ::QQ:Y.qq1::
  
  Reply
SWJ
March 4, 2020

学习学习

Reply
Gbr
March 3, 2020

支持 ::QQ:Y.qq1::

Reply
你的轩哥哥
March 1, 2020

学习了！很棒的教程啊！！！！

Reply
1. 子高
  March 3, 2020
  
  @你的轩哥哥
  
  谢谢 ::tieba:Y.tb2::
  
  Reply
gaigai
February 29, 2020

牛逼！

Reply
Chris ting
February 27, 2020

不错

Reply
boren
February 27, 2020

学习学习OωO

Reply