Loading... ## 前言 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 © Allow specification reprint Support Appreciate the author AliPayWeChat Like 0 大哥给点钱吧~ヽ(・ω・´メ)(微信 支付宝 QQ都是一个码哦~
21 comments
打个卡,看看怎么用
看看哦
OωO这个我爱了,但是我评论咋不显示
ajax评论刷新一下就好了
滴!访客卡!打卡时间:下午10:09:48,请上车的乘客系好安全带~
写得好好哟,支持支持! ::tieba:Y.tb89:: 骚年,我怀疑你写了一篇假的文章! ::tieba:Y.tb94::
你这邮箱,你这名字服了啊
很卡顿不喜欢
::tieba:Y.tb2:: ::tieba:Y.tb2:: 写得好好哟,支持支持! ::tieba:Y.tb89::
谢谢 ::emoji:Y.emoji20::
支持
谢谢支持 ::QQ:Y.qq1::
学习学习
支持 ::QQ:Y.qq1::
学习了!很棒的教程啊!!!!
谢谢 ::tieba:Y.tb2::
牛逼!
不错
学习学习OωO