css如何通过媒体查询功能实现自动切换dark 模式

本文主要是介绍css如何通过媒体查询功能实现自动切换dark 模式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

要通过 CSS 媒体查询实现自动切换到 Dark 模式，你可以根据用户系统的主题设置或者根据特定条件来切换样式。以下是一个简单的示例，演示了如何使用媒体查询和 CSS 变量来实现自动切换：

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Demo</title>
<style>
  :root {
    --bg-color-light: #ffffff; /* Light mode background color */
    --text-color-light: #000000; /* Light mode text color */
    --bg-color-dark: #333333; /* Dark mode background color */
    --text-color-dark: #ffffff; /* Dark mode text color */
  }

  body {
    background-color: var(--bg-color-light); /* Default to light mode background */
    color: var(--text-color-light); /* Default to light mode text color */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
  }

  /* Media query for dark mode */
  @media (prefers-color-scheme: dark) {
    body {
      background-color: var(--bg-color-dark); /* Dark mode background */
      color: var(--text-color-dark); /* Dark mode text color */
    }
  }
</style>
</head>
<body>
  <h1>Dark Mode Demo</h1>
  <p>This is a paragraph.</p>
  

  
</body>
</html>
在上面的示例中：

使用 :root 定义了四个 CSS 变量，分别代表了两种模式下的背景颜色和文字颜色。
在 body 元素中使用了这些 CSS 变量作为背景颜色和文字颜色的值。
使用 @media (prefers-color-scheme: dark) 媒体查询，检测用户系统是否偏向于 Dark 模式。如果是，则应用 Dark 模式下的样式。
这样，当用户系统处于 Dark 模式时，页面会自动切换到 Dark 模式下的样式。