您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

第 205 题:如何使用 CSS 为网页添加暗黑模式支持?

时间:12-14来源:作者:点击数:

我是看了面试题才知道还有这种骚操作,以前是每个插件每个标签都加颜色

// 现在仅需增加以下一行魔法 CSS:
html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

对于暗黑模式,将使用两个 filter :invert 和 hue-rotate

  • invert:反转配色。黑色变为白色,白色变为黑色,所有颜色都是如此
  • hue-rotate:帮助我们处理所有其他非黑色和白色的颜色。 将色相旋转 180 度,我们确保应用程序的颜色主题不会改变,而只是减弱其颜色。
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐