要通过 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>
<!-- Add more content here -->
<!-- Scripts can be added for additional functionality -->
</body>
</html>
在上面的示例中：
使用 :root 定义了四个 CSS 变量，分别代表了两种模式下的背景颜色和文字颜色。
在 body 元素中使用了这些 CSS 变量作为背景颜色和文字颜色的值。
使用 @media (prefers-color-scheme: dark) 媒体查询，检测用户系统是否偏向于 Dark 模式。如果是，则应用 Dark 模式下的样式。
这样，当用户系统处于 Dark 模式时，页面会自动切换到 Dark 模式下的样式。
如何通过OpenHarmony的音频模块实现录音变速功能？
2024-03-20 10:32:09 12 阅读
