作为近两年的「新时尚」，暗色/深色模式已经几乎成为了各家系统、应用以及 Web 站点的标配功能。想要支持暗色模式，本质是判断在暗色模式下，更改生效的颜色值。在 Web 站点中，一种简单的做法是通过 CSS 变量[1] 来实现：
.button {
background-color: var(--color-bg-0);
}
body {
--color-bg-0: #fff;
}
body[theme-mode=dark] {
--color-bg-0: #000;
}CSS 变量就是一些自定义的属性，遵循正常的的样式覆盖原则。如上所示，button的背景颜色由 --color-bg-0 CSS 变量决定，当给 body 设置 <body theme-mode="dark">...</body> 时， --color-bg-0: #000 会覆盖 --color-bg-0: #fff，此时 button 背景色为黑色。
以上即是 Semi Design 实现暗色模式的大致原理。如果你想让自己的站点支持暗色模式，一个关键点是，CSS 样式中所有的颜色值必须使用 Semi Design 颜色变量（比如前面的--color-bg-0)。
现在的问题是，对于已有项目，为了支持暗色模式，必须将项目中所有颜色值手动替换为 Semi 颜色变量，这个过程非常繁琐且工作量巨大。因此本文将介绍 Semi 团队在内部项目中如何通过自动化的方式来解决这个问题。
为了避免理解歧义，这里统一名词概念：
颜色字面量：指样式文件中确定的颜色值，如 white, #FFF, rgb(23,45,0) 等；
颜色变量：指与颜色相关的 CSS 变量，这里特指 Semi 颜色变量，如 --color-primary；
主要关注两点：
关注点一：如何解析识别 css/scss/stylus 等样式文件中的【颜色字面量】，如：background: white 中的 white。
关注点二：计算识别的【颜色字面量】是否可以替换为 Semi 主题包中提供的【颜色变量】如：var(--color-bg-0)。如果【颜色字面量】与【颜色变量】对应的颜色值相同或相近则认为可以替换。
对于第二点，计算是否有对应的颜色变量，可以使用 chorma-js[2]。chorma-js 可以实现任意颜色格式之间的转换以及计算颜色之间的相似度，比如：chroma.distance(color1, color2)。
更重要的是第一点，如何解析识别【颜色字面量】，此时首先想到的是 PostCSS。
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
PostCSS 与 CSS 的关系，就相当于 Babel 与 JavaScript。PostCSS 可以将 CSS 解析为抽象语法树 (AST)，并提供了 API 允许分析和转换 CSS 文件的内容。
如下图所示，左边为一段 CSS 代码，右边为使用 PostCSS 解析后的结果（可访问 AST explorer 站点[4] 体验）：
不仅仅是 CSS，通过引入插件，PostCSS 可以解析任何形式的样式代码，比如 Sass, Less, Stylus以及 JSX 中的样式代码。
CSS 中指定颜色值的方式有三类，分别为：
颜色关键字，如：white, blue 等等;
RGB 16 进制形式，如：#FFF;
函数形式，如：rgb(255, 255, 0) 或者 rgba(255, 0, 255, 0.5)，hsl(0deg, 0%, 13%) 或者 hsla(0deg, 0%, 13%, 1) 或者 hwb(...)``gray(...);
因此借助 PostCSS 解析后的结果，针对以上三种形式的颜色值，识别算法为：
rgb,rgba,hsl,hsla 等则认为是函数形式。由此，基于 PostCSS 我们可以完成样式的解析以及颜色的识别。如果要达到自动完成项目中样式文件的颜色值替换工作，只需要添加收集项目中的样式文件的逻辑，并封装为 CLI 工具方便使用即可。
PostCSS 已经能够满足我们的需求，然而，还有另一种实现方式，Stylelint。
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
Stylelint 与 CSS 的关系，就相当于 ESLint 与 JavaScript 的关系。Stylelint 是针对样式文件的代码审查工具。Stylelint 底层基于 PostCSS，对样式文件进行解析分析，可以对 CSS/Sass/Stylus/Less 等样式文件进行审查。
比如 Stylelint 其中一个规则，color-named，不允许使用颜色关键字，效果如下：
当我们在代码中使用了类似 white 颜色关键字，Stylelint 会给出提示，借助编辑器插件，我们能够在编码过程中获得实时提示，非常方便。
每个规则在 Stylelint 中都是一个插件，插件的输入是样式文件通过 PostCSS 解析后的抽象语法树，插件可以基于 PostCSS API[7] 遍历语法树，分析/修改样式代码。因此类似规则 color-named，我们也可以实现一个 Stylelint 插件，分析并识别样式文件中的【颜色字面量】，并给出提示，针对有对应的 Semi 颜色变量的，支持自动替换（autofix）。具体可以查看官方的插件开发文档[8]。
相比 PostCSS，使用 Stylelint 的好处是：
综上我们最终基于 Stylelint 来实现需求。
配合 Stylelint 可以达到如下效果。
通过 StyleLint CLI 命令行工具一键【查找 & 替换】所有颜色变量;
通过 Stylelint 编辑器插件，写码过程中提示哪些【颜色字面量】没有使用 Semi 【颜色变量】，可设置保存时自动替换;
$ npm i -D stylelint @ies/stylelint-semi
根目录下添加 .stylelintrc.json 文件，配置 @ies/stylelint-semi 插件与 semi/color-no-literal 规则：
{
"plugins": ["@ies/stylelint-semi"],
"rules": {
"semi/color-no-literal": [true, { "severity": "warning", "fixExact": false }]
}
}$ npx stylelint "**/*.scss"
执行后，会检测项目下所有 .scss 文件，以下写法将会得到提示：
.banner {
color: white;
background: #eee;
border: 1px solid rgb(0, 0, 0);
}如果要替换为 Semi 颜色变量，可以使用：
$ npx stylelint "**/*.scss" --fix
替换后的结果为：
.banner {
color: var(--color-white);
background: var(--color-tertiary-light-hover);
border: 1px solid var(--color-black);
}VS Code 中安装 Stylelint 插件[9]。此时鼠标 hover 到颜色值会有以下提示：
支持暗色模式前后的效果：
浅色版
深色版
[1]CSS 变量: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
[2]chorma-js: https://github.com/gka/chroma.js/
[3]PostCSS: https://github.com/postcss/postcss
[4]AST explorer 站点: https://astexplorer.net/#/2uBU1BLuJ1
[5]颜色关键字: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#color_keywords
[6]Stylelint: https://github.com/stylelint/stylelint
[7]PostCSS API: https://api.postcss.org/
[8]官方的插件开发文档: https://stylelint.io/developer-guide/rules#add-autofix
[9]Stylelint 插件: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
[10]Postcss plugin 开发文档: https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
[11]Stylelint rule 开发: https://stylelint.io/developer-guide/rules
[12]AST 调试工具: https://astexplorer.net/#/2uBU1BLuJ1
本文由哈喽比特于3年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/AXwIGi_eNfRJow6wQVNgCA
京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而，京东官方通过微博发言人发布的消息澄清了这些传言，称这些言论纯属虚假信息和蓄意捏造。
日前，据博主“@超能数码君老周”爆料，国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。
据报道，荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦（ASML）CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。
今年早些时候，抖音悄然上线了一款名为“青桃”的 App，Slogan 为“看见你的热爱”，根据应用介绍可知，“青桃”是一个属于年轻人的兴趣知识视频平台，由抖音官方出品的中长视频关联版本，整体风格有些类似B站。
日前，威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”，同时，他发文表示：中国汽车普及率低于非洲国家尼日利亚，每百户家庭仅17户有车。意大利世界排名第一，每十户中九户有车。
近日，一项新的研究发现，维生素 C 和 E 等抗氧化剂会激活一种机制，刺激癌症肿瘤中新血管的生长，帮助它们生长和扩散。
据媒体援引消息人士报道，苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后，3D系统一度大涨超10%，不过截至周三收盘，该股涨幅回落至2%以内。
9月2日，坐拥千万粉丝的网红主播“秀才”账号被封禁，在社交媒体平台上引发热议。平台相关负责人表示，“秀才”账号违反平台相关规定，已封禁。据知情人士透露，秀才近期被举报存在违法行为，这可能是他被封禁的部分原因。据悉，“秀才”年龄39岁，是安徽省亳州市蒙城县人，抖音网红，粉丝数量超1200万。他曾被称为“中老年...
9月3日消息，亚马逊的一些股东，包括持有该公司股票的一家养老基金，日前对亚马逊、其创始人贝索斯和其董事会提起诉讼，指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。
据消息，为推广自家应用，苹果现推出了一个名为“Apps by Apple”的网站，展示了苹果为旗下产品（如 iPhone、iPad、Apple Watch、Mac 和 Apple TV）开发的各种应用程序。
特斯拉本周在美国大幅下调Model S和X售价，引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金（Future Fund）管理合伙人加里·布莱克发帖称，降价是一种“短期麻醉剂”，会让潜在客户等待进一步降价。
据外媒9月2日报道，荷兰半导体设备制造商阿斯麦称，尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效，但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。
近日，根据美国证券交易委员会的文件显示，苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元（约 4.65 亿元人民币）。用于在 2023-2025 年期间，发射卫星，进一步扩展苹果 iPhone 系列的 SOS 卫星服务。
据报道，马斯克旗下社交平台𝕏（推特）日前调整了隐私政策，允许 𝕏 使用用户发布的信息来训练其人工智能（AI）模型。新的隐私政策将于 9 月 29 日生效。新政策规定，𝕏可能会使用所收集到的平台信息和公开可用的信息，来帮助训练 𝕏 的机器学习或人工智能模型。
9月2日，荣耀CEO赵明在采访中谈及华为手机回归时表示，替老同事们高兴，觉得手机行业，由于华为的回归，让竞争充满了更多的可能性和更多的魅力，对行业来说也是件好事。
《自然》30日发表的一篇论文报道了一个名为Swift的人工智能（AI）系统，该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。
近日，非营利组织纽约真菌学会（NYMS）发出警告，表示亚马逊为代表的电商平台上，充斥着各种AI生成的蘑菇觅食科普书籍，其中存在诸多错误。
社交媒体平台𝕏（原推特）新隐私政策提到：“在您同意的情况下，我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”
2023年德国柏林消费电子展上，各大企业都带来了最新的理念和产品，而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。
罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品，具体内容为：“以我对我‘子公司’的了解，我认为 iPhone 15 跟 iPhone 14 不会有什么区别的，除了序（列）号变了，这个‘不要脸’的东西，这个‘臭厨子’。
