# Experience

## Whether to Use APP Theme Variables

**Definition:** The Miniprogram should use [APP theme variables](/en/miniapp/develop/miniapp/guide/theme/colors) to ensure that the theme color of the Miniprogram follows the configuration of the APP. This rule is currently only detected in the `IDE` experience audit mode.<br>
**Scoring Standard:** Scoring Condition: Whether the page `[pagePath].json` and app configuration `app.json` use APP theme variables, such as `backgroundColor`、`navigationBarBackgroundColor`<br>
**Optimization Suggestions:**

- Use APP theme variables to ensure that the theme color of the Miniprogram follows the configuration of the APP.

## Whether to Support Dark Mode

**Definition:** The Miniprogram should support dark mode. This rule is currently only detected in the `IDE` experience audit mode.<br>
**Scoring Standard:** Scoring Condition: Whether the `app.json` configuration is correct.<br>
**Optimization Suggestions:**

- `app.json` should have `darkmode` configured correctly, and use APP theme variables to adapt to changes in theme color and dark mode.

## Whether to Support Multi-Language

**Definition:** The Miniprogram should support multi-language. This rule is currently only detected in the `IDE` experience audit mode.<br>
**Scoring Standard:** Scoring Condition: Whether the business code contains hard-coded Chinese.<br>
**Optimization Suggestions:**

- Avoid using hard-coded Chinese in business code, use multi-language adaptation.

## Whether to Set Appropriate Clickable Areas

**Definition:** We should reasonably set the clickable area size of interactive elements, if too small, it will be very difficult for users to click, and the experience will be very poor.<br>
**Scoring Standard:** Scoring Condition: Whether the clickable area width and height of interactive elements are not less than `40px`.<br>
**Optimization Suggestions:**

- Optimize the clickable area of interactive elements, ensuring that the clickable area width and height are not less than `40px`.

## Whether to Support Safe Area

**Definition:** All fixed-position (position: fixed) interactive components should be rendered within the safe area, otherwise, it may fail to trigger event responses or easily trigger the Home Indicator.<br>
**Scoring Standard:** Scoring Condition: Whether the `position: fixed` and interactive components are rendered within the safe area.<br>
**Optimization Suggestions:**

- Ensure that the `position: fixed` and interactive components are rendered within the safe area, using `safe-area-inset-top`、`safe-area-inset-bottom` and other safe area variables.