网站纯 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/,转载时烦请以链接形式注明原始出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

升级新版 Google AdSense 代码提升广告效果

2021年7月19日,Google AdSense 最近发布了新版 AdSense 代码。通过新版 AdSense 代码,AdSense 可以更早触发优化功能,从而提升网站上广告效果。新广告代码适用于自动广告和广告单元。 如何获取 Google AdSense 新版代码? 无需采取任何措施。在下次登录 AdSense 后,您将拥有对新广告代码的访…

利用 Google Analytics 追踪 WordPress 站内搜索关键词

Google分析(Google Analytics)是一个由 Google 所提供的网站流量统计服务。Google 分析(Analytics)现在是互联网上使用最广泛的网络分析服务。 利用 Google Analytics 追踪 WordPress 站内搜索关键词 优化内容 如果网站/博客在 Google Analytics 流量统计,利用 Google Analytics 追踪 W…

Google Analytics 异步请求(服务端请求)

感谢伟大的祖国,使得好好的 Google,必须折腾一番才能好好的用起来。Google 搜索如此,Google Analytics 肯定也不例外(网上据说 Google Analytics 没有被屏蔽)。 Google Analytics 支持服务端发送统计信息(via:Jerry Qu),而通过服务端统计可以解决 Google Analytics 连接缓慢问题,提高页面…
浏览: 94 标签:  ,  , 

Gravatar 头像被墙及解决方案 Gravatar 头像国内镜像地址大全

Gravatar 头像真是一言难尽,时而正常时而抽风时而无法访问……就一个 Gravatar 头像,这有啥好强(现代通假字)的呢?(据说是被其它服务连累?) 解决办法 - 调用 ssl/cn 头像链接 历史解决办法:调用 ssl 头像链接——https还是没被墙的,而且速度还不错,直接调用这个最简单了。主题 functi…
浏览: 77 标签:  ,  ,  ,  , 
浏览: 51 标签:  ,  ,  ,  , 

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