如何使用偏色方案媒体查询创建暗模式？

在本文中，我们将使用偏色方案媒体查询创建暗模式界面。

首选颜色方案是一种新的媒体查询，用于检测系统的当前主题并提供帮助根据系统偏好创建网页主题的功能。如果您的手机(或任何设备)当前处于暗模式，则此媒体查询将检测到它，您可以使用您选择的自定义 CSS。

句法：

@media (prefer-color-scheme : your_color_scheme)
{
     ...
}

在your_color_scheme的地方，您可以使用深色或浅色 选项。深色表示用户已通知系统他们更喜欢具有深色主题的界面，而浅色表明用户已通知系统他们更喜欢具有浅色主题的界面，或者尚未表达主动偏好。

@media (prefer-color-scheme : dark) { ... } 

@media (prefer-color-scheme : light) { ... } 

示例：我们使用 HTML 和 CSS 创建了一个虚拟网页，我们希望在黑暗模式下创建它。

HTML

  
    
    
  
  
    
      

        
Geeksforgeeks
        
A computer science portal for geeks
        


        
Creating dark mode using prefers-color-scheme
        

        
      
    
  

输出：

创建暗模式 UI：现在创建一个首选颜色方案媒体查询并将其设置为dark 。如果系统使用暗模式，我们会将所有黑色文本创建为白色，将所有白色背景创建为黑色。

HTML

  
    
    
  
  
    
      

        
Geeksforgeeks
        
A computer science portal for geeks
        


        
Creating dark mode using prefers-color-scheme
        

        
      
    
  

输出：

使用 JavaScript 检测系统的当前模式：有时我们需要检测主题的当前模式。例如，如果我们要为亮模式和暗模式使用两个单独的图像，那么您需要检测当前的主题模式。为了检测模式，我们使用 matchMedia() 方法。此方法接受一个字符串(您要搜索的媒体查询)并返回该媒体查询的结果。

示例：在以下代码片段中，我们正在搜索偏好颜色方案媒体查询的结果。

Javascript

  const a = window.matchMedia("(prefers-color-scheme: dark)");
  console.log(a.matches);

输出：

• 如果系统主题为深色，则返回：

true

• 如果系统主题为 light，则返回：

false