一个深色模式的简单 CSS 技巧
让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。
你可能已经熟悉媒体查询media query了。它们被广泛地用于使网站具有响应性。width和height属性包含视区的尺寸。然后，你可以使用 CSS 在不同的尺寸下呈现不同的布局。
prefers-color-scheme 媒体查询的工作方式与此相同。用户可以将他们的操作系统配置为使用浅色或深色主题。prefers-color-scheme包含这个值。该值是light或dark，尽管 W3C 规范指出它可能支持未来的值，如sepia。我为这两种模式指定不同的 CSS 变量值，让用户的操作系统来决定。
prefers-color-scheme 媒体查询prefers-color-scheme媒体查询的两种变化是:
/* Light mode */@media (prefers-color-scheme: light) { :root { --body-bg: #FFFFFF; --body-color: #000000; }}/* Dark mode */@media (prefers-color-scheme: dark) { :root { --body-bg: #000000; --body-color: #FFFFFF; }}在上面的 CSS 中，--body-bg和--body-color是CSS 变量。正如你所看到的，它们对两种模式都包含不同的值。在浅色主题中，我设置了一个白色背景和黑色文本。在深色主题中，我设置了黑色背景和白色文本。
因为规范说 W3C 可能会引入未来的值，所以把这个 CSS 转换为默认值是有意义的。
/* Light mode */:root { --body-bg: #FFFFFF; --body-color: #000000;}/* Dark mode */@media (prefers-color-scheme: dark) { :root { --body-bg: #000000; --body-color: #FFFFFF; }}在上面的代码中，我默认定义了一个浅色主题，如果媒体查询是 dark，则将其转换为深色主题。这样一来，以后任何添加到媒体查询的值都会默认设置为浅色主题。
使用 CSS 变量现在我为不同的主题设置了不同的值，我需要实际使用它们来设计页面。
body { background: var(--body-bg); color: var(--body-color);}var 语法是 CSS 使用变量的方式。在上面的代码中，我是说把background设置为--body-bg的值，把color设置为--body-color的值。注意，这些变量的值来自媒体查询。这意味着背景和前景的颜色是根据操作系统的设置而改变的！
这就是媒体查询的真正能力。提供一个从操作系统到网页的一致的用户体验。
如果你进入 findmymastodon.com，并切换你的操作系统的主题，你会看到从一个主题到另一个主题的过渡。
CSS 工作组网站也使用同样的媒体查询。改变你的操作系统主题，网站就会切换主题来进行调整。
结论请注意，使用 prefers-color-scheme与使用普通的编程语言没有什么不同。我定义了一些变量，这些变量的值根据一些逻辑而改变。而这些变量然后被用于进一步的操作。
让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。而且，为了用户的利益，它进一步模糊了桌面和网络之间的界限。最新的浏览器版本 支持 prefers-color-scheme，所以你今天就可以开始实验了。
编码愉快。
这篇文章最初发表在 作者的网站上，经许可后重新发表。
via:
作者：Ayush Sharma选题：lujun9972译者：geekpi校对：wxy
本文由 LCTT原创编译，Linux中国荣誉推出
相关推荐
-
如何在触摸屏上显示PLC程序之GRAPH篇
如何在触摸屏上显示PLC程序之GRAPH篇，触摸屏,plc,变量，#PLC##PLC编程##触摸屏#设备在客户现场又不动了，十万火急，必须立即派人到现场解决！你在领导的一声恨铁不成钢的叹气声中奔赴客户现场……。无论谁遇到这种情况心里都会万马奔腾！有没有什么方法能够在不去现场的情况下尽快地解决现场的设备故障呢？最好的方法是远程。但是如...
-
PHP丨PHP基础知识之PHP基础入门——函数
PHP丨PHP基础知识之PHP基础入门——函数「理论篇」，php,静态变量,变量，前两天讲过PHP基础知识的判断条件和流程控制，今天来讲讲PHP基础知识之PHP基础入门--函数！一、函数的声明与使用1、函数名是标识符之一，只能有数字字母下划线，开头不能是数字。函数名的命名，须符合"小驼峰法则"：myNameIsXiaoxi my_name...
-
什么是PLC的FB，FC，DB，OB，这些块是什么意思？怎
什么是PLC的FB，FC，DB，OB，这些块是什么意思？怎么用？，plc,西门子plc,变量，朋友们好，我是电子及工控技术，我来回答这个问题。很多不管是学习西门子PLC的还是学习施耐德或者是三菱的PLC，在PLC的编程软件中我们会常常遇见到“FB”、“FC”、“DB”、“OB”这样的程序块，以至于使初学PLC编程的朋友常常对此很容易产生混...
-
4技能宏怎么做魔兽5？
4技能宏怎么做魔兽5？，编程语言,lua for循环,lua,赋值,变量， 在这篇文章中，我想向大家介绍如何进行Lua程序设计。我假设大家都学过至少一门编程语言，比如Basic或C，特别是C。因为Lua的最大用途是在宿主程序中作为脚本使用的。Lua 的语法比较简单，学习起来也比较省力，但功能却并不弱。在Lua中，一切都是变量，除了关键字...
-
经典的 Shell 十三问
经典的 Shell 十三问，shell,echo,shell数组,stderr,num,shell脚本,变量，↓推荐关注↓1. 为何叫做shell?我们知道计算机的运作不能离开硬件，但使用者却无法直接操作硬件，硬件的驱动只能通过一种称为“ 操作系统 ( OS ， Opertating System )的软件来管控。 linux 严格来说只...
-
太原市未来30天的天气预报未来30天天气预
连续多日的37~40℃高温天气可把咱太原人烤的够呛盼星星，盼月亮就在昨晚，预报的雷阵雨终于来了！不过万万没想到来的不是雨，是海啊！！...▼昨晚太原被暴雨袭击全城进入看海模式....长风东街西向东铁道桥下▼太原亲贤街体育西路口▼山西大医院附近桥底▼亲贤街被淹，上演“车与海”▼欢迎大家来太原漂流....天气预报显示太原市未来30天的天气预报：未来15天太原全都...
-
“挂靠模式”仅剩两个月，大批证书将何去何
“挂靠模式”仅剩两个月，大批证书将何去何从？，建造师挂靠，“四库一平台”“注册证书电子化”“一建新系统上线”“承诺制”......2018年已进入尾声，推进建筑市场信用体系建设的各项举措都已浮出水面，国家打击挂靠的决心和行动已是有目共睹。按照住建部的规划，将在年底实现二建注册系统的全面升级。那么在不到两个月的时间里，通过挂靠谋取利润的企业...
-
海口天气15天精确预报海口天气15天天气预
11月18日一个温暖的上午过去后下午就感受到海口天气15天精确预报了一股徐徐的冷风还伴随着雷阵雨阴晴不定海口天气15天精确预报，大中小雨模式随意切换真是善变呢什么也不说了▼从11月18号晚上开始，北方势力/冷空气/北极涡旋将展开多路进攻，强大的寒潮将再次南下，规模可能会成为下半年以来最大的寒潮，同时会伴有大规模的降雨。明儿就是周末了宝宝们四不四都关心周末有没...
-
互联网公司的九种死法
互联网公司的九种死法，互联网公司，清明节期间，在各大媒体的新闻报道里，很多人开始祭奠起逝去的软件或者网站。实际上，中国的互联网刚刚度过了20年岁月，远远没有到回忆的时节，但怀旧风还是提前到来。现在这一代人，伴随着电脑与互联网成长起来的是70后，如果是70年代初或者60年代尾出生的上过大学的人，大都经历了互联网从幼稚到成熟的全过程。那些当年...
-
漫画《杀戮都市》的结局是什么？
漫画《杀戮都市》的结局是什么？，杀戮都市，在大结局篇章里，黑球不再发布任务了，因为毫无意义，强大的外星种族来到了地球，用他们强大的武力使地球丧失了抵抗的能力。 黑球的科技被破解以后，武器不再有限制，很多的巨型机器人，就是冈八郎用的那种也被弄出来了，不过黑球的战斗员大部分都不想战斗的，都是被强制的上了战场，最后西丈一郎也上了一艘机器人，撞...
-
网站升级改版对网站优化的影响大吗？
网站升级改版对网站优化的影响大吗？，搜索引擎,网站升级,网站收录,域名,seo,沙盒，真实案例为你解惑：新网站改版上线一般多久收录?相信很多站长们想在网站改版上线后就获得排名，但是我们都知道搜索引擎原理工作机制，没有网页收录的话就谈不上排名，所以收录是排名的前提条件。但是，很多站长会发现网站改版上线也都会经过搜索引擎的沙盒期（沙盒效应），...
-
为什么越来越多的网站域名不加「www」前
为什么越来越多的网站域名不加「www」前缀？，搜索引擎,搜索引擎收录,域名,网站收录，关于是否要主域名上加www。我写过一篇文章。在做域名解析时，应该设置一个不带的域名时，可以正常访问你的网站。本质上一个是顶级域名，而或者网站。但是实际使用过程中，我们一般是将一个域名同时做了层面在搜索引擎看来，带会尊重您的选择。技术层面如果域名前加的域名...
-
15天天气预报15天天气预报南昌
所有的天气预报都是差不多的15天天气预报，是有一定的准确性模式天气预报15天天气预报，就是设计好一套庞大的计算天气预报的程序15天天气预报，输入当前已知的天气现象，它就可以计算出未来的大气运动状态和天气状况天气的变化是地球周围大气运动变化的结果物；苹果手机么直接到App Store搜quot天气预报quot，前五个有一个是Minesage的，设置好城市，每天...
-
如何解决网站被降权的问题？
如何解决网站被降权的问题？，搜索引擎,降权,k站，我们在管理网站的时候会遇到K站或降权的情况，网站一旦被K或者降权，那就说明网站被惩罚了。常见的原因有内在的垃圾信息太多，搜索引擎的算法更新而导致被K站，也有其他因素，例如网站漏洞太多，被其他黑客入侵而长时间没有清理，这些因素都会导致网站被惩罚。1、降权降权主要是因为网站使用了不符合搜索引擎...