• 首页
  • 博客
  • 项目
  • 留言墙
  • 工具集

动态更新

喜欢我的内容的话不妨订阅支持一下 🫶
加入其他 2 位订阅者,每月一封,随时可以取消订阅。

© 2025 Koya. 网站已开源:GitHub   Fork CaliCastle

首页博客项目留言墙工具集
总浏览量 4.4万
最近访客来自 US🇺🇸
  • 说明#
  • 实现方式:#
使用css给你的网站启用“暗黑模式”
2019-07-03 19:45:00前端, CSS

使用css给你的网站启用“暗黑模式”

如果你在使用 macOS 10.14.4 或者之后的系统,并且在系统内开启了深色模式,打开这篇文章时,你就发现我的博客变成了暗黑版本,之前只有Safari浏览器支持,这次发现Chrome也支持了“暗黑”模式

359次点击1分钟阅读

说明#

如果你在使用 macOS 10.14.4 或者之后的系统,并且在系统内开启了深色模式,打开这篇文章时,你就发现我的博客变成了暗黑版本,之前只有Safari浏览器支持,这次发现Chrome也支持了“暗黑”模式,所以赶紧针对现在的网站做了下优化

实现方式:#

MacOS 在新版本中加入了一个新的媒体查询 prefers-color-scheme,支持情况请看:https://caniuse.com/#search=prefers-color-scheme

相关属性:

light:浅色模式
dark:深色模式
no-preference:无颜色偏好

将上边代码加入你的css中,并实现相应样式,就可以启用“暗黑”模式了


相关文章

Web设计中的单位转换 —— rem、px与rm的对比与应用

2025-01-07 13:26:48前端1945分钟阅读

使用sitemap和stream模块在Next.js项目中生成sitemap

2023-03-15 20:27:00前端1,3382分钟阅读

为什么在 JavaScript 中 0.1 + 0.2 的结果不等于 0.3?

2023-03-03 19:13:00前端1,1124分钟阅读