前言

handsome没有暗盒模式我就来增加一个
我们要用到Darkmode.Js

正文

引入资源

<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: '?'代表有一个?的图标，具体看下

  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即可，如:

.darkmode--activated .logo {
  color: #000;
}

我们可以在引入资源代码之后添加上<style>标签对
现在<style>标签对里更改好CSS然后放在主题的自定义CSS里

大功告成

是不是非常炫酷呢？

支持一下查看handsome适用css

此处内容需要评论回复后（审核通过）方可阅读。

Last modification：July 8, 2022
© Allow specification reprint
大哥给点钱吧~ヽ(･ω･´ﾒ)(微信 支付宝 QQ都是一个码哦～