platforms/.agents/skills/arco-design-vue/references/overview/theming.md

name, description, user-invocable

name	description	user-invocable
arco-vue-theming	Arco Design Vue 主题指南。用于 CSS 引入、Less 变量定制、组件 token、Vite/Webpack `modifyVars`、主题包和暗黑模式。	false

主题定制

来源文档：

• 上游 packages/arco-vue-docs/docs/theme.zh-CN.md
• 上游 packages/arco-vue-docs/docs/dark.zh-CN.md

样式引入

完整 CSS 引入最简单：

import '@arco-design/web-vue/dist/arco.css';

需要定制 Less 变量时，引入 Less 样式：

import '@arco-design/web-vue/dist/arco.less';

手动按需引入组件样式：

import '@arco-design/web-vue/es/button/style/css.js';

Less 变量

全局变量位于 @arco-design/web-vue/es/style/theme/global.less，组件级 token 位于类似 @arco-design/web-vue/es/button/style/token.less 的路径。

Vite 示例：

export default {
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          'arcoblue-6': '#f85959',
        },
        javascriptEnabled: true,
      },
    },
  },
};

Webpack 示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: {
                  'arcoblue-6': '#f85959',
                },
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
};

暗黑模式

Arco Design Vue 通过 body 上的 arco-theme 属性切换主题。

document.body.setAttribute('arco-theme', 'dark');
document.body.removeAttribute('arco-theme');

把主题状态集中在布局 store 或 useTheme composable 中，不要让多个无关组件直接修改 body 属性。