一键切换亮色模式和暗色模式，用Figma搞定！

静电说：在本文中，我们将使用Figma来创建一个可以一键切换亮色模式和暗色模式设计的系统，非常简单快捷。同时，我们也可以在本文中学习到亮色模式和暗色模式在设计过程中的区别。本文来自Pixsellz。

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社区找到。一旦安装，您将不需要一次又一次地更改每个块卡及其组件。一旦应用了此插件功能，您将可以通过快速快捷键来应用黑暗模式。

此插件的使用非常简单，来看下面的说明（下面的内容为静电另外添加）

1. 用[day] 和 [night]来命名你的样式即可。比如“Button[day]”或者“Button[night]”。
2. 打开你的项目(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