CSS变量实现暗黑模式,我的小铺页面已经支持
3 月,跳不动了?>>> 最近微信被苹果逼的开发了 暗黑模式 ,越来越多的网站和应用开始支持了暗黑模式,许多人也喜欢为网站选择暗模式,也许他们更喜欢这样的外观,或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何实现一个自动的 CSS 暗模式,根据你的访客的主题来改变。 我在自己的博客页面 我的小铺 页面实践了一下用 CSS变量 和 @media查询 实现暗黑模式。 CSS Dark Mode 我定义了变量以设置主题的颜色,我建议你也这样做,因为这样会使这个过程容易得多。我的默认模式的颜色变量如下: :root { --accent : #226997 ; --main : #333 ; --light : #666 ; --lighter : #f3f3f3 ; --border : #e6e6e6 ; --bg : #ffffff ; } 复制代码 如果你想在你的样式表中使用这些变量,你可以这样做: p { color : var (--main); } 复制代码 这样,如果您想更改主题的颜色,则只需修改定义的变量,所有使用该变量的内容都会更新。 现在我们需要定义一组新的变量,这些变量将在调用 CSS 暗模式时使用。 /* 定义 dark 模式的颜色 */ :root { --accent : #3493d1 ; --main : #f3f3f3 ; --light :