您不能强制用户使用颜色方案，用户可以覆盖它。你可以在chrome上使用:root{ color-scheme: only light}，但在其他浏览器上可能不起作用。我可以看到你的div（s）是半透明的，通过它们可以看到身体。如果您没有在主体上设置颜色，则会出现此问题。最好给予body一种颜色，以避免基于color-scheme的任何颜色更改。在下面的代码中，我给body指定了颜色，并将配色方案设置为暗，但暗模式仍然不可见，因为body有颜色。这些都不会与某些设备上的实验性强制黑暗模式功能一起工作，这纯粹是针对用户的（就像如果用户在其设备上打开低蓝光模式并将您的网页变成黄色，您将无法做任何事情一样）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="color-scheme" content="dark">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style='color: red;background-color:rgb(255,255,235);'>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe perspiciatis, dicta ducimus quos a et molestiae vero quasi nisi magni unde eius impedit ut possimus dolorum dolor, dolorem, error dolore!</p>
</div>
</body>
</html>
1条答案
按热度按时间jhiyze9q1#
您不能强制用户使用颜色方案，用户可以覆盖它。你可以在chrome上使用
:root{ color-scheme: only light}，但在其他浏览器上可能不起作用。我可以看到你的div（s）是半透明的，通过它们可以看到身体。如果您没有在主体上设置颜色，则会出现此问题。最好给予body一种颜色，以避免基于color-scheme的任何颜色更改。在下面的代码中，我给body指定了颜色，并将配色方案设置为暗，但暗模式仍然不可见，因为body有颜色。这些都不会与某些设备上的实验性强制黑暗模式功能一起工作，这纯粹是针对用户的（就像如果用户在其设备上打开低蓝光模式并将您的网页变成黄色，您将无法做任何事情一样）。您还可以使用媒体查询来设置启用darkmode时的样式：