docs: translating (#22086)

* 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

@@ -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);
+```

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 换成黑色或者深色的一个主题模式。