之前介绍过电脑的夜间模式

今天给大家推荐网站夜间模式

这里以jishusongshu.com为例

一、浏览器

1、Chrome

Chrome貌似没自带夜间主题

大家可到主题背景中下载

https://chrome.google.com/webstore/category/themes

或使用浏览器扩展,比如Dark Reader

使用效果:

明亮
黑暗

2、Edge

设置-外观-默认主题-深色

如果你的Edge是新版Chromium内核的

使用浏览器扩展,比如Dark Reader

https://microsoftedge.microsoft.com/addons/

3、Firefox

Firefox貌似没自带夜间主题

Dark Reader同样有Firefox扩展

二、WordPress

使用插件:WP Dark Mode

免费版包含两种图标悬浮样式

在右(左)下角添加切换按钮

夜间模式效果

我对图标位置不满意(太偏左上)
而又没有位置设置选项,于是直接动手右键元素-检查,找到元素right_bottom在插件文件夹全局查找,找到元素所在文件wp-content/plugins/wp-dark-mode/assets/css/frontend.css

修改位置:

原来的好像是26px

最终效果:

有些地方多了些黑色背景

想到插件有排除功能设置

没想到要会员权限

这能忍?偶然发现class多了字符

仔细研究后发现它的排除原理:

在class或id名后添加标志符号

wp-dark-mode-ignore

哈哈,语义太明显了

于是自己手动添加进去

实现效果:

遗憾的是定时自动切换深色需要会员

然而Pro版价格 $31.85 for 3 Sites

哎,要是¥10以内我倒是可以接受

但要是哪天闲来无事研究一下其原理

说不定,我就把它给搞定了

三、插件下载

WP Dark Mode官网下载
https://wppool.dev/wp-dark-mode/







文件名称:WP Dark Mode v1.0.9
更新日期:2020-09-27
文件大小:2.87M

点击下载