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