假设你要写一篇关于深色模式的博客文章

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

不是那篇博客文章。 我说的是假设你

这并不是对其他关于深色模式的博客文章的贬低。 那里有很多优秀的文章,我非常喜欢任何分享信息的博客文章。 这更像是一个思想实验,关于我认为写一篇关于这个主题的真正出色的博客文章需要什么。

  • 您会解释深色模式是什么。 不过您不会过多地停留在这个话题上,因为很有可能阅读这样一篇博客文章的人已经基本了解它是什么。
  • 您一定会提供一个不错的演示。 可能是多个演示。 一个非常基础的,以便最主要的代码行能够轻松地被看到。 也许是类似于交换background-colorcolor 的东西。 其他演示将处理更复杂和真实的场景。 你应该如何处理图片和背景图片? SVG 描边和填充? 按钮? 边框? 阴影? 这些是网站上比较少见的东西,因此任何想要设计深色模式 UI 的人都将遇到它们。
  • 您将处理深色模式本身可以在操作系统级别进行选择的事实。 幸运的是,我们可以在 CSS 中检测到这一点,因此您需要说明如何做到这一点。
  • JavaScript 也可能需要了解操作系统的选择。 也许是因为某些样式是在 JavaScript 级别实现的,但也是因为下一件事。
  • 深色模式可以(应该?)成为网站上的一个选择。 这适用于用户在特定网站上更偏好与操作系统偏好相反的选择的情况。
  • 构建主题切换并不容易。 如果您的网站有身份验证,那么这个选择可能应该在帐户级别进行保存。 如果没有,则应该以其他方式保存选择。 一种可能性是 localStorage,但这可能会出现问题,比如 CSS 通常在 JavaScript 执行之前应用于页面,这意味着您将面临“错误主题闪烁”的情况。 您可能需要处理 cookie,以便您可以在每次页面加载时发送特定于主题的 CSS。
  • 您的博客文章将包含已经这样做的真实例子。 通过这种方式,您可以调查他们是如何做到的,并评估他们的成功程度。 也许您可以联系他们征求意见。 如果存在一些糟糕的例子,您也应该涵盖这些例子,有时通过学习应该避免什么来学习是最好的。
  • 您会意识到其他关于这个主题的写作。 这不应该阻止您自己写关于这个主题的文章,但是一篇听起来像是第一个也是唯一一个写关于这个主题的人的文章,而实际上并不是,这会给人一种奇怪的语气,让人感觉不好。 您不仅可以从他人的写作中学习,还可以从中汲取并可能更进一步。
  • 由于您将涵盖浏览器技术,因此您将涵盖该技术在浏览器领域的支持情况。 是否存在支持方面的显著例外情况? 支持即将到来吗? 您是否研究过浏览器本身对该技术的说明?
  • 存在大量的可访问性问题。 深色模式本身可以被认为是一个可访问性功能,这里也存在一些相关的可访问性问题,比如切换功能如何工作,模式更改如何宣布,以及一整套需要计算和处理的颜色对比度。 博客文章是一个很好的机会来讨论所有这些。 您是否研究过? 您是否与任何在这些功能方面有特殊需求的人交谈过? 任何专家? 您是否阅读过可访问性人员对深色模式的看法?

这都是关于深色模式的,但我敢打赌,您可以想象考虑所有这些要点如何能使任何涵盖技术概念的博客文章受益。