CSS 媒体功能 - prefers-color-scheme

CSS 媒体功能 prefers-color-scheme 用于确定用户是更喜欢浅色主题还是深色主题。用户可以在设备设置或浏览器设置中选择自己喜欢的颜色模式，例如浅色或深色模式。

嵌入元素

您可以使用CSS 媒体功能 prefers-color-scheme 根据 SVG 和 iframe 嵌入的网页的颜色方案来更改它们的外观。SVG 必须用作图像（<img src=“circle.svg” alt=“circle” />），而不是直接放在 HTML 中。
跨域 SVG 和 iframe 也可以使用 prefers-color-scheme。跨域元素是从与您当前所在的网站不同的网站加载的元素。

可能的值

light − 此值表示浅色主题。
dark − 此值表示深色主题。

语法


prefers-color-scheme: light|dark;

CSS prefers-color-scheme - light 值

以下示例演示了该元素将显示为带有蓝色文本的紫色背景，即使用户在其操作系统设置中请求了浅色主题 -


<html>
<head>
<style>
	 	.light-theme {
	 	 	 background-color: red;
	 	 	 color: white;
	 	}
	 	@media (prefers-color-scheme: light) {
	 	 	 .light-theme {
	 	 	 	 	background-color: violet;
	 	 	 	 	color: blue;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<div class="light-theme">
	 	 	 This is a light theme.
	 	</div>
</body>
</html>

CSS prefers-color-scheme - dark 值

以下示例演示了默认情况下，该元素具有红色背景色和黑色文本颜色。该元素将显示为带有蓝色文本的紫色背景，即使用户在其操作系统设置中请求了深色主题 -


<html>
<head>
<style>
	 	.dark-theme {
	 	 	 background-color: red;
	 	 	 color: white;
	 	}
	 	@media (prefers-color-scheme: dark) {
	 	 	 .dark-theme {
	 	 	 	 	background-color: violet;
	 	 	 	 	color: blue;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<div class="dark-theme">
	 	 	 This is a dark theme.
	 	</div>
</body>
</html>

CSS prefers-color-scheme - 检测深色或浅色主题

以下示例演示了媒体查询 @media （prefers-color-scheme： dark） 和 @media （prefers-color-scheme： light） 将根据用户首选的颜色主题对 .theme 类应用不同的样式 -


<html>
<head>
<style>
	 	.theme {
	 	 	 background: green;
	 	 	 color: white;
	 	}
	 	@media (prefers-color-scheme: dark) {
	 	 	 .theme.dark-theme {
	 	 	 background: red;
	 	 	 color: white;
	 	 	 }
	 	}
	 	@media (prefers-color-scheme: light) {
	 	 	 .theme.light-theme {
	 	 	 background: yellow;
	 	 	 color: blue;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<p class="theme">Default Theme. The element will be displayed as a green background with white text.</p>
	 	<p class="theme dark-theme">If the user has requested a dark color theme in their operating system the element will be displayed as a red background with white text.</p>
	 	<p class="theme light-theme">If the user has requested a light color theme in their operating system the element will be displayed as a yellow background with blue text.</p>
</body>
</html>

CSS prefers-color-scheme - 颜色方案继承

以下示例演示如何使用 CSS 媒体功能 prefers-color-scheme 根据用户的首选颜色主题显示不同的 SVG 图像。

在此示例中，JavaScript 用于创建三个 SVG 图像：一个是粉红色背景色，一个是紫色背景色，另一个是由用户首选的颜色主题确定的背景颜色。

这是一个例子 -


<html>
<head>
</head>
<body>
	 	<div>
	 	 	 <img />
	 	</div>
	 	
	 	<div style="color-scheme: light">
	 	 	 <img />
	 	</div>
	 	<div style="color-scheme: dark">
	 	 	 <img />
	 	</div>
	 	
	 	<script>
	 	 	 document.querySelectorAll("img").forEach(function(img) {
	 	 	 img.alt = "square";
	 	 	 img.src =
	 	 	 	 	"data:image/svg+xml;base64," +
	 	 	 	 	btoa(`
	 	 	 	 	<svg width="100" height="100" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
	 	 	 	 	 	 <style>
	 	 	 	 	 	 :root { color: pink }
	 	 	 	 	 	 @media (prefers-color-scheme: light) {
	 	 	 	 	 	 	 	:root { color: violet }
	 	 	 	 	 	 }
	 	 	 	 	 	 </style>
	 	 	 	 	 	 <rect fill="currentColor" x="2" y="2" width="16" height="16"/>
	 	 	 	 	</svg>
	 	 	 `);
	 	 	 });
	 	</script>
</body>
</html>

打印本页