几行代码让你的网页适配黑暗模式 |
您所在的位置：网站首页 › 支付宝还不适配黑暗模式 › 几行代码让你的网页适配黑暗模式 |
|
随着苹果最近强推黑暗模式，越来越多的应用都要支持黑暗模式才能上架苹果商店，既然APP都适配了黑暗模式，那网站适配黑暗模式也是一件需要提上日程的事情了。 PC端实现黑暗模式有两种方式，一种是纯CSS实现，另一种是通过JavaScript操作实现。 通过媒体查询实现dark模式自动切换纯CSS实现切换需要借助媒体查询来实现，使用这种方式会根据浏览器是否使用黑暗模式来自适应，用户不能手动去控制（除非用户更改浏览器设置）。 代码实现： @media (prefers-color-scheme: dark) { :root { --accent: #3493d1; --main: #f3f3f3; --light: #ececec; --lighter: #666666; --border: #e6e6e6; --bg: #333333; } } :root { --accent: #226997; --main: #333; --light: #666; --lighter: #f3f3f3; --border: #e6e6e6; --bg: #ffffff; } html, body { background-color: var(--bg); } p { color: |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |