四、主题定制

4.1 主题定制原理
Arco Design 提供了两种主题定制方式：通过 Less 变量覆盖和通过 CSS 变量定制。两种方式各有优劣：

4.2 通过 Less 变量定制（编译时）
步骤一：安装 less

npm install less less-loader -D

步骤二：创建自定义主题文件

// custom-theme.less
@import '~@arco-design/web-react/es/style/index.less';

// 覆盖主题变量
@primary-color: #4c6ef5;          // 品牌主色
@success-color: #10b981;           // 成功色
@warning-color: #f59e0b;           // 警告色
@error-color: #ef4444;             // 错误色

@border-radius-none: 0;
@border-radius-small: 2px;
@border-radius-medium: 4px;
@border-radius-large: 6px;
@border-radius-circle: 50%;

@font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

步骤三：配置 Webpack/Vite

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
                modifyVars: {
                  'primary-color': '#4c6ef5',
                },
              },
            },
          },
        ],
      },
    ],
  },
};

4.3 通过 CSS 变量定制（运行时）
Arco Design 使用 CSS 自定义属性来定义主题变量，支持运行时动态切换主题。

/* 在全局样式文件中覆盖 CSS 变量 */
:root {
  --primary-color: #4c6ef5;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
}

[data-theme='dark'] {
  --primary-color: #6d28d9;
  --bg-color: #1a1a2e;
  --text-color: #e0e0e0;
}

4.4 使用 ConfigProvider 动态切换主题

import { ConfigProvider, Button } from '@arco-design/web-react';
import { useState } from 'react';

function ThemeSwitcher() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    // 动态设置 CSS 变量
    if (newTheme === 'dark') {
      document.documentElement.style.setProperty('--primary-color', '#8b5cf6');
    } else {
      document.documentElement.style.setProperty('--primary-color', '#4c6ef5');
    }
  };

  return (
    <ConfigProvider theme={
  { theme }}>
      <Button onClick={toggleTheme}>切换主题</Button>
    </ConfigProvider>
  );
}

4.5 Design Lab 可视化主题定制
Arco Design 提供了 Design Lab 可视化主题配置平台，设计师和开发者可以协作完成品牌主题定制。通过 Design Lab，你可以：

可视化调整主题变量，实时预览效果

导出主题配置代码，直接集成到项目中

管理多个主题版本，支持 A/B 测试

一键生成 Figma 设计资源

五、国际化

5.1 ConfigProvider 国际化
Arco Design 通过 ConfigProvider 组件统一管理国际化配置，支持多种语言切换。

import { ConfigProvider, Button, DatePicker, Pagination } from '@arco-design/web-react';
import enUS from '@arco-design/web-react/es/locale/en-US';
import zhCN from '@arco-design/web-react/es/locale/zh-CN';
import { useState } from 'react';

function I18nDemo() {
  const [locale, setLocale] = useState(zhCN);

  const switchLanguage = () => {
    setLocale(locale === zhCN ? enUS : zhCN);
  };

  return (
    <ConfigProvider locale={locale}>
      <Button onClick={switchLanguage}>
        {locale === zhCN ? 'Switch to English' : '切换到中文'}
      </Button>
      <DatePicker />
      <Pagination total={100} />
    </ConfigProvider>
  );
}

Arco Design 内置了丰富的语言支持，包括简体中文、英文、日语、韩语、法语、德语、西班牙语等主流语言。你还可以通过自定义 locale 对象来扩展新的语言支持。
5.2 RTL 视图支持
Arco Design 支持 RTL（从右到左）布局，适配阿拉伯语、希伯来语等语言。

import { ConfigProvider } from '@arco-design/web-react';

function RTLDemo() {
  return (
    <ConfigProvider rtl>
      <div style={
  { direction: 'rtl' }}>
        {/* 组件将自动适配 RTL 布局 */}
        <Button type="primary">按钮</Button>
        <Input placeholder="输入框" />
      </div>
    </ConfigProvider>
  );
}

开启 rtl 属性后，所有组件的布局方向会自动适配从右到左的阅读习惯，包括按钮图标方向、输入框光标位置、下拉菜单弹出方向等。
来源：
https://aescc.cn/