手机网页自适应深色模式适配
整理自网络ChatGPT产生之内容，文本内容不具备参考意义，程序内容及代码片段有且仅有借鉴意义。
1. 使用媒体查询
在CSS中，可以使用@media查询来检测浏览器的颜色模式，并在需要的情况下应用不同的样式。例如，以下代码段在日间模式下将文本颜色设置为黑色，在深色模式下将文本颜色设置为白色：
@media (prefers-color-scheme: light) {
body {
color: black;
}
}
@media (prefers-color-scheme: dark) {
body {
color: white;
}
}
在此示例中，我们使用prefers-color-scheme媒体查询，它检测浏览器的默认颜色方案，并根据需要应用样式。
2. 使用CSS变量
另一种方法是使用CSS变量来管理颜色，然后在媒体查询中更改变量的值。在元素中定义CSS变量：
:root {
--text-color: black;
}
在CSS样式中，直接使用变量：
p {
color: var(--text-color);
}
然后，可以在媒体查询中更改变量值：
@media (prefers-color-scheme: dark) {
:root {
--text-color: white;
}
}
这意味着在深色模式下，--text-color变量将指向白色而不是黑色。
3. 使用JavaScript
使用JavaScript，可以检测浏览器颜色模式，并动态更改CSS样式。以下是JavaScript的示例代码：
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
在此示例中，我们使用matchMedia来检测浏览器颜色模式，并在需要时添加或删除具有.dark-mode类的元素。然后，可以在CSS样式表中定义此类的样式，以在深色模式下执行所需的更改。
Public @ 2023-06-05 21:00:02 整理自网络ChatGPT产生之内容，文本内容不具备参考意义，程序内容有且仅有借鉴意义。
