网站夜间模式轻松实现！

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

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

这里以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

修改位置：

最终效果：

有些地方多了些黑色背景

想到插件有排除功能设置

没想到要会员权限

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

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

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

wp-dark-mode-ignore

哈哈，语义太明显了

于是自己手动添加进去

实现效果：

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

然而Pro版价格 $31.85 for 3 Sites

哎，要是￥10以内我倒是可以接受

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

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

三、插件下载

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

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。