From f064bd7d0092f36b659d28fb5d1d21d3171a06b2 Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Mon, 14 Nov 2022 11:19:36 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20darkmode.md=E3=80=81vue3-pinia.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/tutorial/_sidebar.md   |  2 +-
 docs/tutorial/darkmode.md   | 90 ++++++++++++++++++++++++-------------
 docs/tutorial/vue3-pinia.md |  2 +
 3 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/docs/tutorial/_sidebar.md b/docs/tutorial/_sidebar.md
index fc0b11c42..0df687194 100644
--- a/docs/tutorial/_sidebar.md
+++ b/docs/tutorial/_sidebar.md
@@ -132,4 +132,4 @@
 * [国际化专题](/tutorial/i18n.md)
 	* [国际化开发指南](/tutorial/i18n.md)
 	* [海外开发者使用指南](/tutorial/internationalization.md)
-<!--* [暗黑主题](/tutorial/darkmode.md)-->
+* [暗黑主题](/tutorial/darkmode.md)
diff --git a/docs/tutorial/darkmode.md b/docs/tutorial/darkmode.md
index 999b1f803..e6b19304c 100644
--- a/docs/tutorial/darkmode.md
+++ b/docs/tutorial/darkmode.md
@@ -1,14 +1,14 @@
-## DarkMode 适配指南 @darkmode
+# DarkMode 适配指南 @darkmode
 
 > HBuilder X 3.6.9+ 支持
 
 > 暗黑模式（Dark Mode），也被称为夜间模式或深色模式，是一种高对比度，或者反色模式的显示模式。是一种有利于在黑暗环境下观看手机的高对比度的模式，与传统的白底黑字相反，在夜间长时间观看手机不至于太难受，会给你一种更舒适的感觉，可能会对视力有所保护。
 
-### 开启 DarkMode @open-darkmode
+## 开启 DarkMode @open-darkmode
 
 > 在 `manifest.json` 配置，应用的部分配置可通过变量的形式配置，在变量配置文件中定义不同主题下的颜色或图标，各平台配置如下：
 
-#### app-plus
+### app-plus
 
 在 `manifest.json -> app-plus` 中配置：
 
@@ -16,16 +16,47 @@
 2. 配置 `themeLocation`，指定变量配置文件 `theme.json` 路径，例如：在根目录下新增 `theme.json`，需要配置 `"themeLocation":"theme.json"`
 3. 在 `theme.json` 中定义相关变量
 4. 在 `pages.json` 中以@开头引用变量
-5. 需要云端打包生效
-6. 整体配置 
+5. 整体配置
    ```json
-	 "app-plus" : {
-			"darkmode" : true,
-			"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
-	 }
-	 ```
+    "app-plus" : {
+   		"darkmode" : true,
+   		"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
+    }
+   ```
+6. 需要云端打包生效
+
+#### iOS 安全区域适配
+
+- 开启安全区域占位
+
+  > 在 manifest.json 文件的"plus" 节点下添加 "safearea" 适配 iOS 的安全区域，"background" 对应正常模式下安全区域外的背景颜色，"backgroundDark"对应暗黑模式下安全区域外的背景颜色
+
+	```json
+	"plus" : {
+		"safearea": { //iOS平台的安全区域
+			"background": "#ffffff",
+			"backgroundDark": "#2f0508", // HX 3.1.19+支持
+			"bottom": {
+				"offset": "auto"
+			}
+		}
+	}
+	```
+
+- 关闭安全区域占位
+  > 将 "offset" 置为 “none” 关闭安全区域的占位，注：关闭安全区域占位在刘海屏页面内容可能会被 “homeBar” 挡住，需要自行适配，具体请参考文档 [iOS 刘海屏适配](https://ask.dcloud.net.cn/article/35564)
+
+	```json
+	"safearea": {
+			"bottom": {
+					"offset": "none"
+			}
+	}
+	```
 
-#### h5
+**注意：iOS 13+、Android 10+设备上才支持**
+
+### h5
 
 在 `manifest.json -> h5` 中配置：
 
@@ -33,15 +64,15 @@
 2. 配置 `themeLocation`，指定变量配置文件 `theme.json` 路径，例如：在根目录下新增 `theme.json`，需要配置 `"themeLocation":"theme.json"`
 3. 在 `theme.json` 中定义相关变量
 4. 在 `pages.json` 中以@开头引用变量
-5. 整体配置 
+5. 整体配置
    ```json
-	 "h5" : {
-			"darkmode" : true,
-			"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
-	 }
-	 ```
+    "h5" : {
+   		"darkmode" : true,
+   		"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
+    }
+   ```
 
-#### mp-weixin
+### mp-weixin
 
 在 `manifest.json -> mp-weixin` 中配置：
 
@@ -49,13 +80,13 @@
 2. 配置 `themeLocation`，指定变量配置文件 `theme.json` 路径，例如：在根目录下新增 `theme.json`，需要配置 `"themeLocation":"theme.json"`
 3. 在 `theme.json` 中定义相关变量
 4. 在 `pages.json` 中以@开头引用变量
-5. 整体配置 
+5. 整体配置
    ```json
-	 "mp-weixin" : {
-			"darkmode" : true,
-			"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
-	 }
-	 ```
+    "mp-weixin" : {
+   		"darkmode" : true,
+   		"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
+    }
+   ```
 
 支持通过变量配置的属性如下所示：
 
@@ -77,8 +108,7 @@
     - iconPath
     - selectedIconPath
 
-
-### 变量配置文件 theme.json@themejson
+## 变量配置文件 theme.json@themejson
 
 `theme.json` 用于颜色主题相关的变量定义，需要先在 `themeLocation` 中配置 `theme.json` 的路径，否则无法读取变量配置。包含以下属性：
 
@@ -124,7 +154,7 @@
 
 配置完成后，调用相应 api 框架会自动所设属性，展示对应主题下的颜色。
 
-### 配置示例@themeconfig
+## 配置示例@themeconfig
 
 pages.json（示例省略了主题相关以外的配置项）
 
@@ -196,20 +226,20 @@ theme.json
 }
 ```
 
-### 获取当前主题@get-theme
+## 获取当前主题@get-theme
 
 如果 `manifest.json` 对应平台配置中声明了`"darkmode": true`，`uni.getSystemInfo` 或 `uni.getSystemInfoSync` 的返回结果中会包含 `theme` 属性，值为 `light` 或 `dark`。
 
 如果 `manifest.json` 对应平台配置未声明`"darkmode": true`，则无法获取到 `theme` 属性（即 theme 为 undefined）。
 
-### 监听主题切换事件@on-theme-change
+## 监听主题切换事件@on-theme-change
 
 支持两种方式：
 
 1. 在 `App.vue` 中写上 `onThemeChange` 生命周期，主题切换时会触发
 2. 通过 `uni.onThemeChange` 监听主题变化，`uni.offThemeChange` 取消监听
 
-### 页面 css 适配@perfers-color-scheme
+## 页面 css 适配@perfers-color-scheme
 
 > [css 支持情况](https://caniuse.com/?search=prefers-color-scheme)
 
diff --git a/docs/tutorial/vue3-pinia.md b/docs/tutorial/vue3-pinia.md
index a721e2d6b..f376758d8 100644
--- a/docs/tutorial/vue3-pinia.md
+++ b/docs/tutorial/vue3-pinia.md
@@ -6,6 +6,8 @@
 
 > 使用 `HBuilder X` 不需要手动安装，直接使用即可。使用 `CLI` 需要手动安装，执行 `yarn add pinia` 或 `npm install pinia`。
 
+> Vue 2 项目暂不支持
+
 ### Pinia 是什么？
 
 Pinia（发音为 `/piːnjʌ/`，如英语中的 `peenya`） 是 Vue 的存储库，它允许您跨组件、页面共享状态。在服务器端以及小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：
-- 
GitLab