From 8c5cf006271678ab16b5610283b1386541420512 Mon Sep 17 00:00:00 2001
From: Micah Guttman <memtech3@gmail.com>
Date: Wed, 11 Mar 2020 02:26:54 -0500
Subject: [PATCH] docs: translating (#22086)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* translating

* Create dark.en-US.md

* Update dark.en-US.md

* still working on translations

added google translate translations, will go through and check grammar soon

* still working on translations

added google translate translations, will go through and check grammar soon

* fixing formatting

* grammar fixes

* Update dark.en-US.md

* Update dark.en-US.md

* Update dark.en-US.md

* Update dark.en-US.md

* Update docs/spec/dark.en-US.md

Co-Authored-By: 偏右 <afc163@gmail.com>

* Update dark.en-US.md

* Update dark.zh-CN.md

Co-authored-by: 偏右 <afc163@gmail.com>
---
 docs/spec/dark.en-US.md              | 45 ++++++++++++++++++++++++++++
 docs/spec/{dark.md => dark.zh-CN.md} |  8 ++---
 2 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 docs/spec/dark.en-US.md
 rename docs/spec/{dark.md => dark.zh-CN.md} (93%)

diff --git a/docs/spec/dark.en-US.md b/docs/spec/dark.en-US.md
new file mode 100644
index 0000000000..6943b73dc6
--- /dev/null
+++ b/docs/spec/dark.en-US.md
@@ -0,0 +1,45 @@
+---
+category: Global Styles
+order: 6
+title: Dark Mode
+---
+
+Dark mode is a theme where all UI elements are darkened.
+
+## When to use
+
+- Dark mode is reccomended when you are in a dark environment as it prevents eye strain.
+- Dark mode is great for highlighting important content
+  > It works similarly to turning off the lights in a movie theater.
+
+## Design Principles
+
+1. **Comfort of content**
+
+Avoid using highly contrasting colors or content in dark mode. Continuous use will bring fatigue.
+
+2. **Consistency of Information**
+
+The information content in the dark mode needs to be consistent with the light mode, and the initialization hierarchical relationship should not be broken.
+
+## Color
+
+In the application of colors, we are based on 12 sets of basic swatches and combine longer rule processing to make colors better blend under different environmental colors.
+
+### Color Pallete
+
+```__react
+import ColorPalettes from '../../site/theme/template/Color/ColorPalettes';
+
+ReactDOM.render(<ColorPalettes dark />, mountNode);
+```
+
+### Color Pallete Generator
+
+Additionally, we also provide a set of tools for generating color palletes in dark colors. You need to select your primary color and the background color of the page. We will generate a dark mode color pallete for you.
+
+```__react
+import ColorPaletteToolDark from '../../site/theme/template/Color/ColorPaletteToolDark';
+
+ReactDOM.render(<ColorPaletteToolDark />, mountNode);
+```
diff --git a/docs/spec/dark.md b/docs/spec/dark.zh-CN.md
similarity index 93%
rename from docs/spec/dark.md
rename to docs/spec/dark.zh-CN.md
index cd445757b6..b346931b72 100644
--- a/docs/spec/dark.md
+++ b/docs/spec/dark.zh-CN.md
@@ -1,11 +1,7 @@
 ---
-category:
-  zh-CN: 全局样式
-  en-US: Global Styles
+category: 全局样式
 order: 6
-title:
-  zh-CN: 暗黑模式
-  en-US: Dark Theme
+title: 暗黑模式
 ---
 
 暗黑模式是指把所有 UI 换成黑色或者深色的一个主题模式。