docs: update darkmode description

content/start/dark-mode/index-en-US.md

@@ -9,7 +9,21 @@ order: 4
 
 ## Dark mode
 
-Semi's default theme and custom themes configured through Theme Store come with both light and dark modes, which can be easily switched. Semi also supports the use of dark mode in a partial area of the page.
+🤩  Semi's default theme or custom themes configured through [Semi DSM](/dsm) come with both light and dark modes, which can be easily switched.   
+🌒 Semi also supports the use of dark mode in a partial area of the page.  
+
+
+## Recommended settings
+Semi will automatically mount the global color palette on the body element. We have built in some commonly used CSS Tokens. For detailed Token details, please refer to [Design Variables](/en-US/basic/tokens)
+We recommend that you configure `color` and `background-color` on the body, your business components can automatically inherit the default background color and text color from the body, and adaptive light/dark color switching
+
+````css
+// css
+body {
+     color: 'var(--semi-color-text-0)';
+     background-color: 'var( --semi-color-bg-0)';
+}
+````
 
 ## How to switch
 To use Dark Mode, you could simply add `[theme-mode='dark']` to `body` in any way you prefer. Here is a quick idea:

content/start/dark-mode/index.md

@@ -7,12 +7,25 @@ order: 4
 ---
 
 
-## 暗色模式
+## 能力介绍
 
-Semi 的默认主题和通过 Semi DSM 配置的定制主题都自带了亮色模式与暗色模式，可以方便地进行切换。Semi 也支持在页面的局部范围使用暗色模式。
+🤩 Semi 的默认主题或任意通过 [Semi DSM](/dsm) 配置的定制主题都自带了亮色模式与暗色模式，可以方便地进行切换。  
+🌒 Semi 也支持在页面的局部范围使用亮/暗色模式。
+
+## 推荐设置
+Semi 会自动在 body 元素上挂载全局色盘，我们内置了一些常用的 CSS Token，详细的 Token 详情可查阅 [设计变量](/zh-CN/basic/tokens)  
+我们推荐你在 body 上配置 `color`、`background-color`, 你的业务组件可从 body 自动继承获得默认的背景色、文本颜色，自适应亮/暗色切换
+
+```css
+// css
+body {
+    color: 'var(--semi-color-text-0)';
+    background-color: 'var( --semi-color-bg-0)';
+}
+```
 
 ## 如何切换
-Semi 暗色模式的切换是通过给 `body` 添加属性 `[theme-mode='dark']` 来实现的。你可以使用任何你喜欢的方式来进行切换。比如：
+Semi 暗色模式的切换是通过给 `body` 添加属性 `[theme-mode='dark']` 来实现的（我们在 body 下同时挂载了两套色盘）。你可以使用任何你喜欢的方式来进行切换。比如：
 ```jsx
 const body = document.body;
 if (body.hasAttribute('theme-mode')) {
@@ -54,7 +67,7 @@ function Demo() {
 
 如果你希望页面的亮色/暗色模式能自动和系统主题保持一致，可以参考 [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 属性。该属性目前处于实验阶段，请留意浏览器兼容性 (Chrome >= 76, Safari >= 12.1) 及未来可能发生的改变。
 
-macOS 下的系统主题可以通过 系统偏好设置 -> 通用 -> 外观 来配置。
+macOS 下的系统主题可以通过 `系统偏好设置 -> 通用 -> 外观` 来配置。
 
 由于我们不建议直接修改 npm 主题包的内容，你可以通过 JS 的方式监听该属性的变化，这里也有一个🌰：
 ```jsx
@@ -80,7 +93,9 @@ mql.addListener(matchMode);
 
 Semi 2.0 原生支持局部暗色/亮色模式。使用时，在顶级元素上添加 `.semi-always-dark` 或 `.semi-always-light` 类，这个类下的组件会使用对应模式的颜色变量。
 
-> 注意局部暗色/亮色对弹出层不生效
+<Notice>
+    注意：由于弹出层默认是插入到 body 中，局部暗色/亮色对弹出层元素不生效。若你希望对弹出层也生效，应当使用 getPopupContainer 将弹出层插入节点置于你挂载 `.semi-always-dark` 或 `.semi-always-light`类名的元素内部
+</Notice>
 
 ```jsx live=true dir="column" hideInDSM
 import React from 'react';

src/components/PageAnchor/index.jsx

@@ -17,7 +17,7 @@ const makeAnchorOfToken = data => {
 
 const PageAnchor = props => {
     const { data = [], slug } = props;
-    const skipCondition = ['accessibility'].some(item => slug.includes(item));
+    const skipCondition = ['accessibility', 'dark-mode', 'customize-theme'].some(item => slug.includes(item));
 
     let flag = false;
     const makeAnchor = data => {