docs(agents): add design references

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

@@ -0,0 +1,92 @@
+---
+name: arco-vue-theming
+description: "Arco Design Vue 主题指南。用于 CSS 引入、Less 变量定制、组件 token、Vite/Webpack `modifyVars`、主题包和暗黑模式。"
+user-invocable: false
+---
+
+# 主题定制
+
+来源文档：
+- 上游 `packages/arco-vue-docs/docs/theme.zh-CN.md`
+- 上游 `packages/arco-vue-docs/docs/dark.zh-CN.md`
+
+## 样式引入
+
+完整 CSS 引入最简单：
+
+```ts
+import '@arco-design/web-vue/dist/arco.css';
+```
+
+需要定制 Less 变量时，引入 Less 样式：
+
+```ts
+import '@arco-design/web-vue/dist/arco.less';
+```
+
+手动按需引入组件样式：
+
+```ts
+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 示例：
+
+```ts
+export default {
+  css: {
+    preprocessorOptions: {
+      less: {
+        modifyVars: {
+          'arcoblue-6': '#f85959',
+        },
+        javascriptEnabled: true,
+      },
+    },
+  },
+};
+```
+
+Webpack 示例：
+
+```js
+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` 属性切换主题。
+
+```ts
+document.body.setAttribute('arco-theme', 'dark');
+document.body.removeAttribute('arco-theme');
+```
+
+把主题状态集中在布局 store 或 `useTheme` composable 中，不要让多个无关组件直接修改 `body` 属性。