document/TranslateProject
2
0
Fork 0
mirror of https://github.com/LCTT/TranslateProject.git synced 2025-01-25 23:11:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #23735 from wxy/20211029-A-simple-CSS-trick-for-dark-mode

Browse Source 
PRF&PUB:published/20211029 A simple CSS trick for dark mode.md
This commit is contained in:
Xingyu.Wang 2021-11-04 10:20:19 +08:00 committed by GitHub
commit aaff325d10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
translated/tech/20211029 A simple CSS trick for dark mode.md → published/20211029 A simple CSS trick for dark mode.md
View File

@ -3,24 +3,25 @@
[#]: author: "Ayush Sharma https://opensource.com/users/ayushsharma"
[#]: collector: "lujun9972"
[#]: translator: "geekpi"
[#]: reviewer: " "
[#]: publisher: " "
[#]: url: " "
[#]: reviewer: "wxy"
[#]: publisher: "wxy"
[#]: url: "https://linux.cn/article-13950-1.html"
一个深色模式的简单 CSS 技巧
======
让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。
![Text editor on a browser, in blue][1]
你可能已经熟悉媒体查询了。它们被广泛地用于使网站具有响应性。`width` 和 `height` 属性包含视区的尺寸。然后，你可以使用 CSS 在不同的尺寸下呈现不同的布局。
> 让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。
[prefers-color-scheme 媒体查询][2]的工作方式与此相同。用户可以将他们的操作系统配置为使用浅色或深色主题。`prefers-color-scheme` 包含这个值。该值是 `light` 或 `dark` ，尽管 W3C 规范指出它可能支持未来的值，如 `sepia`。我为这两种模式指定不同的 CSS 变量值，让用户的操作系统来决定。
![](https://img.linux.net.cn/data/attachment/album/202111/04/101203a19wb2ptlcmwmmnl.jpg)
你可能已经熟悉<ruby>媒体查询<rt>media query</rt></ruby>了。它们被广泛地用于使网站具有响应性。`width` 和 `height` 属性包含视区的尺寸。然后，你可以使用 CSS 在不同的尺寸下呈现不同的布局。
[prefers-color-scheme 媒体查询][2] 的工作方式与此相同。用户可以将他们的操作系统配置为使用浅色或深色主题。`prefers-color-scheme` 包含这个值。该值是 `light` 或 `dark` ，尽管 W3C 规范指出它可能支持未来的值，如 `sepia`。我为这两种模式指定不同的 CSS 变量值，让用户的操作系统来决定。
### prefers-color-scheme 媒体查询
`prefers-color-scheme` 媒体查询的两种变化是:
```
/* Light mode */
@media (prefers-color-scheme: light) {
@ -39,10 +40,9 @@
}
```
在上面的CSS中，`--body-bg` 和 `--body-color` 是 [CSS 变量][3]。正如你所看到的，它们对两种模式都包含不同的值。在浅色主题中，我设置了一个白色背景和黑色文本。在深色主题中，我设置了黑色背景和白色文本。
因为[规范][2]说 W3C 可能会引入未来的值，所以把这个 CSS 转换为布尔值是有意义的。
在上面的 CSS 中，`--body-bg` 和 `--body-color` 是 [CSS 变量][3]。正如你所看到的，它们对两种模式都包含不同的值。在浅色主题中，我设置了一个白色背景和黑色文本。在深色主题中，我设置了黑色背景和白色文本。
因为[规范][2]说 W3C 可能会引入未来的值，所以把这个 CSS 转换为默认值是有意义的。
```
/* Light mode */
@ -66,7 +66,6 @@
现在我为不同的主题设置了不同的值，我需要实际使用它们来设计页面。
```
body {
background: var(--body-bg);
@ -80,19 +79,17 @@ body {
如果你进入 [findmymastodon.com][4]，并切换你的操作系统的主题，你会看到从一个主题到另一个主题的过渡。
[CSS 工作组][2]网站也使用同样的媒体查询。改变你的操作系统主题，网站就会切换主题来进行调整。
[CSS 工作组][2] 网站也使用同样的媒体查询。改变你的操作系统主题，网站就会切换主题来进行调整。
### 结论
请注意，使用 `prefers-color-scheme` 与使用普通的编程语言没有什么不同。我定义了一些变量，这些变量的值根据一些逻辑而改变。而这些变量然后被用于进一步的操作。
让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。而且，为了用户的利益，它进一步模糊了桌面和网络之间的界限。最新的浏览器版本[支持 prefers-color-scheme][5]，所以你今天就可以开始实验了。
让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。而且，为了用户的利益，它进一步模糊了桌面和网络之间的界限。最新的浏览器版本 [支持 prefers-color-scheme][5]，所以你今天就可以开始实验了。
编码愉快。
* * *
_这篇文章最初出现在[作者的网站][6]上，经许可后重新发表。_
这篇文章最初发表在 [作者的网站][6] 上，经许可后重新发表。
--------------------------------------------------------------------------------
@ -101,7 +98,7 @@ via: https://opensource.com/article/21/10/dark-themes-websites
作者：[Ayush Sharma][a]
选题：[lujun9972][b]
译者：[geekpi](https://github.com/geekpi)
校对：[校对者ID](https://github.com/校对者ID)
校对：[wxy](https://github.com/wxy)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出