网站夜间模式轻松实现!

松鼠小

发表文章数:103

松鼠工具箱

一个汇集海量优质在线工具网站的精美网址导航。

立即查看
首页 » WordPress » 网站夜间模式轻松实现!

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

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

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

点击下载

转载请注明出处: 转载或复制请以 超链接形式 并注明出处 技术松鼠
原文地址:《网站夜间模式轻松实现!》 作者:松鼠小,发布于2020-10-04

分享到:
赞(0) 打赏

评论 抢沙发

评论前必须登录!

  注册



这里木有人,抢个沙发呗 o(๑◕ ▽ ◕๑)~


长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册