emengweb
OK，咱们开始吧。以一个PC端的应用界面为例。
在本文中，我们在创建样式的同时，会说明我们为什么会选择特定的颜色。因为这些差别对设计师非常重要。
0.常量样式
重要的是要注意，在为明暗模式选择颜色时，颜色会略有不同。但是，某些中性颜色风格是不变的，在任何一种模式下都不会改变。在Figma Design System中，我们选择了白色和黑色作为固定颜色，无论您使用哪种模式，该颜色都将保持不变。另外，图像占位符的颜色也是恒定的，不会改变。
例如，在上图中，我们展示了该按钮在浅色和深色主题中的外观。图标，文本和计数器具有恒定的颜色。按钮的背景有变化，但其中的内容未更改。
1.可变样式
可变的颜色样式分别适用于亮和暗模式，并且它们都可以进一步细分为两个主要类别-颜色样式和效果样式。出于本文的目的，我们将主要讨论“亮”模式，并且在将这些步骤应用于“暗”模式时也稍作介绍。
1.1颜色样式-灰度样式
灰度颜色是可更改的样式，因为在黑暗模式下应用相同的颜色时时，您将不会获得与在明亮模式下相同的效果。这是因为，在黑暗模式下，背景已经完全为黑色，此时在黑色背景上使用100透明度的灰度颜色时，你的颜色会完全不可见。
将灰度颜色从“浅”模式切换为“暗”模式时，建议您使用白色（#FFFFFF）并在灰度上应用90％，70％，40％和10％的透明度效果，这将在应用于“深色模式”时提供很好的平滑过渡效果。
所以在此设计系统的亮色模式时，我们特别选择以下颜色：
· 100（＃1C1C1C）-主要用于标题和粗体文本。
· 200（＃585757）-主要用于正文。
· 300（＃969696）-用于小文本和填充图标。
· 400（＃E8E8E8）-用于较小的细节，例如边框，分隔线和线条颜色。
请注意，我们仅根据自己的喜好将所有四种灰度颜色分别命名为100、200、300和400，它们与任何规则都不相关，您可以根据需要命名灰度颜色。
1.2 系统颜色
系统颜色（也称为基础色）是你项目的主要颜色。我们建议您选择温暖和亲切的颜色，但是在某些情况下，选择调色板时，您可能需要考虑品牌的颜色，这将成为设计系统的一部分。
例如，在此设计系统中，原色是分别应用于这两种模式的蓝色，绿色，橙色和红色。每个原色由两种不同的颜色对比组成，第一个由较浅版本的原色组成，第二个类别由较暗版本的原色组成。如下图：
要创建较浅和较深的基础色，您需要在其之上添加20％，40％和60％的白色和黑色。
例如，在上面的表示按钮点击状态的图片中，我们分别使用了较浅和较深的蓝色来表示按钮的不同状态效果。
1.3 背景
在主界面选择中，有两种原色：层级一和层级二（译为Primary and Secondary），他们的变化依赖于你使用浅色还是深色版本。
例如：在上面的图片中，层级一（Primary）背景色为白色，层级二（Secondary）背景色为浅灰色。
除了这些颜色之外，我们还使用了彩色版本的背景，两种蓝色分别适用于浅色和深色模式。
为了创建这些颜色的阴影，我们将基础颜色的透明度应用于背景。例如，对于浅色版本，我们对白色应用了10％的蓝色透明度，对深色版本，我们对黑色应用了25％的蓝色透明度。
请注意：可以将系统颜色作为背景，但例如按钮，标签等颜色应该从亮色或者暗色模式的“常量样式”中调用。
2. 效果样式
效果样式是应用于设计系统中某些组件的微小更改和效果。它们用来描述某些重要的选项卡，按钮或信息块，并用于使用户专注于页面上的某些元素。
阴影效果可以在亮色模式下轻松被看到，它使元素具有3D外观，使按钮浮在屏幕上。您可以在暗色模式下使用相同的效果，但是由于阴影颜色已经很暗，除非更改背景颜色，否则用户可能很难看到该效果。
内阴影效果与外部投影效果非常相似，但是这次阴影效果在元素内部给出。这使您的块元素看起来更厚。请注意，在暗模式下，由于阴影颜色是暗的，因此可能看不到这种效果。
最后，Figma具有一个非常有用且功能强大的功能，称为“自动布局”。为了使此功能起作用，应该区别对待可以“自适应”的状态栏和“非自适应”的状态栏。
3.总结
让我们总结一下，系统样式的总体结构如上图所示。总体分为非可变样式与可变样式，其中又分为基础颜色样式与效果样式。
OK，激动人心的时刻来了，如果我们已经完整创建了所有上文的效果，那么只需要使用插件简单设置一下，就可以一键在亮色模式和暗色模式之间转换。
如何在亮色模式和暗色模式之间切换
设置好设计系统后，就可以轻松地将组件和模块切换为暗色模式了。为此，您将需要一个名为Appearance的插件，该插件可以在Figma社区找到。一旦安装，您将不需要一次又一次地更改每个块卡及其组件。一旦应用了此插件功能，您将可以通过快速快捷键来应用黑暗模式。
此插件的使用非常简单，来看下面的说明（下面的内容为静电另外添加）
- 用[day] 和 [night]来命名你的样式即可。比如“Button[day]”或者“Button[night]”。
- 打开你的项目(Frame或者你想改变的内容)，然后选择插件菜单中的“Appearance”，选择“Light mode”或“Night mode”即可。
以下是参考样式范例：
Color name [day]
Color name [night]
Style [day] / color-name
Style [night] / color-name
Style / color-name [day]
Style / color-name [night]
要下载此Figma插件和静电做的范例
请在我们公众号“静Design”聊天窗口
回复关键字“暗色模式”获取
作者：Pixsellz 翻译：静电
原文：https://pixsellz.medium.com/create-an-easily-switchable-light-dark-styles-in-figma