docs: 补充快速上手和主题中的配置项的解释 (#3163)

* docs: 补充快速上手和主题中的配置项的解释

* docs: 补充官方主题的使用说明

Author: oasis-cloud

src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md

@@ -13,6 +13,17 @@ NutUI provides multiple sets of official `UI` themes by default, while allowing
 
 ## How to use
 
+It is important to note that when configuring the theme, you also need to import the global class files in the entry file to load some global logic and styles for NutUI React:
+
+| theme description | scss file name |
+| --- | --- |
+| JD APP Theme (Light Mode) | `@nutui/nutui-react/dist/styles/themes/default.css` |
+| JD APP Theme (Dark Mode) | `@nutui/nutui-react/dist/styles/themes/dark.css` |
+| JD JDesign Theme | `@nutui/nutui-react/dist/styles/themes/jmapp.css` |
+| JD JRKF Theme | `@nutui/nutui-react/dist/styles/themes/jrkf.css` |
+
+Currently, only the default theme provides support for dark mode.
+
 ### Modify the configuration file of the local project vite or webpack
 
 Modify the **sass-loader** configuration in the vite or webpack configuration file. The following example

src/sites/sites-react/doc/docs/react/official-theme-react.md

@@ -10,9 +10,22 @@ NutUI 默认提供多套官方`UI`主题，同时允许在一定程度上定制
 | --- | --- |
 | 京东 APP 主题（默认） | `variables.scss` |
 | 京东 JDesign 主题 ([预览](https://nutui.jd.com/h5/react/jdesign-3x/#/zh-CN/component/button)) | `variables-jmapp.scss` |
+| 京东 JRKF 主题 | `variables-jrkf.scss` |
+
 
 ## 使用方式
 
+需要注意的是，配置主题时，你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React 的全局性逻辑和样式：
+
+| 主题说明 | scss 文件名称 |
+| --- | --- |
+| 京东 APP 主题（明亮模式） | `@nutui/nutui-react/dist/styles/themes/default.css` |
+| 京东 APP 主题（暗黑模式） | `@nutui/nutui-react/dist/styles/themes/dark.css` |
+| 京东 JDesign 主题 | `@nutui/nutui-react/dist/styles/themes/jmapp.css` |
+| 京东 JRKF 主题 | `@nutui/nutui-react/dist/styles/themes/jrkf.css` |
+
+目前只有默认主题提供了暗黑模式的支持。
+
 ### 修改本地项目 vite 或者 webpack 的配置文件
 
 修改 vite 或者 webpack 配置文件中 **sass-loader** 的配置。如下示例

src/sites/sites-react/doc/docs/react/start-react.en-US.md

@@ -91,7 +91,10 @@ export default defineConfig({
         {
           libName: '@nutui/nutui-react',
           style: (name) => {
+            // Handling on-demand import of CSS files, choose one of the two methods
             return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css`
+            // Handling on-demand import of SCSS files, choose one of the two methods
+            return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style`
           },
           replaceOldImport: false,
           camel2DashComponentName: false,
@@ -132,7 +135,7 @@ babel config：
       'import',
       {
         libraryName: '@nutui/nutui-react',
-        style: 'css',
+        style: 'css', // Here are the CSS files for on-demand import. If you need to import SCSS files, you can set the style to true.
         camel2DashComponentName: false,
         customName: (name, file) => {
           return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}`

src/sites/sites-react/doc/docs/react/start-react.md

@@ -91,7 +91,10 @@ export default defineConfig({
         {
           libName: '@nutui/nutui-react',
           style: (name) => {
+            // 按需引入 css 文件的处理，两种方式择其一
             return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css`
+            // 按需引入 scss 文件的处理，两种方式择其一
+            return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style`
           },
           replaceOldImport: false,
           camel2DashComponentName: false,
@@ -132,7 +135,7 @@ babel 配置：
       'import',
       {
         libraryName: '@nutui/nutui-react',
-        style: 'css',
+        style: 'css', // 这里是按需引入的 css 文件，如果需要引入 scss 文件，可将 style 设置为 true
         camel2DashComponentName: false,
         customName: (name, file) => {
           return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}`

src/sites/sites-react/doc/docs/react/theme-react.en-US.md

@@ -23,6 +23,8 @@ We recommend replacing [CSS Vars] (https://developer.mozilla.org/zh-CN/docs/Web/
 
 Create a new 'SCSS' file 'custom_theme.scss' in your local project.
 
+**When customizing themes using SCSS files, you need to set the on-demand import to the SCSS file method. Refer to the description in the automatic on-demand loading configuration in the quick start guide.**
+
 ```scss
 // Dominant tone
 $color-primary: #fa2c19;

src/sites/sites-react/doc/docs/react/theme-react.md

@@ -20,6 +20,8 @@ NutUI-React 支持灵活的样式定制，满足多种视觉业务和品牌需
 
 在本地项目中新建一个 `SCSS` 文件 `custom_theme.scss` 进行自定义。
 
+**使用 SCSS 文件自定义主题时，需将按需引入设置为 scss 文件的方式，参考快速入手中的自动按需加载配置项中的描述**
+
 ```scss
 // 主色调
 $color-primary: #fa2c19;

src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md

@@ -13,6 +13,17 @@ NutUI provides multiple sets of official `UI` themes by default, while allowing
 
 ## How to use
 
+It is important to note that when configuring the theme, you also need to import the global class files in the entry file to load some global logic and styles for NutUI React:
+
+| theme description | scss file name |
+| --- | --- |
+| JD APP Theme (Light Mode) | `@nutui/nutui-react-taro/dist/styles/themes/default.css` |
+| JD APP Theme (Dark Mode) | `@nutui/nutui-react-taro/dist/styles/themes/dark.css` |
+| JD JDesign Theme | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` |
+| JD JRKF Theme | `@nutui/nutui-react-taro/dist/styles/themes/jrkf.css` |
+
+Currently, only the default theme provides support for dark mode.
+
 ### Modify the configuration file of the local project vite or webpack
 
 Modify the **sass-loader** configuration in the vite or webpack configuration file. The following example

src/sites/sites-react/doc/docs/taro/official-theme-react.md

@@ -13,6 +13,17 @@ NutUI 默认提供多套官方`UI`主题，同时允许在一定程度上定制
 
 ## 使用方式
 
+需要注意的是，配置主题时，你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React 的全局性逻辑和样式：
+
+| 主题说明 | scss 文件名称 |
+| --- | --- |
+| 京东 APP 主题（明亮模式） | `@nutui/nutui-react-taro/dist/styles/themes/default.css` |
+| 京东 APP 主题（暗黑模式） | `@nutui/nutui-react-taro/dist/styles/themes/dark.css` |
+| 京东 JDesign 主题 | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` |
+| 京东 JRKF 主题 | `@nutui/nutui-react-taro/dist/styles/themes/jrkf.css` |
+
+目前只有默认主题提供了暗黑模式的支持。
+
 ### 修改本地项目 vite 或者 webpack 的配置文件
 
 修改 vite 或者 webpack 配置文件中 **sass-loader** 的配置。如下示例

src/sites/sites-react/doc/docs/taro/start-react.en-US.md

@@ -140,7 +140,7 @@ plugins: [
     'import',
     {
       libraryName: '@nutui/nutui-react-taro',
-      style: 'css',
+      style: 'css', // Here are the CSS files for on-demand import. If you need to import SCSS files, you can set the style to true.
       camel2DashComponentName: false,
       customName: (name, file) => {
         return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}`

src/sites/sites-react/doc/docs/taro/start-react.md

@@ -145,7 +145,7 @@ module.exports = {
       'import',
       {
         libraryName: '@nutui/nutui-react-taro',
-        style: 'css',
+        style: 'css', // 这里是按需引入的 css 文件，如果需要引入 scss 文件，可将 style 设置为 true
         camel2DashComponentName: false,
         customName: (name, file) => {
           return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}`