css 如何在web浏览器中处理暗模式

jxct1oxe 于 2023-04-08 发布在其他

关注(0)|答案(1)|浏览(163)

我把我的网站提交给了一个叫www.example.com的网站usertesting.com，在这个网站上有一真实的人在评论一个网站，你会收到一段视频，视频中的人正在浏览你的网站。当我收到视频时，我惊讶地发现我的网站正在黑暗模式下被评论。我甚至没有意识到我的网站可以被强制进入黑暗模式。在黑暗模式下，它实际上并不太公平，但它并不理想。他们使用的浏览器似乎是Chrome，所以我想出了如何为网页内容启用黑暗模式（chrome：//flags/#enable-force-dark）。
我的logo有一个白色的背景，所以它看起来像一个盒子-所以我通过给它一个透明的背景来解决这个问题。我实际上做了一个白色版本的我的标志在第一次和应用它使用黑暗模式媒体查询但我惊讶地发现，它已被转换为黑色的浏览器，因此不是可见的黑暗背景.所以我发现，我只需要一个黑暗版本的标志与透明的背景和黑暗模式自动转换为白色.所以我的第一个问题是：
1.在暗模式下如何修改图像的规则是什么？
我在开发控制台玩了一下css，并尝试设置背景颜色。当我将其设置为#ffffff时，结果是浏览器中的背景显示为#121212。如果我将其设置为#000000，则显示为#000000。如果我将其设置为#cccccc，则显示为#cccccc，但是如果我将它设置为#dddddd，实际显示的颜色是#343434！所以我的第二个问题是：
1.在暗模式下css颜色的修改规则是什么？
我一直在检查的浏览器是Windows上的Chrome，我假设这种黑暗模式的特定实现是特定于Chrome的。我的下一个问题是：
1.在不同的浏览器和设备上，还有哪些常见的暗模式实现？
当有一个css媒体查询目标是暗模式，但浏览器仍然继续并更改指定的颜色时，这真的很令人困惑。令人担忧的是，一些实现可能有不同的规则来转换颜色。任何关于这些问题的启示都将非常感激。

css

来源：https://stackoverflow.com/questions/75924630/how-to-handle-dark-mode-in-web-browsers

1条答案

按热度按时间

twh00eeo1#

你可以使用css变量来定义你所有的配色方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kitty</title>
  <style>
body {
  --txtColor : darkblue;
  --Bg_color : whitesmoke;
  --BordersX : orange;

  color            : var(--txtColor);
  background-color : var(--Bg_color);
  }
@media (prefers-color-scheme: dark) {
  body {
    --txtColor : lightgreen;
    --Bg_color : #1d1e22;
    --BordersX : crimson;
    }
  }
h3 {
  border: 2px solid var(--BordersX);
  }
  </style>
</head>
<body>
  <h3>Hello kitty !</h3>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo hic omnis magni sapiente necessitatibus.
  Laborum quaerat, dignissimos doloribus magnam dolore in pariatur eaque eligendi quas, cupiditate ratione 
  ipsum corrupti illum?
  </p>
<script>
  let darkMode = !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
  console.log('dark mode ? :', darkMode);
</script>
</body>
</html>

赞(0）回复(0）举报 2023-04-08

我来回答

css 如何在web浏览器中处理暗模式

1条答案

相关问题

热门标签

最新问答