这不是那篇博客文章。 我说的是假设你。
这并不是对其他关于深色模式的博客文章的贬低。 那里有很多优秀的文章,我非常喜欢任何分享信息的博客文章。 这更像是一个思想实验,关于我认为写一篇关于这个主题的真正出色的博客文章需要什么。
- 您会解释深色模式是什么。 不过您不会过多地停留在这个话题上,因为很有可能阅读这样一篇博客文章的人已经基本了解它是什么。
- 您一定会提供一个不错的演示。 可能是多个演示。 一个非常基础的,以便最主要的代码行能够轻松地被看到。 也许是类似于交换
background-color
和color
的东西。 其他演示将处理更复杂和真实的场景。 你应该如何处理图片和背景图片? SVG 描边和填充? 按钮? 边框? 阴影? 这些是网站上比较少见的东西,因此任何想要设计深色模式 UI 的人都将遇到它们。 - 您将处理深色模式本身可以在操作系统级别进行选择的事实。 幸运的是,我们可以在 CSS 中检测到这一点,因此您需要说明如何做到这一点。
- JavaScript 也可能需要了解操作系统的选择。 也许是因为某些样式是在 JavaScript 级别实现的,但也是因为下一件事。
- 深色模式可以(应该?)成为网站上的一个选择。 这适用于用户在特定网站上更偏好与操作系统偏好相反的选择的情况。
- 构建主题切换并不容易。 如果您的网站有身份验证,那么这个选择可能应该在帐户级别进行保存。 如果没有,则应该以其他方式保存选择。 一种可能性是
localStorage
,但这可能会出现问题,比如 CSS 通常在 JavaScript 执行之前应用于页面,这意味着您将面临“错误主题闪烁”的情况。 您可能需要处理 cookie,以便您可以在每次页面加载时发送特定于主题的 CSS。 - 您的博客文章将包含已经这样做的真实例子。 通过这种方式,您可以调查他们是如何做到的,并评估他们的成功程度。 也许您可以联系他们征求意见。 如果存在一些糟糕的例子,您也应该涵盖这些例子,有时通过学习应该避免什么来学习是最好的。
- 您会意识到其他关于这个主题的写作。 这不应该阻止您自己写关于这个主题的文章,但是一篇听起来像是第一个也是唯一一个写关于这个主题的人的文章,而实际上并不是,这会给人一种奇怪的语气,让人感觉不好。 您不仅可以从他人的写作中学习,还可以从中汲取并可能更进一步。
- 由于您将涵盖浏览器技术,因此您将涵盖该技术在浏览器领域的支持情况。 是否存在支持方面的显著例外情况? 支持即将到来吗? 您是否研究过浏览器本身对该技术的说明?
- 存在大量的可访问性问题。 深色模式本身可以被认为是一个可访问性功能,这里也存在一些相关的可访问性问题,比如切换功能如何工作,模式更改如何宣布,以及一整套需要计算和处理的颜色对比度。 博客文章是一个很好的机会来讨论所有这些。 您是否研究过? 您是否与任何在这些功能方面有特殊需求的人交谈过? 任何专家? 您是否阅读过可访问性人员对深色模式的看法?
这都是关于深色模式的,但我敢打赌,您可以想象考虑所有这些要点如何能使任何涵盖技术概念的博客文章受益。
我还要补充一下…
深色模式的益处是什么,
它与高对比度模式有什么联系,
它不仅仅是苹果推动的时尚潮流,
如果用户将深色模式设置为默认模式,操作系统会自动执行什么操作,
以及什么时候值得付出努力。
也许可以加上一些关于白色文本在黑色背景上的可读性的数据。
但我还没有找到这些问题的足够答案,所以到目前为止我还没有写过博客文章。
我一定会读一篇这样的博客文章;)
我并不是说不存在,但宣布主题更改的用例是什么? 这不是纯粹的视觉效果吗? 我理解它如何适用于大多数与可访问性相关的方面,比如使用键盘或其他导航设备的视力正常的用户,因此需要切换功能可聚焦等等。
但是声音反馈? 我想你可以说,“好吧,一些视力正常的用户仍然喜欢使用屏幕阅读器”。 虽然这绝对是事实,但主题更改并不是真正的内容问题,而是视觉问题。
我知道这不是一篇关于深色模式的博客文章,所以这里可能不是讨论的合适地方,但我认为它仍然很有趣。 我遇到了其他情况,在那里我想知道是否应该将某些东西完全设置为不可访问(至少在声音反馈方面),正是因为它是纯粹的视觉效果,但这感觉不对。 只是不知道为什么。 所以也许这是一个单独的主题。
只是想说,对于 JAMstack 网站,实现可切换深色模式的最佳方式是在 ServiceWorker 中预渲染 HTML,并使用 IndexedDB 而不是 LocalStorage 来保存用户的状态。
客户端可切换深色模式要么存在未设置内容闪烁,要么会阻塞页面渲染,直到 LocalStorage 和 JavaScript 可用——这两种情况对于用户体验来说都是糟糕的。 使用 ServiceWorker 和 IndexedDB 将模仿使用 cookie 的服务器端渲染的行为。
这非常棘手和hacky,因为大多数在 JavaScript 上替换字符串都是同步完成的,而 ServiceWorker 通常只能运行异步函数——我正在使用的一个技巧是在 ServiceWorker 中的 fetch 事件返回响应时(当然是在检查标头中的
Content-Type
之后),在new Response()
中将字符串.replace()
串联起来。您可以看看我目前正在开发的网站是如何工作的。 深色模式切换(以及颜色主题)的选项位于右上角。
https://prognovel-staging.netlify.com