CSS 媒体特性 - prefers-color-scheme



CSS prefers-color-scheme 媒体特性用于确定用户是否偏好浅色或深色主题。用户可以在其设备设置或浏览器设置中选择其首选颜色模式,例如浅色或深色模式。

嵌入元素

  • 您可以使用prefers-color-scheme CSS 特性根据嵌入它们的网页的颜色方案更改 SVG 和 iframe 的外观。SVG 必须用作图像(<img src="circle.svg" alt="circle" />),而不是直接放入 HTML 中。

  • 跨域 SVG 和 iframe 也可以使用prefers-color-scheme。跨域元素是从您当前所在的网站以外的网站加载的元素。

可能的值

  • light − 此值表示浅色主题。

  • dark − 此值表示深色主题。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

语法

prefers-color-scheme: light|dark;

CSS prefers-color-scheme - light 值

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

Open Compiler
<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 值

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

Open Compiler
<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 类:

Open Compiler
<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 - 颜色方案继承

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

在此示例中,JavaScript 用于创建三个 SVG 图片:一个具有粉红色背景颜色,一个具有紫色背景颜色,另一个具有由用户的首选颜色主题确定的背景颜色。

这是一个例子:

Open Compiler
<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>
广告