Darkmode.js 为网站添加黑暗模式 WordPress 夜间模式

前几天折腾了下暗黑模式,需要自己改 css,并且还得设备和浏览器支持才能实现。这里介绍一个懒人方法:Darkmode.js 为网站添加黑暗模式。

网站/博客引入 Darkmode.js 快速支持黑暗模式 夜间模式

方法其实很简单,引入 js,运行即可。比如 WordPress 默认主题,在 wp_footer(); 后,</body> 前插入如下 js 代码即可(twentytwelve 主题测试通过)。

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
function addDarkmodeWidget() {
const options = {
bottom: '64px', // default: '32px'
right: '32px', // default: '32px'
left: 'unset', // 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
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
}
window.addEventListener('load', addDarkmodeWidget);
</script>

还可以根据实际修改参数适配网站,把 darkmode-js.min.js 保存到服务器本地引入也可以。

Darkmode.js 备用下载

云盘下载:Darkmode.js-1.5.7

WordPress 夜间模式插件 Blackout: Dark Mode Widget

WordPress 如果不想修改主题代码,还可以借助插件:Blackout: Dark Mode Widget - WordPress 暗黑模式插件。

该插件基于 Darkmode.js 开发,可以让 WordPress 网站一键切换到暗黑模式,适合懒人,不过效果一般,不嫌麻烦还是自己改 css 效果更好。

WordPress 后台插件安装页面搜索并安装 Blackout: Dark Mode Widget 插件。启用插件,打开网站首页,右下方增加了一个圆形按钮,点击就会进入黑色背景的暗黑模式。

正常模式

暗黑模式

额外设置,Blackout Settings 插件设置页面,根据需要自定义设置或者默认设置即可。

插件暗黑模式只支持新版本 Chrome、Firefox 和 Safari,但不支持所有版本 IE 和 Edge 浏览器。

Blackout: Dark Mode Widget 插件备用下载

云盘下载:blackout-darkmode-widget.2.0.4

除非注明,垃圾站文章均为网络收集,本文地址 https://cyhour.com/737/,转载时烦请以链接形式注明原始出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

升级新版 Google AdSense 代码提升广告效果

2021年7月19日,Google AdSense 最近发布了新版 AdSense 代码。通过新版 AdSense 代码,AdSense 可以更早触发优化功能,从而提升网站上广告效果。新广告代码适用于自动广告和广告单元。 如何获取 Google AdSense 新版代码? 无需采取任何措施。在下次登录 AdSense 后,您将拥有对新广告代码的访…

利用 Google Analytics 追踪 WordPress 站内搜索关键词

Google分析(Google Analytics)是一个由 Google 所提供的网站流量统计服务。Google 分析(Analytics)现在是互联网上使用最广泛的网络分析服务。 利用 Google Analytics 追踪 WordPress 站内搜索关键词 优化内容 如果网站/博客在 Google Analytics 流量统计,利用 Google Analytics 追踪 W…

Google Analytics 异步请求(服务端请求)

感谢伟大的祖国,使得好好的 Google,必须折腾一番才能好好的用起来。Google 搜索如此,Google Analytics 肯定也不例外(网上据说 Google Analytics 没有被屏蔽)。 Google Analytics 支持服务端发送统计信息(via:Jerry Qu),而通过服务端统计可以解决 Google Analytics 连接缓慢问题,提高页面…
浏览: 140 标签:  ,  , 

Gravatar 头像被墙及解决方案 Gravatar 头像国内镜像地址大全

Gravatar 头像真是一言难尽,时而正常时而抽风时而无法访问……就一个 Gravatar 头像,这有啥好强(现代通假字)的呢?(据说是被其它服务连累?) 解决办法 - 调用 ssl/cn 头像链接 历史解决办法:调用 ssl 头像链接——https还是没被墙的,而且速度还不错,直接调用这个最简单了。主题 functi…
浏览: 148 标签:  ,  ,  ,  , 
浏览: 156 标签:  ,  ,  ,  , 

Comments:10

  1. 前几天知更鸟博客看到过。背景颜色不可以调,需要自己找js。

    2019.11.24 00:35 # 回复
    1楼
  2. 奇怪,你之前不是有css的,我这里晚上了,还是白天版的,没开启?

    2019.11.24 07:44 # 回复
    2楼
  3. 就想搞个自动的😂

    2019.11.24 22:26 # 回复
    3楼
    • @灰常记忆 楼上大哥就有自动方案啊:WordPress添加夜间模式cookie版 https://xptt.com/653884.html

      2019.11.25 08:46 # 回复
  4. 要是支持时间段自动变成暗黑模式就好了^0^~

    2019.11.25 00:26 # 回复
    4楼
    • @卡卡讯 楼上楼上就有使用 cookie 自动切换版本,不过我没有折腾。
      WordPress添加夜间模式cookie版 https://xptt.com/653884.html

      2019.11.25 08:46 # 回复
  5. 晚上看不伤眼了,好方案。

    2019.11.25 10:22 # 回复
    5楼

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息