From 603d22d8777745be87e1689c868376db299c6121 Mon Sep 17 00:00:00 2001
From: lutinglt <lutinglt@users.noreply.github.com>
Date: Tue, 5 Aug 2025 15:55:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=85=8B=E9=9A=86=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E8=87=AA=E5=AE=9A=E4=B9=89=E9=95=BF=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/release-template.md |  4 ++++
 .github/release.md          |  8 ++++++++
 README.md                   | 33 +++++++++++++++++++++++++++++++++
 src/types/vars.ts           |  7 +++++++
 styles/components/clone.ts  |  6 ++++--
 5 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/.github/release-template.md b/.github/release-template.md
index 9f93043..f292779 100644
--- a/.github/release-template.md
+++ b/.github/release-template.md
@@ -1,3 +1,7 @@
+## ✨ Feat
+
+#### CSS 变量
+
 ## 🌈 Style
 
 #### 更符合 GitHub 风格
diff --git a/.github/release.md b/.github/release.md
index 674ea7f..297a1ba 100644
--- a/.github/release.md
+++ b/.github/release.md
@@ -1,3 +1,11 @@
+## ✨ Feat
+
+🎉 支持自定义 CSS 变量设置主题样式
+
+#### CSS 变量
+
+- 支持克隆菜单自定义长度
+
 ## 🌈 Style
 
 - 分支菜单项目添加动画效果
diff --git a/README.md b/README.md
index 9bbac52..73147bb 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,35 @@ THEMES = gitea-dark, github-dark
 详细请查看 Gitea 文档
 [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
 
+## 自定义 CSS 变量
+
+可以根据自己的偏好自定义主题的一部分样式
+
+### 使用方法
+
+在主题的 CSS 文件中头部或尾部添加以下代码
+
+```css
+:root {
+  --custom-clone-menu-width: 150px;.
+  ...
+}
+```
+
+>[!IMPORTANT]
+>
+>请确保在 `:root` 选择器中添加自定义变量，否则无法生效
+>
+>变量之间用 `;` 分隔
+>
+>建议自定义变量放在单独的文件中, 通过 shell 命令等方式追加到主题文件中
+
+### CSS 变量
+
+| 变量名                    | 描述         | Gitea (默认值) | Github | 推荐  | 最小值 | 最大值 |
+| :------------------------ | :----------- | :------------- | :----- | :---- | :----- | :----- |
+| --custom-clone-menu-width | 克隆菜单宽度 | 232px          | 332px  | 200px | 150px  | 400px  |
+
 ## 截图
 
 ![仓库](screenshots/repo.png)
@@ -45,3 +74,7 @@ THEMES = gitea-dark, github-dark
 ## 贡献
 
 欢迎提交 Issue 或 Pull Request
+
+```
+
+```
diff --git a/src/types/vars.ts b/src/types/vars.ts
index f4d78aa..b318ce7 100644
--- a/src/types/vars.ts
+++ b/src/types/vars.ts
@@ -35,7 +35,14 @@ const otherVars = {
   },
 };
 
+const customVars = {
+  custom: {
+    cloneMenuWidth: "custom-clone-menu-width",
+  },
+};
+
 export const themeVars = createGlobalThemeContract(vars, varMapper);
 export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper);
+export const customThemeVars = createGlobalThemeContract(customVars, varMapper);
 
 export { css } from "@linaria/core";
diff --git a/styles/components/clone.ts b/styles/components/clone.ts
index 6e917e4..1c65558 100644
--- a/styles/components/clone.ts
+++ b/styles/components/clone.ts
@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars, customThemeVars } from "src/types/vars";
 
 // 克隆按钮的弹窗
 export const clone = css`
@@ -52,7 +52,9 @@ export const clone = css`
           border: 1px solid ${themeVars.color.light.border};
           border-radius: ${otherThemeVars.border.radius};
           font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
-          width: 332px;
+          min-width: 150px;
+          max-width: 400px;
+          width: ${customThemeVars.custom.cloneMenuWidth};
           &:hover {
             border: 1px solid ${themeVars.color.light.border};
             border-radius: ${otherThemeVars.border.radius};