您的位置首页博客中心存储

CSS Color-Scheme 和深色模式

admin 2022-07-07 07:20:55 阅读(4538) 评论(0)

color-scheme[1]顾名思义，即为“配色方案”，在系统中指的是“白天模式”和“夜间模式”。使用这个属性可以轻松的更改浏览器的默认配色方案，

介绍一个和深色模式相关的CSS属性：color-scheme。

一、什么是 color-scheme？

color-scheme[1]顾名思义，即为“配色方案”，在系统中指的是“白天模式”和“夜间模式”。使用这个属性可以轻松的更改浏览器的默认配色方案，语法如下:

					 
color-scheme: normal; color-scheme: light; color-scheme: dark; color-scheme: light dark;
					
							1.
						
							2.
						
							3.
						
							4.

几个关键词如下:

normal：表示元素未指定任何配色方案，因此应使用浏览器的默认配色方案呈现。

light：表示可以使用操作系统亮色配色方案渲染元素。

dark：表示可以使用操作系统深色配色方案渲染元素。

下面来看一个简单的例子：

					 
<h2>前端侦探</h2>
<button>关注我</button>
					
							1.
						
							2.

在无任何CSS的情况下，效果如下：

免责声明：
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：400-889-6653；邮箱：Service@webmeng.net。本站原创内容未经允许不得转载，或转载时需注明出处：Webmeng.net 免费建站