切换浅色和深色模式：并非只有黑白两色。

几个月前，在我刚开始学习编程的时候，我在推特上分享了一个我特别引以为豪的 Codepen 作品——一个用于切换浅色和深色模式的功能，后来它也出现在了我的作品集中。（如果你想看代码，可以点击这里：https ://codepen.io/alanacargill/pen/gOrWRGP ）。

我天真地以为，把设计从浅色切换到深色就像把黑色变成白色，反之亦然一样简单，但实际上，切换到深色系并没有我想象的那么容易。好的用户体验需要考虑很多因素，比如内容、颜色和字体。

首先，我认为有必要了解一下深色模式究竟是什么，以及它的用途。“深色模式”这个词本身或许就透露了它的含义——以深色为主色调，搭配浅色用户界面。这种模式在网站上越来越受欢迎，而且理由充分。深色用户界面旨在最大限度地减少数码产品带来的眼部疲劳，使屏幕在弱光环境下（例如深夜）更容易看清，并且在品牌推广和传达氛围方面也非常有用。此外，我不得不提的是，它看起来也非常酷炫。

但是，与大多数用户界面设计一样，设计深色模式界面也需要遵循一些规则。虽然深色模式界面看起来很棒，但也可能存在一些可用性问题，尤其是在可读性方面。

那么，如果我们要在应用程序或网站中添加深色模式功能，我们该如何解决这些问题呢？

问得好。最大的挑战在于如何保持背景和前景之间足够的对比度，这直接影响到可读性，进而影响到用户体验。为了获得最佳用户体验，深色模式最好只用于极简设计，例如文字稀疏、内容分割性强的页面。大部分空间应该用于深色背景，因此深色模式并不适合文字密集型内容，或者包含多种内容类型（例如文本、图像、视频、数据表格等）的页面。

在考虑深色模式下的字体排版时，主要有两个考虑因素：背景和文本之间的对比度是否足够？以及，如果用户将屏幕亮度调到最低，文本是否仍然清晰可读？

使用文本时，文本应与背景形成鲜明对比。通常，在浅色模式下，大多数颜色在白色背景上都具有足够的对比度，但在深色背景下，适合文本的颜色数量会大幅减少。因此，建议使用深灰色背景而非黑色背景，因为灰色可以表达更广泛的色彩范围（灰色更容易辨认阴影），而且深灰色表面还能减轻眼部疲劳。#000000 在高对比度屏幕上会造成眼部不适，因此深色模式的颜色通常是灰色系与低饱和度颜色的组合。
深色主题应避免使用饱和度高的颜色，因为它们不符合 WCAG 无障碍标准中关于深色背景下正文文本对比度至少为 4.5:1 的要求。此外，饱和度高的颜色在深色背景下还会产生光学振动，从而加剧眼部疲劳。高饱和度的品牌颜色在深色背景下可能效果不佳，因此一种选择是降低其饱和度，使其成为更易读的替代方案。

虽然我强烈建议在较小的项目网站（例如作品集）中添加深色模式，但我认为，我们更应该注意使我们的设计尽可能易于访问和阅读，并仔细选择深色模式的调色板，以确保每个人都能充分利用网络上最酷的功能之一。

如果您正在寻找一些深色模式的颜色灵感，请查看https://colorhunt.co/palettes/dark。