-
+
a
a & b
-
+
a
!a
diff --git a/docs/guide/cooperation.en.md b/docs/guide/cooperation.en.md
index 7a203f7ef..2d0464778 100644
--- a/docs/guide/cooperation.en.md
+++ b/docs/guide/cooperation.en.md
@@ -24,7 +24,7 @@ When submitting bug feedback, please provide relevant information as complete as
Here are some considerations when submitting:
- Provide device information, client version, component library version and specific components;
-- Explain what you expect the component to behave and what actually happens;
+- Explain the behavior of the components you expect and the behavior that actually occurs;
- Describe in detail the steps to reproduce the problem;
- If feasible, provide examples or demos that can reproduce the problem to speed up problem positioning.
diff --git a/docs/guide/customize-theme.en.md b/docs/guide/customize-theme.en.md
index c57d10463..a30c93339 100644
--- a/docs/guide/customize-theme.en.md
+++ b/docs/guide/customize-theme.en.md
@@ -3,58 +3,129 @@ order: 4
toc: true
---
-# Custom Theme
+# Custom Theme & Dark Mode
-antd-mini supports using less to customize themes. Two sets of themes are built into the antd-mini: the basic theme and the dark theme. You can use different themes or modify theme colors by customizing less variables.
+antd-mini support using CSS variables to customize themes. Two sets of themes are built into the antd-mini: the basic theme and the dark theme. You can use different themes or modify theme colors by customizing CSS variables. Dark mode is supported by default. You can automatically switch between dark and light modes by prefers the value of-color-scheme as the operating system changes.
## Mode of use
-> The IDE version of the applet developer tool must be no less than 3.0.0, and the CLI version of the command line tool must be no less than 1.4.0.
+> Setting the theme globally,[CSS Variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) To organize styles, by overwriting these CSS variables, you can customize the theme, dynamically switch the theme and other effects;
-1. Use `antd-mini/less/component`：
+### Override via CSS
-```json
-{
- "usingComponents": {
- "button": "antd-mini/less/Button/index"
- }
+#### Customize the theme of individual components
+
+```xml
+ Custom Theme
+```
+
+```css
+custom-btn {
+ --button-color: #1677ff;
+ --button-background-color: #ffffff;
+ --button-border-color: #1677ff;
+ --button-primary-border-color: #1677ff;
+ --button-primary-background-color: #1677ff;
+ --button-primary-color: #ffffff;
+ --button-primary-aide-border-color: #e7f1ff;
}
```
-2. In `mini.project.json` documents can be passed `modifyVars` Modifying the less variable, such as modifying `theme`：
+#### Customize themes for multiple components
+
+Similar to the customization of a single component, you only need to wrap the component to be customized with a configProvider or an arbitrary container node (such as ant-container) and set CSS variables on the container node.
-```json
-{
- "format": 2,
- "compileOptions": {
- "less": {
- "modifyVars": {
- "theme": "dark"
- }
- }
- }
+```xml
+
+ Custom Theme
+
+```
+
+```css
+container {
+ --button-color: #1677ff;
+ --button-background-color: #ffffff;
+ --button-border-color: #1677ff;
+ --button-primary-border-color: #1677ff;
+ --button-primary-background-color: #1677ff;
+ --button-primary-color: #ffffff;
+ --button-primary-aide-border-color: #e7f1ff;
}
```
-## less variable
-
-| Name | Description | Default Value |
-| ------------------ | ------------------------------------------- | -------------------- |
-| theme | Theme, selectable `default`、`dark` | `default` |
-| rpx | Rpx unit corresponding value | `0.5px` |
-| colorPrimary | Main brand color, corresponding `default` and `dark` The default value | `#1677ff`、`#3086FF` |
-| colorWathet | Light blue | `#E7F1FF`、`#0D2543` |
-| colorRed | Red | `#FF3141`、`#FF4A58` |
-| colorYellow | Yellow | `#FF9F18`、`#FFA930` |
-| colorGreen | Green | `#22B35E`、`#34B368` |
-| colorTextPrimary | Primary Text Information Color | `#333333`、`#E6E6E6` |
-| colorWhite | White | `#FFFFFF`、`#FFFFFF` |
-| colorOrange | Orange | `#FF6430`、`#E65A2B` |
-| colorBlack | Black | `#000000`、`#000000` |
-| colorTextAssist | Auxiliary Text Information Color | `#999999`、`#808080` |
-| colorBorder | Border Color | `#EEEEEE`、`#2B2B2B` |
-| colorBackground | Global Background Color | `#F5F5F5`、`#0A0A0A` |
-| colorTextWeak | Weak information | `#CCCCCC`、`#4D4D4D` |
-| colorCard | Card Color | `#FFFFFF`、`#1A1A1A` |
-| colorTextSecondary | Secondary text information color | `#666666`、`#B3B3B3` |
-| colorGreyCard | Gray Card | `#F5F5F5`、`#2B2B2B` |
+#### Customize the global theme
+
+In app.less, write CSS variables to take effect globally.
+
+```css
+page {
+ --actionsheet-danger-color: #ff3141;
+ --actionsheet-title-color: #999999;
+ --actionsheet-item-color: #333333;
+ --actionsheet-item-active-bg: #eeeeee;
+ --activesheet-item-cancel-bg: #f5f5f5;
+}
+```
+
+### Covered by ConfigProvider
+
+In addition to directly customizing themes through CSS variables (currently supporting light and dark themes by default), you can also customize themes or specify built-in themes through ConfigProvider themeVars.
+
+#### Set Theme
+
+```xml
+
+ I am a dark theme
+
+
+```
+
+#### Set themeVars custom theme
+
+```xml
+
+
+ Main button
+
+
+
+```
+
+```js
+Page({
+ data: {
+ themeVars: {
+ 'button-primary-color': 'yellow',
+ 'button-primary-background-color': 'green',
+ },
+ },
+});
+```
+
+## CSS Variables
+
+> The CSS variable names used for customization can be viewed in the documentation for each component, or in[Profile](https://github.com/ant-design/ant-design-mini/blob/master/src/style/variables.less)Check the full version of the variable names, the following is an example of button to list some variable names;
+
+| Variable name | Default Value | Dark Mode Default | Remarks |
+| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------- |
+| --button-disabled-opacity | 0.4 | 0.4 | Button Disable Transparency |
+| --button-color | #1677FF
| #3086FF
| Button Color |
+| --button-background-color | #FFFFFF
| #000000
| Button background color |
+| --button-border-color | #1677FF
| #0A0A0A
| Button border color |
+| --button-primary-border-color | #1677FF
| #3086FF
| Main button border color |
+| --button-primary-background-color | #1677FF
| #3086FF
| Main button background color |
+| --button-primary-color | #FFFFFF
| #FFFFFF
| Main button color |
+| --button-primary-aide-border-color | #E7F1FF
| #0D2543
| Primary Secondary Button Border Color |
+| --button-primary-aide-color | #1677FF
| #3086FF
| Primary Auxiliary Button Color |
+| --button-default-aide-border-color | #F5F5F5
| #121212
| Default Auxiliary Button Border Color |
+| --button-default-aide-background-color | #FFFFFF
| #000000
| Default Auxiliary Button Background Color |
+| --button-default-aide-color | #333333
| #C5CAD1
| Default Auxiliary Button Color |
+| --button-primary-danger-background-color | #FF3141
| #FF4A58
| Primary Danger Button Background Color |
+| --button-primary-danger-border-color | #FF3141
| #FF4A58
| Primary Hazard Button Border Color |
+| --button-primary-danger-color | #FFFFFF
| #FFFFFF
| Primary Hazard Button Color |
+| --button-default-danger-background-color | #FFFFFF
| #FFFFFF
| Default Hazard Button Background Color |
+| --button-default-danger-border-color | #FF3141
| #FF4A58
| Default Hazard Button Border Color |
+| --button-default-danger-color | #FF3141
| #FF4A58
| Default Hazard Button Color |
+| --button-text-danger-color | #FF3141
| #FF4A58
| Hazard button text color |
+| --button-danger-default-color | #FF3141
| #FF4A58
| Danger Button Default Color |
+| --button-active-bg | rgba(255, 255, 255, 0.08)
| rgba(255, 255, 255, 0.08)
| Button to activate background color |
diff --git a/docs/guide/faq.en.md b/docs/guide/faq.en.md
index 2e1b4fd9c..e26f1126e 100644
--- a/docs/guide/faq.en.md
+++ b/docs/guide/faq.en.md
@@ -5,17 +5,18 @@ toc: true
# FAQ
-### 2. Can x be used with 1.x, 0.x
+### 3. Can x be used with 2.x, 1.x, 0.x
-因为 1.x 升级到 2.x 没有迁移成本，所以你可以直接从 1.x 升级到 2.x
-对于 0.x, 你可以使用 npm 别名来安装。
+Because there is no migration cost to upgrade from 2.x, 1.x to 3.x, you can do it directly from 2.x, 1.x. upgrade to 3.x, under reference[Upgrade Guide](http://localhost:8000/guide/migration)。
+
+For 0.x, you can use the npm alias to install.
In `package.json` This is defined in the file:
```json
{
"dependencies": {
- "antd-mini": "^2.25.0",
+ "antd-mini": "^3.0.0",
"antd-mini-v0": "npm:antd-mini@^0.0.26"
}
}
@@ -37,7 +38,7 @@ Use:
```
```html
-
+
这是0.x antd-mini
```
diff --git a/docs/guide/i18n.en.md b/docs/guide/i18n.en.md
index 09266032b..39d488b7a 100644
--- a/docs/guide/i18n.en.md
+++ b/docs/guide/i18n.en.md
@@ -19,7 +19,7 @@ antd-mini v3 supports internationalization of global settings, and multi-languag
}
```
-2. introduce the corresponding language source file into js
+2. introduce the corresponding language source file in js
```js
import enUS from '@antd-mini/locales/en-US';
@@ -30,8 +30,8 @@ Page({
});
```
-2. Used in AXML, it is important to note that the entire project is only passed for the first time.`ConfigProvider`Setting Locale will take effect globally. Different languages are set on different pages of the same project and will only take effect once;
-
+2. Used in AXML, it is important to note that the entire project is only passed for the first time.`ConfigProvider`设置 Locale 会全局生效，
+ 同一个项目的不同页面设置了不同的Language，只会生效一次；
```xml
@@ -43,7 +43,7 @@ Page({
## Currently Supported Languages
-| Language | File Name | Supported Versions |
+| Language | File Name | Supported version |
| ----------------------- | ------ | -------- |
| Simplified Chinese | zh-CN | 3.0 |
| Traditional Chinese (Taiwan) | zh-TW | 3.0 |
@@ -64,9 +64,8 @@ Page({
| Turkish (Turkey) | tr-TR | 3.0 |
| Vietnamese | vi-VN | 3.0 |
-TODO: This file has not been replaced.
-View here[Language Pack Source Files](https://opendocs.alipay.com/mini/framework/custom-component-overview)
+View here[Language Pack Source Files](https://github.com/ant-design/ant-design-mini/blob/master/src/_locale/zh-CN.ts)
## FAQ
diff --git a/docs/guide/migration.en.md b/docs/guide/migration.en.md
index ca12f01c4..cb3681789 100644
--- a/docs/guide/migration.en.md
+++ b/docs/guide/migration.en.md
@@ -20,26 +20,28 @@ For visual upgrade of components, we modified the styles of some components in v
## Upgrade Description
-| Component Name | Upgrade Description |
-| -------------- | ------------------------------------------------------------------------------------------------------------------- |
-| Button | 🛠New `aide` Properties; |
-| Calendar | 🛠Remove `localeText` attributes; original `title` property is defined `format` attribute substitution; |
-| Empty | 🛠New `buttonInfo` property,`onClickButton` the incident; |
-| Popover | 🛠New `showCloseIcon` property,`imageUrl` property,`actionText` property,`onTapAction` the incident; |
-| Popup | 🛠New `backgroundImage` property,`showClose` property,`showBack` property,`onClickBackIcon` events,`onClickCloseIcon` the incident; |
-| Toast | 🛠New `textType` attributes; original `type` Property Added `alipay` type; |
-| Card | 🆕New Components |
-| Dialog | 🆕New Components |
-| SafeArea | 🆕New Components |
-| AutoResize | 🆕New Components |
-| ConfigProvider | 🆕New Components |
-| Countdown | 🆕New Components |
-| Table | 🆕New Components |
-| Feedback | 🆕New Components |
-| PopoverList | 🆕New Components |
-| SelectContact | 🆕New Components |
-| Sticky | 🆕New Components |
-| Voucher | 🆕New Components |
+| Component Name | Upgrade Description |
+| -------------- | ------------------------------------------------------------------------------------------------------- |
+| Button | 🛠New `aide` Properties; |
+| Calendar | 🛠Remove `localeText` attributes; original `title` property is defined `format` attribute substitution; |
+| Empty | 🛠New `buttonInfo` 、`imageMode` Properties;`onClickButton` the incident; |
+| Popover | 🛠New `showCloseIcon` 、`imageUrl` 、`actionText` Properties;`onTapAction` the incident; |
+| Popup | 🛠New `backgroundImage` 、`showClose` 、`showBack` Properties;`onClickBackIcon` 、`onClickCloseIcon` the incident; |
+| Toast | 🛠New `textType` attributes; original `type` Property Added `alipay` type; |
+| Card | 🆕New Components |
+| Dialog | 🆕New Components |
+| SafeArea | 🆕New Components |
+| AutoResize | 🆕New Components |
+| ConfigProvider | 🆕New Components |
+| Countdown | 🆕New Components |
+| Table | 🆕New Components |
+| Feedback | 🆕New Components |
+| PopoverList | 🆕New Components |
+| SelectContact | 🆕New Components |
+| Sticky | 🆕New Components |
+| Voucher | 🆕New Components |
+| NumberInput | 🆕New Components |
+| Postscript | 🆕New Components |