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 备用下载

(解压密码 1024,若看不到下载链接,请关闭广告屏蔽插件刷新重试)

云盘下载: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 插件备用下载

(解压密码 1024,若看不到下载链接,请关闭广告屏蔽插件刷新重试)

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

除非注明,沙唐桔文章均为原创,本文地址 https://cyhour.com/737/,转载时必须以链接形式注明原始出处。
声明:我们不销售主机,选主机需合法使用。任何主机需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!

WordPress 技巧:在后台显示文章浏览数「可排序」

除了使用 Google Analytics 统计整个博客流量之外,我们还可以对每篇文章的点击数进行统计,通过每篇文章统计,就可以知道哪些文章更受读者欢迎……比如 WP-PostViews 插件,不过这个插件不能在后台文章列表页面显示点击数,可以使用 WordPress 的 Hook 实现。 WordPress 技巧:在后台显示文章浏览数…
浏览: 127 标签:  ,  ,  , 

CentOS 7 编译安装 PHP 7.4 提示 No package ‘oniguruma’ found

在编译安装 PHP 7.4 时,如果使用 --with-mbstring 参数,则需要安装 oniguruma。oniguruma 是一个处理正则表达式库,php7.4 中,mbstring 正则表达式处理功能对这个包有依赖。所以,安装 php7.4 前需要安装 oniguruma 和 oniguruma-devel 两个软件包。 一般安装epel 然后安装即可: yum instal…
浏览: 74 标签:  ,  ,  , 

WordPress 数据库常用 SQL 语句

WordPress 数据库存储了站点所有信息,数据库对站点来说至关重要,一般情况下不要折腾数据库。但是很多情况下,使用 SQL 语句批量修改站点内容,大大提高效率。下面 SQL 语句均收集自网络,操作需谨慎。所有的SQL语句都是假定你的数据库的前缀是"wp_" ,如果你使用不同的表前缀,请自行修改。 温馨…
浏览: 31 标签:  , 

CentOS 7.9.2009 PHP 7.1.12 升级到 PHP 8.0.1

前阵子在闲置 VPS 和垃圾站环境试过将 PHP 7.1.12 升级到 PHP 8.0.0,看起来没什么问题,只是 fileinfo 扩展没能折腾上。 昨天在 BuyVM 1核 512MB AMD CPU VPS 上又测试了一遍,参考网友方法,fileinfo 也开启成功了,忍不住把博客环境也升级一下,估计最多一个小时就能搞定。 然而实际花了4个…
浏览: 34 标签:  ,  ,  ,  , 
浏览: 85 标签:  ,  ,  ,  , 

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信息