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