网站纯 css 开启暗黑模式

来源:Dark mode in a website with CSS,看着很简单,不过真要折腾还是挺麻烦。

为此,css 文件干掉了很多设置不同颜色的代码(为了省事,普通模式也基本上是黑白了。优化了一下,原本颜色基本上回来了,暗黑模式也还行),暗黑模式看起来才有点像样了。原文代码:

@media (prefers-color-scheme: dark) {
body {
background-color: #444;
color: #e4e4e4;
}
a {
color: #e39777;
}
img {
filter: grayscale(30%);
}
}

支持 Firefox、Safari 和 Chrome 等浏览器。需要根据实际添加需要变色的 class/id。

亲测 iOS 13 暗黑模式下 Chrome 和 Safari 浏览器自动生效。

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

WordPress 数据库常用 SQL 语句

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

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个…
浏览: 26 标签:  ,  ,  ,  , 

OneinStack php 7.4.12 升级 php 8.0.0

2020-11-26,PHP 8.0.0 正式版发布,WordPress 5.6 昨天出来了,开始支持 PHP 8,今天看到博友说 1G 内存也能跑 PHP7、PHP8 共存,忍不住在探针站试着升级了一下。 OneinStack 自带 php 升级脚本,不过并不支持跨版本升级,比如无法从 php 7.4.12 升级到 php 8.0.0,参考「OneinStack php 7.3.…
浏览: 61 标签:  ,  ,  ,  , 

rclone 挂载优化~

rclone 是一个命令行程序,支持 Windows、Linux、MacOS 等操作系统,可挂载多达 40 多种网盘网络存储,老杨一直在用它来备份 Google Photos 到 OneDrive,隔壁大佬 xiaoz 新写了篇文章介绍 rclone 的一些说明和注意事项(优化)。挺实用,就贴过来了。 安装 rclone rclone官网:https://rcl…
浏览: 58 标签:  ,  ,  , 
浏览: 47 标签:  ,  ,  ,  , 

Comments:29

  1. 沙唐桔-浮游
    浮游

    刚刚调了一下css样式,看你背景颜色不错,直接把背景颜色换成和你一样的,导航栏直接在背景色的基础上调整了一下

    2019.11.18 19:04 # 回复
    1楼
  2. 可以的,最后你会发现,还是原来的颜色更舒服。

    2019.11.19 01:06 # 回复
    2楼
  3. 搞黑白的干什么呀?不好看。

    2019.11.19 07:17 # 回复
    3楼
  4. 是自动黑夜模式?

    2019.11.19 08:05 # 回复
    4楼
  5. 还是原来的好,黑色不习惯呀

    2019.11.21 22:27 # 回复
    5楼
  6. 我也搞了一下,但还不完善,关键手头没mac,尴尬了,只在ios13看了下,哈哈。

    2019.11.22 21:11 # 回复
    6楼
  7. 已经加进去了。

    2019.11.28 21:06 # 回复
    7楼
    • @Sam.Z 貌似字体变色了,背景色没有变,缓存?

      2019.11.28 22:49 # 回复
      • @老杨 没有验证也,我都用的FF自带插件设置Dark模式,晚点我再试试,不行就cancel了。

        2019.11.28 22:52 # 回复
        • @Sam.Z 看了一下你 css,暗黑模式代码放最后,可以加上 !important

          2019.11.28 23:12 # 回复
          • @老杨 要得,电脑刚才关了,明天上班弄,好冷,早点进被窝

            2019.11.28 23:15 # 回复
  8. 沙唐桔-xy
    xy

    @media (prefers-color-scheme: dark) 安卓手机不兼容吧,那安卓需要怎么判断暗黑模式嘛

    2020.04.26 08:53 # 回复
    8楼
    • @xy 不支持的可以上 js 吧,不过我只折腾了 css

      2020.04.26 10:28 # 回复
      • xy

        @老杨 if(window.matchMedia(“(prefers-color-scheme:dark)”).matches) js用了这个,也不兼容。

        2020.04.26 13:45 # 回复

发表留言

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