This article has been written by Redmadrobot Design Lab. Translated and reposted with permission by Alconost Inc., professional translation and localization company.

本文由 Redmadrobot設計實驗室 撰寫 。 經過 專業翻譯和本地化公司 Alconost Inc.的 許可 ，翻譯和重新發布。

Late last year iOS and Android 10 were released with support for automatic dark theme switching. We decided to add a dark mode to the Rostelecom Key app we were then working on. The process was not without its hiccups. Here we share our experience to save you time and frustration, should you find yourself in our shoes.

去年末，iOS和Android 10發布，支持自動暗主題切換。 我們決定將深色模式添加到當時正在研究的Rostelecom Key應用程序中。 這個過程并非沒有障礙。 在這里，我們分享我們的經驗，以節省您的時間和沮喪感，如果您發現自己喜歡我們的鞋子。

為什么要創建深色主題？ (Why create a dark theme?)

You might be inclined to think that this is just another fad. But there’s more to it than that.

您可能傾向于認為這只是另一種時尚。 除此之外，還有更多。

A dark theme is a functional improvement. It is necessary for apps that are used in low-light conditions. To understand why let’s take a closer look at how our vision works.

黑暗主題是功能上的改進。 對于在弱光條件下使用的應用程序來說是必要的。 為了理解為什么讓我們仔細看一下我們的愿景是如何工作的。

If we leave a dark room and enter a brightly lighted one, we are momentarily blinded, but within 4–6 minutes, our eyes acclimate to the new lighting. When we go from a brightly lighted place to a dark one, however, that process takes more time — 30–45 minutes on average.

如果我們離開黑暗的房間進入明亮的房間，我們會暫時失明，但是在4-6分鐘內，我們的眼睛會適應新的光照。 但是，當我們從明亮的地方轉到黑暗的地方時，該過程將花費更多的時間-平均30-45分鐘。

If a person has to constantly shift his gaze from a bright app to dark surroundings, he will swiftly acclimate to the bright display, but acclimating back to the darkness will take longer.

如果一個人必須不斷將視線從明亮的應用程序轉移到黑暗的環境中，他將Swift適應明亮的顯示，但是適應黑暗將需要更長的時間。

For this reason, certain apps, such as a GPS, launched dark themes even before operating systems did, with support for automatic switching. When a person is driving at night, it’s important that the GPS screen does not distract them from what’s happening on the road.

因此，某些應用程序(例如GPS)甚至在操作系統發布之前就發布了黑暗主題，并支持自動切換。 當一個人在夜間開車時，重要的是GPS屏幕不要分散他們在路上發生的事情。

In our case, the RT Key app is a cross-platform service for smart home device control — apartment buzzers, driveway gates, outdoor, and entryway security cameras. Residents employ it both in the daytime and at night.

在我們的案例中，RT Key應用程序是一種用于智能家居設備控制的跨平臺服務，包括公寓蜂鳴器，車道門，室外和入口安全攝像頭。 居民在白天和晚上都使用它。

It’s worth noting that the dark theme also helps conserve battery (for certain types of screens — OLED/AMOLED, but not LCD). And in the long term, it may even delay the onset of nearsightedness.

值得注意的是，深色主題還有助于節省電池電量(對于某些類型的屏幕-OLED / AMOLED，但不適用于LCD)。 從長遠來看，它甚至可能會延遲近視的發作。

走到黑暗的一面：循序漸進的指南 (Coming over to the dark side: a step-by-step guide)

If you are just hearing about dark themes for the first time, you can start out by reading the articles in the Human Interface Guidelines for iOS and in the Material Design guide for Android. The articles break down in detail on how colors and layers interact with each other in night mode. Now let’s take a look at our tips:

如果您是第一次聽說暗主題，可以先閱讀iOS的《 人機界面指南》和Android的《 材料設計》指南中的文章。 文章詳細介紹了顏色和圖層在夜間模式下如何相互作用。 現在讓我們看看我們的技巧：

1.準備樣機并組裝一個UI套件 (1. Prepare your mockups and put together a UI kit)

A UI kit significantly speeds up the work of the designer and developers. Ordinarily, we put one together immediately after approval of the visual concept, using the example of several primary app screens. The UI kit includes:

UI套件極大地加快了設計人員和開發人員的工作。 通常，我們會在視覺概念獲得批準后立即將幾個主要應用程序屏幕的示例放在一起。 UI工具包包括：

• A color guide of styles for the usual state of elements, hovers, and color for inactive elements, inputs in focus, and so on
  樣式的顏色指南，用于元素的通常狀態，懸停以及非活動元素的顏色，焦點輸入等
• Text styles
  文字樣式
• All interface elements (buttons, text fields, list elements, header blocks, etc.) in various states and situations in the form of master components
  以主組件的形式處于各種狀態和情況的所有界面元素(按鈕，文本字段，列表元素，標題塊等)
• A black icon set
  黑色圖標集
• Illustrations
  插圖

You can view the UI kit for our app on Figma.

您可以在Figma上查看我們的應用程序的UI套件 。

All subsequent screens are then compiled using ready-made components. But when exporting drafts from Sketch to Figma our UI kit took a serious hit: we ended up having to update it, re-specify the color style for each element, and recompile the screens from the components.

然后使用現成的組件編譯所有后續屏幕。 但是，當將草圖從Sketch導出到Figma時，我們的UI套件受到了嚴重的打擊：我們最終不得不對其進行更新，為每個元素重新指定顏色樣式，并從組件重新編譯屏幕。

2.同意顏色名稱 (2. Agree on the names of colors)

To make it easier for designers and iOS and Android developers to communicate, we decided to have universal color names for both platforms. In the previous version of the UI kit, we used no-frills naming conventions for the color styles, numbering them C1, C2, C3, etc. This proved less than convenient: in discussions, everyone referred to the colors not by number, but by hue: purple, orange, black, etc.

為了使設計人員以及iOS和Android開發人員更容易進行交流，我們決定在兩個平臺上使用通用的顏色名稱。 在UI工具包的先前版本中，我們為顏色樣式使用了簡潔的命名約定，將它們編號為C1，C2，C3等。事實證明，這樣做并不方便：在討論中，每個人都沒有按數字來指代顏色，而是指代顏色。按色相：紫色，橙色，黑色等

With the advent of the dark theme, however, it became impossible to use hues in the color names. For example, white background color in the light theme would be replaced with a dark one. A new naming convention, therefore, had to be adopted.

但是，隨著深色主題的出現，就不可能在顏色名稱中使用色相。 例如，淺色主題中的白色背景顏色將替換為深色。 因此，必須采用新的命名約定。

After several meetings involving the whole team we determined that the color name had to depend on its purpose, and should consist of the following parts:

經過整個團隊的幾次會議之后，我們確定顏色名稱必須取決于其用途，并且應包括以下部分：

• Purpose of the color, or of the element in which it is used
  顏色或使用顏色的元素的目的
• Degree of priority of use (optional)
  使用優先級(可選)
• State of the element, if applicable (optional)
  元素的狀態(如果適用)(可選)

At left are the names of button colors in their normal state, when pressed in iOS, the ripple color in Android, and for inactive buttons on both platforms. At right are the names for texts on various surfaces.

左側是正常狀態下按鈕的顏色名稱，在iOS中按下時，在Android中為波紋顏色，在兩個平臺上均處于非活動狀態。 右邊是各種表面上的文本的名稱。

Basically, if your project does not yet have a UI kit, and ordinary colors are specified instead of color styles, it’s time to tidy up your drafts.

基本上，如果您的項目還沒有UI工具包，并且指定了普通顏色而不是顏色樣式，那么該整理一下草稿了。

3.選擇深色主題的顏色 (3. Select colors for the dark theme)

To avoid wasting precious time, we did not work through all the drafts with the dark theme, instead selecting only a few screens with fundamentally different components. Using them we selected suitable colors and added them to the palette.

為了避免浪費寶貴的時間，我們并未處理所有具有深色主題的草稿，而是只選擇了一些具有根本不同組成部分的屏幕。 我們使用它們選擇合適的顏色并將其添加到調色板中。

Then the developers updated the colors in the app code and created a test build for us, and we examined how the theme looked when live. If errors were discovered, the drafts and palette were adjusted.

然后，開發人員更新了應用程序代碼中的顏色，并為我們創建了一個測試版本，我們檢查了主題在直播時的外觀。 如果發現錯誤，則調整草稿和調色板。

Katya Rokityan, Redmadrobot designerю

Katya Rokityan，Redmadrobot設計師ю

3.1。 背景顏色 (3.1. Background color)

Redrafting should begin with the background color, as it takes up most of the screen. The Material Design guide recommends selecting a neutral dark gray (#121212) as the base for the background color. Unlike black, it leaves space for creating screen depth.

重新起草應該從背景色開始，因為它占據了屏幕的大部分。 《材料設計指南》建議選擇中性深灰色(＃121212)作為背景色的基礎。 與黑色不同，它留出了創建屏幕深度的空間。

The neutral dark grey did not look good with the purple brand color, so we followed the Material Design guidelines. The authors recommend overlaying the grey #121212 background with the brand color at 8% transparency.

中性深灰色與紫色品牌色搭配看起來不太好，因此我們遵循了“材料設計”準則。 作者建議使用8％透明度的品牌顏色覆蓋灰色的＃121212背景。

Neutral and branded background colors in the dark theme

黑暗主題中的中性品牌背景色

In addition to the primary background, we have cards that are slightly “raised” above the surface. For dark themes the Material Design recommends creating the effect of elevated elements by lightening the background: the closer the card to the user, the lighter.

除了主要背景外，我們還有一些卡片在表面上方略微“凸起”。 對于深色主題，“材質設計”建議通過使背景變亮來創建高架元素的效果：離用戶越近，卡片越亮。

Suitable colors can be selected by overlaying a semitransparent white layer on the background color. We did just that.

可以通過在背景色上覆蓋半透明的白色層來選擇合適的顏色。 我們就是這樣做的。

3.2。 創建一個基本的調色板 (3.2. Creating a basic palette)

When creating a branded dark theme, Material design recommends replacing colors with less saturated ones of a similar hue. For RT Key we use purple as the trademark color.

當創建品牌深色主題時，Material design建議使用類似色相的飽和度較低的顏色替換顏色。 對于RT鍵，我們使用紫色作為商標顏色。

When we attempted to lighten it following the Material Design formula, the hue was rendered pinkish. The original trademark color appeared “bluer,” so we altered its hue manually.

當我們嘗試按照“材料設計”公式對其進行減輕時，其色相將變成粉紅色。 原始商標顏色顯示為“藍色”，因此我們手動更改了其色相。

The hue that resulted when we applied a white overlay was too pink, shifting the overall effect toward blue.

當我們應用白色覆蓋層時產生的色調太粉紅色，從而使整體效果偏向藍色。

In the light theme, we used a single purple color for large buttons, line icons, and the navbar. When selecting the colors for the dark theme we were unable to find a purple hue that looked equally pleasing in all these forms.

在淺色主題中，我們將紫色用于大型按鈕，線形圖標和導航欄。 在選擇深色主題的顏色時，我們無法找到在所有這些形式下都同樣令人愉悅的紫色色調。

The navbar and large buttons in the lightened purple version proved especially distracting from the content. But if we decreased the brightness, the line icons were lost against the dark background.

事實證明，淺紫色版本中的導航欄和大按鈕特別分散了內容的注意力。 但是，如果我們降低亮度，則線條圖標會在深色背景下丟失。

In the initial light theme, the saturated purple color looked equally pleasing on large blocks with white text and on subtle line icons against a light background. But with the dark background, everything is thrown off.

在最初的燈光主題中，飽和的紫色看起來同樣令人愉悅，它在帶有白色文本的大塊上以及在淺色背景下的細線圖標上都令人愉悅。 但是在黑暗的背景下，一切都被拋棄了。

In both dark and light themes, we ended up having to replace the initial color with three colors: one for contour icons, a second for large icons with background, and a third for the “corner space” on the home screen and the navbar on the others.

在深色和淺色主題中，我們最終都不得不用三種顏色替換初始顏色：一種用于輪廓圖標，另一種用于帶有背景的大圖標，第三種用于主屏幕上的“角落空間”，導航欄上的其他。

We replaced one purple hue with three different ones — a major improvement.

我們用三種不同的紫色代替了一種紫色，這是一個重大改進。

In addition to purple, we also used orange, yellow, turquoise, and red: orange for call-to-action elements, yellow for notifications, turquoise for operation confirmations, and red for errors.

除了紫色以外，我們還使用了橙色，黃色，綠松石和紅色：橙色用于號召性用語，黃色用于通知，黃色用于操作確認，紅色用于錯誤。

When we lightened these four colors, following the Material Design advice, the app’s contrast changed radically compared to the light theme. We had to diverge from the guidelines: instead of lightening the orange, turquoise, and red we darkened them. The yellow was left unchanged, as it took on a “dirty” look when darkened.

當我們按照材料設計建議對這四種顏色進行加亮處理時，與燈光主題相比，該應用程序的對比度發生了根本變化。 我們不得不偏離準則：不是使橙色，綠松石和紅色變亮，而是使它們變暗。 黃色保持不變，因為變黑時變黑了。

3.3。 iOS面板的特點 (3.3. Peculiarities of the iOS palette)

In iOS, you can set a tint that is applied to all interactive elements: buttons, icons, switches, etc. For example, the iPhone settings are blue, while the Clock app is orange.

在iOS中，您可以設置應用于所有交互式元素的色彩 ：按鈕，圖標，開關等。例如，iPhone設置為藍色，而“時鐘”應用程序為橙色。

In our light theme, the tint coincides with the large button color, but in the dark theme, we made it slightly lighter so that the line icons would be easily distinguishable against the dark background.

在我們的淺色主題中，色澤與大按鈕顏色一致，但在黑暗主題中，我們使其色澤稍淺，以便可以輕松區分深色背景上的線條圖標。

A tint in the dark theme

黑暗主題的色彩

iOS includes the ability to change the color of interactive elements when pressed. This is useful, as it is immediately clear to the user whether or not the app has reacted to his or her action.

iOS包含在按下時更改交互式元素的顏色的功能。 這很有用，因為用戶可以立即清楚該應用程序是否對其行為做出了React。

By default, when pressed the color becomes semitransparent. It occurred to us that it would look more interesting if the button appeared to recede — that is, grew darker — when pressed.

默認情況下，當按下時，顏色變為半透明。 在我們看來，如果按下按鈕后退按鈕(即變暗)看起來會更有趣。

3.4。 Android面板的特色 (3.4. Peculiarities of the Android palette)

In Android, when an interactive element is pressed, a ripple effect is produced, starting at the point of contact. By default, the ripple slightly darkens the initial element; we however wanted to make it lighter.

在Android中，當按下交互式元素時，會從接觸點開始產生波紋效果。 默認情況下，紋波會使初始元素稍微變暗； 但是，我們想減輕它的重量。

The ripple effect in the Android app.

Android應用中的漣漪效應。

Android also has its own way of rendering the status bar and navbar. The status bar is where notifications, signal strength, remaining battery life, and the time are displayed. The navbar is a panel where the buttons for “back,” “home,” and “recent apps” are located.

Android還具有自己的呈現狀態欄和導航欄的方式。 在狀態欄上顯示通知，信號強度，剩余電池壽命和時間。 導航欄是一個面板，用于放置“后退”，“家庭”和“最近的應用程序”按鈕。

Since the advent of smartphones with large displays stretching to the borders of the device, containing camera notches and pinholes, Material Design has introduced the “edge to edge” concept. The basic idea is that design service elements should not encroach on useful screen real estate and that as much of the screen as possible should be allotted to useful content.

自從大尺寸顯示屏延伸到設備邊界(包含攝像頭缺口和針Kong)的智能手機問世以來，Material Design引入了“邊緣到邊緣”的概念。 基本思想是，設計服務元素不應侵占有用的屏幕空間，而應將盡可能多的屏幕分配給有用的內容。

For this purpose, Android has developed support for a transparent status bar and navigation bar. The reason is that these small panels are of different heights on different phones. Before edge-to-edge support was a thing, if we assigned them a transparent background they would end up unattractively overlapping the screen content on certain devices.

為此，Android開發了對透明狀態欄和導航欄的支持。 原因是這些小面板在不同的手機上具有不同的高度。 在提供邊緣到邊緣支持之前，如果我們給它們分配透明的背景，它們最終將在某些設備上與屏幕內容重疊，從而失去吸引力。

Today material components contain system-defined offsets: developers can designate the size of the status bar and navigation bar and set a corresponding offset for the content. This is why Material Design formerly recommended selecting a non-transparent background for the status bar and navbar, but now recommends the reverse.

今天，材料組件包含系統定義的偏移量：開發人員可以指定狀態欄和導航欄的大小，并為內容設置相應的偏移量。 這就是為什么Material Design以前建議為狀態欄和導航欄選擇非透明背景，而現在建議相反的選擇。

It’s important to bear in mind, however, that not all supported versions of Android allow you to set icon colors in system components:

不過請務必牢記，并非所有受支持的Android版本都允許您在系統組件中設置圖標顏色：

• Prior to 6.0, icons in the status bar and nav bar are always white.
  在6.0之前的版本中，狀態欄和導航欄中的圖標始終為白色。
• 6.0 and above allow you to set whether status bar icons are white or black, but the navbar will behave as in earlier versions.
  6.0及更高版本允許您設置狀態欄圖標是白色還是黑色，但是導航欄的行為與早期版本相同。
• From version 8.1 and on you can select icon colors for both the status bar and the navbar.
  從版本8.1開始，您可以為狀態欄和導航欄選擇圖標顏色。

To avoid odd-looking overlapping onto content in the Key, we did the following:

為了避免在Key內容上出現奇怪的外觀重疊，我們執行了以下操作：

• In older versions of Android prior to 6.0, for both panels we set a black background with 50% transparency — white icons look good against it.
  在6.0之前的舊版Android中，對于兩個面板，我們都設置了具有50％透明度的黑色背景-白色圖標看起來不錯。
• In 6.0 through 8.1 the navbar retains the semitransparent black background, while the status bar is completely transparent.
  在6.0到8.1中，導航欄保留半透明的黑色背景，而狀態欄則完全透明。
• From version 8.1 on the background of both panels is completely transparent.
  從版本8.1開始，兩個面板的背景都是完全透明的。

If for some reason you’re not prepared for this kind of edge-to-edge support, it’s best to make the status bar and navbar universal. With edge-to-edge support:

如果由于某種原因您不準備使用這種邊緣到邊緣的支持，最好使狀態欄和導航欄通用。 借助邊緣到邊緣的支持：

3.5。 檢查元素對比 (3.5. Check element contrast)

Before confirming the dark mode color scheme and moving on, check whether there is sufficient contrast. The fact is, many people, especially those with less than ideal vision or a poor screen, or if they’re using the app in bright sunlight, will have a hard time making out elements that only weakly contrast with the background. This is especially true if these elements consist of thin lines, such as text and line icons.

在確認暗模式配色方案并繼續之前，請檢查對比度是否足夠。 事實是，許多人，尤其是那些視力不佳或屏幕不佳的人，或者如果他們在明亮的陽光下使用該應用程序，將很難辨別與背景形成微弱對比的元素。 如果這些元素由細線組成，例如文本和線圖標，則尤其如此。

It is best to check contrast by testing: open the interface on a smartphone, using Figma Mirror or similar software, and go out into bright sunlight (the dark theme is intended to be used in the dark, but there’s nothing to prevent people from using it in bright light).

最好通過測試來檢查對比度：使用Figma Mirror或類似軟件打開智能手機上的界面，然后進入明亮的陽光下( 黑暗主題旨在在黑暗中使用，但是沒有什么可以阻止人們使用它在明亮的光線下 )。

It is also helpful to have your app checked by people with vision problems (nearsightedness, farsightedness, color blindness). If this is not possible, you can test the contrast on the website contrast-ratio.com or using a Figma plugin.

讓視力障礙( 近視，遠視，色盲 )的人檢查您的應用也很有幫助。 如果無法做到這一點，您可以在網站contrast-ratio.com上或使用Figma插件來測試對比度。

3.6。 插圖和動畫 (3.6. Illustrations and animation)

If your app employs illustrations, for the dark theme they will need to be re-colored. Saturated colors that look great on light surfaces can appear jarring on dark ones, making them hard to interpret. Use less saturated hues.

如果您的應用使用插圖，則深色主題將需要重新著色。 在明亮的表面上看起來很好的飽和色在黑暗的表面上看起來會有些刺耳，使它們難以解釋。 使用較少的飽和色調。

The dark theme needs its own versions of illustrations and animations, using dark colors.

深色主題需要使用深色的插圖和動畫版本。

如何提交發展 (How to submit for development)

In our work, we employed a combination of Figma + Zeplin. This may seem strange, but our whole company had switched to Figma from Sketch in late summer of 2019, just before starting to work on the dark theme. To speed up the developers’ adaptation to the new tool, we continued using Zeplin, which resulted in several surprises.

在我們的工作中，我們采用了Figma + Zeplin的組合。 這可能看起來很奇怪，但是在開始研究黑暗主題之前，我們的整個公司在2019年夏末從Sketch轉到了Figma。 為了加快開發人員對新工具的適應，我們繼續使用Zeplin，這帶來了一些驚喜。

Zeplin’s palette does not allow you to create color styles with identical HEX values. This meant that we had to slightly, almost imperceptibly, alter the purple HEX value for the light theme.

Zeplin的調色板不允許您創建具有相同十六進制值的顏色樣式。 這意味著我們必須略微，幾乎不可察覺地更改淺色主題的紫色十六進制值。

It turned out that not a single designer tool, including Zeplin, supports dark themes, meaning that they do not allow using multiple color palettes in a single project. So we had to find a workaround. For example, we created two projects: one with a light palette, the other with a dark one.

事實證明，沒有一個設計器工具(包括Zeplin)支持深色主題，這意味著它們不允許在單個項目中使用多個調色板。 因此，我們必須找到一種解決方法。 例如，我們創建了兩個項目：一個項目帶有淺色調色板，另一個項目具有深色調色板。

Daniil Subbotin, Redmadrobot iOS developer.

Redmadrobot iOS開發人員Daniil Subbotin。

1. iOS開發的特點 (1. Peculiarities of iOS dev)

The next surprise Zeplin had in store for us was this: it only allows you to export a single palette to an Xcode project. It’s either light or dark — not both. When attempting to export colors from the dark palette, Zeplin simply replaced all the light colors with them. We began importing colors by hand, copying the HEX values, and did the same for images.

Zeplin為我們帶來的下一個驚喜是：它僅允許您將單個調色板導出到Xcode項目。 它是亮的還是暗的-兩者都不是。 嘗試從深色調色板中導出顏色時，Zeplin只是用它們替換了所有淺色。 我們開始手工導入顏色，復制十六進制值，并對圖像進行相同操作。

After considerable headaches I finally wrote a utility that uploads both color palettes directly to the Xcode project, using the Zeplin API. This vastly simplified things. The designer notifies that a new color has been added or an old one modified, I launch the script, and all the changes are automatically pulled into the project.

經過許多頭痛之后，我終于編寫了一個實用程序，該實用程序使用Zeplin API將兩個調色板直接上傳到Xcode項目。 這大大簡化了事情。 設計人員通知我添加了新顏色或修改了舊顏色，我啟動了腳本，所有更改都自動引入到項目中。

Daniil Subbotin, Redmadrobot iOS developer.

Redmadrobot iOS開發人員Daniil Subbotin。

2. Android開發人員的特點 (2. Peculiarities of Android dev)

In Android, the dark theme is accessible on all OS versions (we tested them starting with version 5). But switching to it in the system is possible only in Android 10, so it makes sense to add the ability to switch to it manually in the app.

在Android中，所有操作系統版本都可以訪問深色主題(我們從版本5開始對其進行了測試)。 但是只有在Android 10中才可以在系統中切換到它，因此添加在應用程序中手動切換到它的功能是有意義的。

We added the following theme options: always light, always dark, auto-select depending on power saving settings (Android 9 and below), and auto-switch depending on system settings (Android 10 and above).

我們添加了以下主題選項：始終亮，始終暗，根據節電設置(Android 9及更低版本)自動選擇以及根據系統設置(Android 10及更高版本)自動切換。

It’s important to bear in mind that the app theme selected by the user will not be saved in the system. It must be remembered internally and activated each time the app is launched.

請記住，用戶選擇的應用程序主題不會保存在系統中，這一點很重要。 必須在內部記住它，并在每次啟動該應用程序時將其激活。

Vladislav Shipugin, Redmadrobot Android developer.

Vladislav Shipugin，Redmadrobot Android開發人員。

Android has its own system of colors for material components (buttons, app bar, text fields, etc.). Material Design color guidelines.

Android為材料組件(按鈕，應用程序欄，文本字段等)擁有自己的顏色系統。 材料設計顏色準則 。

It’s important to compile your palette from the Material using the app theme description. Here is an article that will help your Android developers figure out how to do this. But even after this, the problem of incorrect colors may remain. To fix this you can describe the style of a specific component.

使用應用程序主題描述從“材質”編譯調色板非常重要。 這篇文章將幫助您的Android開發人員弄清楚如何做到這一點。 但是即使在此之后，色彩錯誤的問題仍然存在。 要解決此問題，您可以描述特定組件的樣式。

維護和持續發展 (Maintenance and continuing development)

Since we developed the dark theme we’ve added several new features, the app has acquired tablet users, and Rostelecom’s product office has started thinking about releasing the RT Key app as a white label for developers — using the trademark colors.

自從我們開發深色主題以來，我們已經添加了幾個新功能，該應用程序已經吸引了平板電腦用戶，Rostelecom的產品辦公室已經開始考慮將RT Key應用程序發布為開發人員的白色標簽-使用商標顏色。

We realized that the current design version developed for the MVP launch needed to be reconceived both structurally and visually. We completely reworked the app structure with an eye to the features set to appear over the next two years, added a dashboard for quick access to the most popular functions, and got rid of eye-catching trademark visual elements (such as the home screen corner and the colored navbar).

我們意識到，為發布MVP而開發的當前設計版本需要在結構和視覺上進行重新構思。 我們著眼于未來兩年內將要出現的功能集，對應用程序結構進行了全面的重新設計，添加了可快速訪問最受歡迎功能的儀表板，并消除了醒目的商標視覺元素(例如主屏幕角落)和彩色導航欄)。

Here the thorough work invested in the color system made it possible to preserve it almost entirely during this total redesign of the app.

在此，對色彩系統進行的全面工作使在應用程序的整個重新設計過程中幾乎可以完全保留它。

Olya Sartakova, Redmadrobot art director

Redmadrobot藝術總監Olya Sartakova

Second app design version using the same color palette:

使用相同調色板的第二個應用程序設計版本：

By the time the second version was launched, we had painlessly switched to Figma. The utility I had originally written for Zeplin I adapted to Figma. We now update the colors, icons, and pictures in Xcode and Android Studio in a single click. You can download our utility here.

到第二版發布時，我們已經輕松地切換到了Figma。 我最初為Zeplin I編寫的實用程序適應了Figma。 現在，我們只需單擊一次即可更新Xcode和Android Studio中的顏色，圖標和圖片。 您可以 在此處 下載我們的實用程序 。

Daniil Subbotin, Redmadrobot iOS developer

Redmadrobot iOS開發人員Daniil Subbotin

結論：像我們一樣，只有更好 (Conclusion: like us, only better)

If your app needs a dark theme, it’s best to incorporate it from the start, immediately after approval of the visual concept. This will help you avoid nearly all the problems we encountered. Here’s how:

如果您的應用需要深色主題，則最好在視覺概念獲得批準后立即將其合并。 這將幫助您避免我們遇到的幾乎所有問題。 這是如何做：

• Put together a UI kit.
  組裝一個UI工具包。
• Work out a color naming system or use ours.
  制定一種顏色命名系統或使用我們的顏色命名系統。
• Select a branded background color.
  選擇品牌的背景色。
• Select hues for the primary and secondary trademark colors.
  選擇顏色作為主要和輔助商標顏色。
• If yours is a cross-platform app, compile a list of differences between the iOS and Android color schemes. Also, check whether manual dark theme settings will need to be added to the Android app.
  如果您是跨平臺應用程序，請編譯iOS和Android配色方案之間的差異列表。 另外，檢查是否需要將手動深色主題設置添加到Android應用中。
• Check the contrast of the colors selected.
  檢查所選顏色的對比度。
• Prepare illustrations and animations for the dark theme.
  準備用于深色主題的插圖和動畫。
• Update the UI kit.
  更新UI工具包。
• Use our utility to submit elements for development.
  使用我們的實用程序提交開發元素。

有用的資源 (Useful resources)

To learn more about dark themes:

要了解有關黑暗主題的更多信息：

• For more on the theory of color: Johannes Itten, The Art of Color

  有關色彩理論的更多信息： Johannes Itten， 色彩藝術

• For more on how different colors interact: Josef Albers, Interaction of Color

  欲了解更多關于如何不同顏色的交互： 約瑟夫·阿爾伯斯， 色彩的互動

• A quick introduction for those with no time to read up on theory: Material Design guidelines for creating dark themes

  那些沒有時間閱讀理論的人的快速入門：創造黑暗主題的材料設計準則

• The same guidelines for iOS

  適用于iOS的相同準則

• Session with WWDC 2019 on dark theme design for iOS

  與WWDC 2019的iOS深色主題設計會議

And a few useful tidbits for developers:

還有一些對開發人員有用的提示：

• Session with WWDC 2019 on dark themes for iOS

  與WWDC 2019的iOS暗主題對話

• Working with material components in Android

  在Android中使用材料組件

Alconost is a global provider of localization services for apps, games, videos, and websites into 70+ languages. We also make advertising and educational videos.

Alconost 是為70多種語言的應用程序，游戲，視頻和網站提供本地化服務的全球提供商。 我們還制作廣告和教育視頻。