英文:
How to handle dark mode in web browsers
问题
I submitted my website to a site called usertesting.com where a real person reviews a website and you get sent a video of the person looking through your site. When I got the video back I was surprised to see that my site was being reviewed in dark mode. I hadn't even realized that my site could be forced into dark mode. It didn't actually fare too badly in dark mode but it was not ideal. The browser they used appeared to be Chrome so I figured out how to enable dark mode for web contents (chrome://flags/#enable-force-dark).
My logo had a white background so it looked like a box - so I fixed that issue by giving it a transparent background. I found there is a media query for applying styles to dark mode - @media (prefers-color-scheme: dark). I actually made a white version of my logo at first and applied it using the dark mode media query but I was surprised to find that it had been converted to black by the browser and therefore was not visible on the dark background. So I found that I just needed one dark version of the logo with a transparent background and dark mode automatically converted it to white. So my first question is:
- What are the rules for how images are modified in dark mode?
I had a play with CSS in the dev console and tried setting background colors. When I set it to #ffffff the result was the background appeared as #121212 in the browser. If I set it to #000000 it showed as #000000. If I set it to #cccccc it showed as #cccccc, but if I set it to #dddddd the actual color shown was #343434! So my second question is:
- What are the rules for how CSS colors are modified in dark mode?
The browser I've been checking this with is Chrome on Windows, and I assume this particular implementation of dark mode is specific to Chrome. My next question is:
- What other common implementations of dark mode should one expect to encounter across different browsers and devices?
It's really confusing when there is a CSS media query to target dark mode but the browser still goes ahead and changes the specified colors. The concerning thing is that some implementations may have different rules for how they convert colors. Any enlightenment on these issues would be greatly appreciated.
英文:
I submitted my website to a site called usertesting.com where a real person reviews a website and you get sent a video of the person looking through your site. When I got the video back I was surprised to see that my site was being reviewed in dark mode. I hadn't even realised that my site could be forced into dark mode. It didn't actually fair too badly in dark mode but it was not ideal. The browser they used appeared to be Chrome so I figured out how to enable dark mode for web contents (chrome://flags/#enable-force-dark).
My logo had a white background so it looked like a box - so I fixed that issue by giving it a transparent background. I found there is a media query for applying styles to dark mode - @media (prefers-color-scheme: dark). I actually made a white version of my logo at first and applied it using the dark mode media query but I was surprised to find that it had been converted to black by the browser and therefore was not visible on the dark background. So I found that I just needed one dark version of the logo with transparent background and dark mode automatically converted it to white. So my first question is:
- What are the rules for how images are modified in dark mode?
I had a play with css in the dev console and tried setting background colors. When I set it to #ffffff the result was the background appeared as #121212 in the browser. If I set it to #000000 it showed as #000000. If I set it to #cccccc it showed as #cccccc, but if I set it to #dddddd the actual color shown was #343434! So my second questions is:
- What are the rules for how css colors are modified in dark mode?
The browser I've been checking this with is Chrome on Windows and I assume this particular implementation of dark mode is specific to Chrome. My next question is:
- What other common implementations of dark mode should one expect to encounter across different browsers and devices?
It's really confusing when there is a css media query to target dark mode but browser still goes ahead and changes the specified colors. The concerning thing is that some implementations may have different rules for how they convert colors. Any enlightenment on these issues would be greatly appreciated.
答案1
得分: 1
你可以使用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>
英文:
you can use css variables to define all of your color schemes
<!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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论