diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md deleted file mode 100644 index df0f5487..00000000 --- a/.github/CHANGELOG.md +++ /dev/null @@ -1,17 +0,0 @@ -### ⚠️ Breaking Changes - -### 🎉 - -### ✨ Feature - -#### CSS Variable - -### 🌈 Style - -#### Adaptation for version 1.26 - -#### More GitHub-like style - -##### Template File - -### 🐞 Fix diff --git a/.github/ISSUE_TEMPLATE/1-style-bug-report.yml b/.github/ISSUE_TEMPLATE/1-style-bug-report.yml index b6f08f97..fa1d5adc 100644 --- a/.github/ISSUE_TEMPLATE/1-style-bug-report.yml +++ b/.github/ISSUE_TEMPLATE/1-style-bug-report.yml @@ -7,9 +7,9 @@ body: value: | !!! Please read the readme and ensure that the theme is used correctly before submitting !!! 1. Please use the latest theme and refresh the page with Ctrl+F5 to see if the Bug has disappeared. - 2. Please check the CHANGELOG.md file in the project root directory for descriptions of fixes related to this Bug. + 2. Please check the project's release notes for descriptions of fixes related to this bug. 3. If there are related descriptions, you can check if the Bug has been fixed by compiling the development version yourself in the README.md. - 4. Please check if there is the same error in the default Gitea theme, confirming that it is not a theme problem. + 4. Please check if there is the same error in the default Forgejo theme, confirming that it is not a theme problem. - type: input id: theme-version attributes: @@ -21,10 +21,10 @@ body: validations: required: true - type: input - id: gitea-version + id: forgejo-version attributes: - label: Gitea Version - description: What version of Gitea are you using? + label: Forgejo Version + description: What version of Forgejo are you using? placeholder: ex. 1.24.5 validations: required: true @@ -76,10 +76,10 @@ body: validations: required: false - type: textarea - id: gitea-screenshot + id: forgejo-screenshot attributes: - label: Screenshot of the default Gitea theme - description: Please upload a screenshot of the default Gitea theme. + label: Screenshot of the default Forgejo theme + description: Please upload a screenshot of the default Forgejo theme. validations: required: false - type: textarea diff --git a/.github/actions/build-release-assets/package.sh b/.github/actions/build-release-assets/package.sh index 3c3a77c1..65e68aa0 100644 --- a/.github/actions/build-release-assets/package.sh +++ b/.github/actions/build-release-assets/package.sh @@ -26,4 +26,3 @@ tar -zcf dist/theme-github.tar.gz --remove-files dist/theme-github-*.css tar -zcf dist/theme-github-templates.tar.gz templates tar -zcf dist/theme-github-fonts.tar.gz -C dist assets/fonts -tar -zcf dist/theme-github-translations.tar.gz --remove-files dist/options diff --git a/.github/assets/screenshots/dashboard.png b/.github/assets/screenshots/dashboard.png new file mode 100644 index 00000000..0c5f9a2d Binary files /dev/null and b/.github/assets/screenshots/dashboard.png differ diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index bb1b65b3..f148bfed 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -443,7 +443,6 @@ outputs static CSS strings. │ ├── buildPrimerTSToken.ts # Generate primer/ TypeScript tokens from @primer/primitives │ ├── syncTheme.ts # Sync build artifacts to remote Gitea instance │ ├── updateGitea.ts # Update Gitea reference files -│ ├── translate.ts # Generate localization/translation files │ └── version.ts # Version management ├── dist/ # Build output (30+ CSS files) └── templates/ # Optional Gitea Go template overrides @@ -601,6 +600,4 @@ For pixel-perfect GitHub color matching, use the `github` path with direct Prime - [CONTRIBUTING.md](CONTRIBUTING.md) — Development environment setup and contribution guide - [README.md](README.md) — User-facing installation and usage -- [README_CN.md](README_CN.md) — Chinese user installation and usage - [primer/README.md](primer/README.md) — Auto-generated Primer token documentation -- [CHANGELOG.md](CHANGELOG.md) — Release history diff --git a/ARCHITECTURE_CN.md b/ARCHITECTURE_CN.md deleted file mode 100644 index 2c1283d5..00000000 --- a/ARCHITECTURE_CN.md +++ /dev/null @@ -1,586 +0,0 @@ -# 架构设计：Gitea GitHub Theme - -## 项目概述 - -Gitea GitHub Theme 是一个构建时 CSS 生成框架，为 [Gitea](https://github.com/go-gitea/gitea) 自托管代码平台产出静态 -`.css` -主题文件。项目以设计令牌和颜色定义为输入，通过分层管道转换，最终输出 30+ 个压缩后的 CSS 文件，覆盖 7 个主题系列（default、colorblind、tritanopia、pink、gitea、catppuccin、high-contrast）。 - -**核心原则：** 开发时享受完整的类型安全和 CSS-in-JS 开发体验，浏览器端交付纯静态 CSS，零运行时开销。 - ---- - -## 架构分层 - -``` -┌──────────────────────────────────────────────────────────────┐ -│ 主题配置层 │ -│ theme.config.ts: 声明主题系列、颜色类型、显示名称、无障碍元信息 │ -└──────────────────────────┬───────────────────────────────────┘ - │ -┌──────────────────────────▼───────────────────────────────────┐ -│ 颜色定义层 │ -│ ┌──────────┐ ┌──────────────┐ ┌───────────────────┐ │ -│ │ primer/ │ │ themes/ │ │ themes/catppuccin │ │ -│ │ (自动生成│ │ github.ts │ │ .ts │ │ -│ │ 的 Primer│ │ gitea*.ts │ │ │ │ -│ │ 设计令牌)│ │ │ │ │ │ -│ └────┬─────┘ └──────┬───────┘ └─────────┬─────────┘ │ -│ │ │ │ │ -│ primer2GitHubColor defineTheme catppuccin2ThemeColor │ -│ │ │ │ │ -│ ▼ ▼ ▼ │ -│ GitHubColor Theme ThemeColor │ -│ (colorType: │ -│ "github") │ -└──────────────────────────┬───────────────────────────────────┘ - │ -┌──────────────────────────▼───────────────────────────────────┐ -│ 颜色转换层 │ -│ src/palette/ │ -│ ┌────────────┐ ┌────────────┐ ┌──────────────────┐ │ -│ │ github.ts │ │ theme.ts │ │ gitea.ts │ │ -│ │ GitHubColor│ │ ThemeColor │ │ GiteaColor │ │ -│ │ → │ │ → │ │ → │ │ -│ │ ThemeColor │ │ ThemeVars │ │ ThemeVars │ │ -│ └────────────┘ └────────────┘ └──────────────────┘ │ -│ │ -│ 统一输出: ThemeVars (CSS 变量的扁平键值映射) │ -└──────────────────────────┬───────────────────────────────────┘ - │ -┌──────────────────────────▼───────────────────────────────────┐ -│ 核心框架层 │ -│ src/core/ │ -│ ┌──────────────┐ ┌──────────┐ ┌───────────────────┐ │ -│ │ theme.ts │ │ css.ts │ │ chroma.ts │ │ -│ │ createTheme()│ │ css() │ │ codemirror.ts │ │ -│ │ defineTheme()│ │cssCombine│ │ meta.ts │ │ -│ └──────┬───────┘ │cssStyle()│ └───────────────────┘ │ -│ │ └────┬─────┘ │ -│ │ │ │ -│ vanilla-extract 适配器 (src/vanilla-extract.ts) │ -│ ┌──────────────────────────────────────────────────┐ │ -│ │ setAdapter() → 拦截 appendCss, │ │ -│ │ registerClassName, registerComposition │ │ -│ │ → 在构建时将全部 CSS 序列化为字符串 │ │ -│ └──────────────────────────────────────────────────┘ │ -└──────────────────────────┬───────────────────────────────────┘ - │ -┌──────────────────────────▼───────────────────────────────────┐ -│ 样式覆写层 │ -│ styles/ │ -│ ┌──────────┐ ┌──────────────┐ ┌──────────────────┐ │ -│ │ public/ │ │ components/ │ │ templates/ │ │ -│ │ (基础 │ │ (页面级别 │ │ (模板专属样式) │ │ -│ │ 元素) │ │ 样式) │ │ │ │ -│ └──────────┘ └──────────────┘ └──────────────────┘ │ -│ common/ (可复用 CSS 片段: 按钮、标签、动画等) │ -│ │ -│ 每个文件使用 css`...` 模板字面量 │ -│ → 在导出边界用 cssCombine() 拼接 → 单个 CSS 字符串 │ -└──────────────────────────┬───────────────────────────────────┘ - │ -┌──────────────────────────▼───────────────────────────────────┐ -│ 构建管道 │ -│ src/vite-plugin/index.ts (Vite 插件) │ -│ │ -│ config() 钩子: │ -│ 1. 动态导入 theme.config.ts │ -│ 2. 解析所有主题条目 + 生成 auto 自动主题 │ -│ │ -│ generateBundle() 钩子: │ -│ 1. 导入 styles/ → CSS 字符串 (public + components) │ -│ 2. 对每个主题条目: │ -│ a. compileCSS(createThemeMetaInfo + createTheme) │ -│ b. lightningcss.transform() → 压缩 │ -│ c. 追加样式覆写 (仅非 auto 主题) │ -│ d. emitFile 输出 .css 资源 │ -│ 3. 对 auto 主题: 生成 @import 声明 │ -└──────────────────────────┬───────────────────────────────────┘ - │ - ▼ - dist/theme-github-*.css -``` - ---- - -## 核心设计模式 - -### 1. Vanilla-Extract 适配器劫持 - -**解决的问题：** -Vanilla-extract 是一个零运行时 CSS-in-JS 库，在构建时通过其 Vite/esbuild 插件生成静态 CSS 文件。但 Gitea 主题需要单文件 CSS 输出，并且需要对主题生成过程进行编程控制（每个主题一个输出文件、自动生成 auto 主题等）。 - -**方案：** 绕过 vanilla-extract 的默认插件，直接使用其底层适配器 API。 - -在 [src/vanilla-extract.ts](src/vanilla-extract.ts) 中： - -```typescript -export function compileCSS(compileFn: () => void): string { - // 1. 安装自定义适配器，将 CSS 对象捕获到数组 - setAdapter({ - appendCss: css => capturedCssObjs.push(css), - registerClassName: className => localClassNames.add(className), - registerComposition: composition => composedClassLists.push(composition), - // ... 其他回调实现为空操作 - }); - - // 2. 设置文件作用域用于调试 - setFileScope(getCallerInfo(1)); - - // 3. 执行调用方的 vanilla-extract API 调用 - compileFn(); - - // 4. 拆除适配器 - endFileScope(); - removeAdapter(); - - // 5. 将捕获的 CSS 对象序列化为字符串 - return transformCss({ - localClassNames: Array.from(localClassNames), - composedClassLists, - cssObjs: capturedCssObjs, - }).join("\n"); -} -``` - -**工作原理：** - -1. `compileCSS` 包装一个同步函数，该函数内部调用 vanilla-extract - API（`createGlobalTheme`、`globalStyle`、`globalKeyframes` 等） -2. 自定义适配器拦截所有 CSS 生成调用，将它们捕获到内存数组 -3. 函数执行完毕后，`transformCss()` 将捕获的对象序列化为 CSS 字符串 -4. 适配器被拆除，不留下任何全局副作用 - -**安全性保证：** 每次 `compileCSS` 调用完全自包含：安装 → 捕获 → 序列化 → 拆除。调用之间无状态泄漏。 - -**关键洞察：** Vanilla-extract 的 `createGlobalThemeContract` + `createGlobalTheme` 完全适配此模式——它们仅在 -`createGlobalTheme` 调用期间产生 CSS，而该调用恰好发生在我们的捕获范围内。 - -### 2. 三条颜色输入管道 - -**解决的问题：** -不同的颜色主题来源有不同的数据结构。Primer 设计令牌（来自 GitHub）有数百个嵌套键。Catppuccin 有自己的调色板结构。Gitea 的原生格式使用扁平结构。需要同时支持这三种。 - -**方案：** 三条转换路径，全部汇聚到 `ThemeVars`： - -``` -Primer 令牌 ──→ GitHubColor ──→ ThemeColor ──→ ThemeVars -Catppuccin flavor ────────────→ ThemeColor ──→ ThemeVars -GiteaColor ──────────────────────────────────→ ThemeVars -``` - -每条路径有不同的复杂度要求： - -| 路径 | 适用场景 | 复杂度 | 示例 | -| -------- | ------------------------- | ---------------------------- | --------------------------- | -| `github` | 完整 Primer 令牌合规 | 高（数百个映射键） | Default、色盲、高对比度主题 | -| `theme` | 15 个基础色定义自定义主题 | 低（自动派生 200+ CSS 变量） | Catppuccin、社区主题 | -| `gitea` | Gitea 原生颜色格式 | 中（直接映射） | Gitea 兼容主题 | - -**设计理由：** `theme` -路径是"入门路径"——贡献者只需定义 15 个语义色（`red`、`orange`、`yellow`、……、`white`）加上 primary 和 secondary。框架自动计算： - -- 7 级亮度变体（dark-1 到 dark-7、light-1 到 light-7） -- 9 级透明度变体（alpha-10 到 alpha-90） -- Badge 颜色及其 hover 状态 -- 消息颜色（error/success/warning/info） -- ANSI 控制台颜色 -- 方向感知（暗/亮主题下的缩放方向反转） - -实现在 [src/palette/theme.ts](src/palette/theme.ts) 的 `theme2ThemeVars()` 函数中。 - -### 3. CSS 变量命名约定 - -**解决的问题：** Gitea 期望特定命名模式的 CSS 变量（`--color-primary-dark-1`、`--color-red-badge-bg` -等）。我们在 TypeScript 中需要类型安全的访问方式（`themeVars.color.primary.dark.num1`）。 - -**方案：** 使用 vanilla-extract 的 `createGlobalThemeContract` 配合自定义 `varMapper`。 - -在 [src/types/vars.ts](src/types/vars.ts) 中： - -```typescript -function varMapper(prefix: string | null = null) { - return (value: string | null, path: string[]) => { - if (value === null) { - // 从路径自动生成名称: ["color","primary","dark","num1"] → "color-primary-dark-1" - path = path.filter(item => item !== "self"); // 移除 "self" 键 - path = path.map(item => item.replace(/^num/, "")); // 去掉 "num" 前缀 - value = path.join("-"); - } - if (prefix) value = `${prefix}-${value}`; - return value; - }; -} -``` - -由此创建了双向映射： - -| TypeScript 访问 | CSS 变量 | -| ---------------------------------------------- | -------------------------------------- | -| `themeVars.color.primary.self` | `--color-primary` | -| `themeVars.color.primary.dark.num1` | `--color-primary-dark-1` | -| `themeVars.github.button.primary.bgColor.rest` | `--github-button-primary-bgColor-rest` | -| `syntaxVars.keyword` | `--color-syntax-keyword` | -| `customThemeVars.cloneMenuWidth` | `--custom-clone-menu-width` | - -### 4. 构建时 CSS 语法校验 - -**解决的问题：** 模板字面量中的 CSS 可能包含语法错误，这些错误只有到浏览器运行时才会显现。 - -**方案：** `css()` 模板标签在构建时使用 lightningcss 校验 CSS 语法。 - -在 [src/core/css.ts](src/core/css.ts) 中： - -```typescript -export function css(strings: TemplateStringsArray, ...values: CSSInterpolation[]): CSSString { - const result = strings.reduce((acc, s, i) => acc + s + String(values[i] ?? ""), ""); - // 构建时校验: lightningcss 解析并报告语法错误 - transform({ filename: getCallerInfo(1), code: Buffer.from(result) }); - return result as CSSString; -} -``` - -如果开发者编写了无效 CSS，构建会立即失败，并附带指向问题模板字面量的 `文件:行号` -信息。这能捕捉到原本只能通过浏览器 DevTools 才能发现的错误。 - -**权衡：** 每次 `css` 模板调用都会执行一次 -`transform()`。对于约 60 个样式文件，这会为初始构建增加约 200ms（一次性开销，后续由 Bun 的模块缓存加速）。 - ---- - -## Vite 构建管道 - -构建由自定义 Vite 插件在 [src/vite-plugin/index.ts](src/vite-plugin/index.ts) 中编排： - -### 阶段一：配置解析（`config` 钩子） - -1. 通过 Bun 原生 TypeScript + package exports 自引用（`@lutinglt/gitea-github-theme/theme.config.ts`）动态导入 - `theme.config.ts` -2. 遍历每个主题系列，为每个主题变体生成条目（dark、light、soft-dark、frappe、macchiato 等） -3. 当系列同时具有 dark 和 light 变体时，自动生成 `auto` 主题条目 -4. 创建占位入口文件（Vite 需要至少一个输入） - -### 阶段二：CSS 生成（`generateBundle` 钩子） - -对每个 **非 auto 主题**： - -1. 调用 `compileCSS()`，传入一个函数，该函数内部： - - 创建 Gitea 主题元信息（`createThemeMetaInfo`）——设置 - `--theme-color-scheme`、`--theme-display-name`、`--theme-colorblind-type` - - 创建主题 CSS 变量（`createTheme`）——生成所有 `--color-*` 和 `--github-*` 变量、全局样式、关键帧动画、代码高亮 -2. 捕获的 CSS 字符串通过 `lightningcss.transform()` 进行压缩 -3. 追加公共样式覆写（`styles/`） - -对每个 **auto 主题**： - -1. 生成 `@import` 声明，配合 `prefers-color-scheme` 媒体查询，引用对应的暗/亮主题文件 -2. 包含主题元信息，供 Gitea 识别为自动颜色主题 - -### CSS 输出结构 - -``` -theme-github-dark.css: - ├── @keyframes (overlayAppear, overlayAppearDown, overlayAppearUp) - ├── gitea-theme-meta-info { --theme-color-scheme: dark; ... } - ├── :root { --theme-version: "1.26.2.260605"; --is-dark-theme: true; ... } - ├── :root { --color-primary: #4493f8; --color-primary-contrast: ... } - ├── ... (200+ 个 CSS 变量声明) - ├── .chroma { ... } (代码语法高亮) - ├── .code-editor-container { ... } (CodeMirror 高亮) - └── <公共样式覆写> (~60KB 单行压缩) - -theme-github-auto.css: - ├── @import "./theme-github-dark.css" (prefers-color-scheme: dark); - ├── @import "./theme-github-light.css" (prefers-color-scheme: light); - └── gitea-theme-meta-info { --theme-color-scheme: auto; ... } -``` - ---- - -## 颜色系统深入 - -### 颜色缩放计算 - -[src/functions/color.ts](src/functions/color.ts) 中的 `scaleColorLight()` 实现了 Sass `color.scale()` 算法： - -``` -变暗: newL = currentL × (1 + scale/100) [scale < 0] -变亮: newL = currentL + (1 - currentL) × (scale/100) [scale > 0] -``` - -这是**比例缩放**，并非线性偏移。其意义在于： - -- `color.scale(#000000, $lightness: 50%)` → 50% 灰色（而非"比黑色暗 50%"，那仍然是黑色） -- `color.scale(#ffffff, $lightness: -50%)` → 50% 灰色（而非"比白色亮 50%"，那仍然是白色） -- 比例方法确保在亮度两端都能产生视觉上有意义的变化 - -### ThemeColor → ThemeVars 派生 - -[src/palette/theme.ts](src/palette/theme.ts) 中的 `theme2ThemeVars()` 接收 -`ThemeColor`（15 个基础色 + 元数据），派生完整的 `ThemeVars`（200+ 个 CSS 变量值）： - -1. **主色阶（Primary scale）**：7 个暗色变体、7 个亮色变体、9 个透明度变体、hover/active 状态——全部从一个 hex 颜色生成 -2. **副色阶（Secondary scale）**：13 个暗色变体、4 个亮色变体、9 个透明度变体、按钮 hover/active 状态 -3. **命名颜色**（15 个基础色中的 13 个）：每个生成 self/light/dark-1/dark-2/badge-self/badge-bg/badge-hover-bg -4. **语义消息色**：bg/border/text，配合 rgba 透明度和饱和度调整 -5. **ANSI 颜色**：从命名色映射的 16 色调色板 -6. **方向感知**：`isDarkTheme` 标志反转缩放方向——暗色主题中"dark"变体走向更亮的方向（为保持对比度） - ---- - -## 样式覆写策略 - -### 选择器优先级层级 - -样式覆写使用 Gitea 现有的 DOM 选择器。覆写策略遵循优先级阶梯： - -1. **颜色变量**——所有颜色引用主题中的 CSS 变量（绝不硬编码 hex 值） -2. **元素级覆写**——基础元素如 `.ui.button`、`#navbar`、`input` -3. **组件级覆写**——页面特定区域：heatmap、issues、actions、仓库页面 -4. **`!important` 逃离**——仅在 Gitea 通过内联 `style` 属性设置颜色时使用（如热力图贡献方块） - -### cssCombine() 显式组合 - -样式通过 `cssCombine()` 调用树组合在一起： - -``` -styles/index.ts - ├── public/index.ts (基础元素、按钮、输入框、下拉菜单、菜单、表格) - ├── components/index.ts (导航栏、热力图、议题、仓库文件、Actions 等) - └── templates/index.ts (模板特定样式) -``` - -每个叶子模块导出 `default cssCombine(...)`，将 CSS 片段串联在一起。这种显式组合使依赖关系图可见，避免了 CSS `@import` 或 -`@use` 的隐式排序问题。 - -### cssStyle() 可复用片段 - -[src/core/css.ts](src/core/css.ts) 中的 `cssStyle()` 允许提取可复用的 CSS 属性集，同时保留 vanilla-extract 的类型检查： - -```typescript -// 在 styles/common/button.ts 中: -export const primaryButtonStyle = cssStyle({ - color: themeVars.github.button.primary.fgColor.rest, - backgroundColor: themeVars.github.button.primary.bgColor.rest, - borderColor: themeVars.github.button.primary.borderColor.rest, - boxShadow: themeVars.github.shadow.resting.small, -}); - -// 在 styles/public/button.ts 中: -const baseButton = css` - .ui.primary.button { - ${primaryButtonStyle} - } -`; -``` - -这在最终输出静态 CSS 字符串的系统中保留了类型安全（vanilla-extract 校验属性名和值类型）。 - ---- - -## 目录结构 - -``` -├── theme.config.ts # 主题系列声明（框架入口点） -├── src/ -│ ├── index.ts # 公共 API 导出 -│ ├── core/ # 核心框架 -│ │ ├── theme.ts # createTheme、defineTheme（颜色 → CSS 变量） -│ │ ├── css.ts # css()、cssCombine()、cssStyle() -│ │ ├── chroma.ts # Chroma（服务端）语法高亮 -│ │ ├── codemirror.ts # CodeMirror（客户端）语法高亮 -│ │ ├── meta.ts # Gitea 主题元信息（color scheme, display name） -│ │ └── types.d.ts # MapLeafNodes、CSSVarFunction、Tokens -│ ├── palette/ # 颜色转换与变换 -│ │ ├── theme.ts # ThemeColor → ThemeVars（简化 API） -│ │ ├── github.ts # GitHubColor → ThemeColor（Primer 路径） -│ │ ├── gitea.ts # GiteaColor → ThemeVars（原生路径） -│ │ ├── catppuccin.ts # CatppuccinFlavor → ThemeColor -│ │ ├── primer.ts # Primer 令牌 → GitHubColor / Chroma / CodeMirror -│ │ ├── display.ts # Display color scale → GitHubColor 覆写 -│ │ └── catppuccinSyntax.ts # Catppuccin 语法高亮 -│ ├── functions/ # 工具函数 -│ │ ├── color.ts # scaleColorLight（Sass color.scale）+ rgba 转换 -│ │ └── var.ts # extractVarName（CSS 变量名提取） -│ ├── types/ # 类型定义与 CSS 变量契约 -│ │ ├── color/ # 颜色结构定义（primary, secondary, named, 等） -│ │ └── vars.ts # createGlobalThemeContract + varMapper -│ ├── vite-plugin/ # 构建工具 -│ │ ├── index.ts # 主 Vite 插件 -│ │ ├── themeConfig.ts # defineThemeConfig、TypeScript 类型 -│ │ └── utils.ts # buildFullThemeName、buildFullDisplayName -│ ├── vanilla-extract.ts # 适配器劫持（compileCSS、captureStyle） -│ ├── selectors.ts # 共享 CSS 选择器（root、chroma、codeMirror、emoji） -│ └── utils.ts # deepOverride、getCallerInfo -├── styles/ # CSS 样式覆写 -│ ├── common/ # 可复用 CSS 片段（按钮、标签、动画） -│ ├── public/ # 基础元素（按钮、输入框、下拉菜单、菜单、表格） -│ ├── components/ # 页面特定样式（导航栏、热力图、仓库、议题、Actions） -│ └── templates/ # 模板特定样式 -├── themes/ # 颜色主题定义 -│ ├── github.ts # GitHub 主题颜色（来自 Primer 令牌） -│ ├── giteaDark.ts # Gitea 暗色主题颜色（原生格式） -│ ├── giteaLight.ts # Gitea 亮色主题颜色（原生格式） -│ └── catppuccin.ts # Catppuccin 主题颜色 -├── primer/ # 自动生成的 Primer 设计令牌（来自 @primer/primitives） -├── scripts/ # 构建与工具脚本 -│ ├── buildPrimerTSToken.ts # 从 @primer/primitives 生成 primer/ TypeScript 令牌 -│ ├── syncTheme.ts # 同步构建产物到远程 Gitea 实例 -│ ├── updateGitea.ts # 更新 Gitea 参考文件 -│ ├── translate.ts # 生成本地化/翻译文件 -│ └── version.ts # 版本管理 -├── dist/ # 构建产物（30+ CSS 文件） -└── templates/ # 可选的 Gitea Go 模板覆写 -``` - ---- - -## 关键设计决策与权衡 - -### 决策一：Vanilla-Extract 仅用于 CSS 编写，不用于运行时 - -**选择：** 使用 vanilla-extract 的 `createGlobalTheme`/`createGlobalThemeContract` -进行类型安全的 CSS 变量生成，但通过适配器劫持在构建时序列化为静态 CSS 字符串。 - -**放弃：** 使用 vanilla-extract 内置 Vite 插件（生成按模块拆分的 CSS 文件，不适合单文件主题输出）。 - -**权衡：** 适配器 API 无官方文档，可能在 vanilla-extract 版本间变化。通过锁定 `@vanilla-extract/css` -版本并使用快照测试检测 CSS 输出变化来缓解风险。 - -### 决策二：单文件 CSS 输出 - -**选择：** 每个主题是包含所有变量和所有样式覆写的单个 CSS 文件。 - -**放弃：** 通过 `@import` 链拆分为多个 CSS 文件（Gitea 主题系统每个主题只加载一个 CSS 文件）。 - -**权衡：** 样式覆写在所有主题文件中重复嵌入（约 60KB × 30 个主题 ≈ -1.8MB 冗余）。这是 Gitea 的约束而非设计选择。替代方案（独立 common.css）需要 Gitea 支持多文件主题加载。 - -### 决策三：LightningCSS 同时用于语法校验和输出压缩 - -**选择：** 使用 LightningCSS 进行构建时 CSS 语法校验（在 `css()` 模板标签中）和输出压缩（在 Vite 插件中）。 - -**放弃：** PostCSS（更慢）、esbuild CSS（功能不够完整）、完全不校验。 - -**权衡：** LightningCSS 较宽容——它会从许多语法错误中恢复而非抛出异常。这意味着 `css()` -中的"校验"能捕获严重错误，但可能静默接受某些边缘情况。构建产物快照测试部分补偿了这个不足。 - -### 决策四：仅支持 Bun 运行时 - -**选择：** 要求 Bun ≥ 1.3.14 用于开发和构建。 - -**放弃：** 跨运行时支持（Node + Bun）。 - -**权衡：** -限制了贡献者环境。收益：原生 TypeScript 执行（无 ts-node/esbuild 开销）、一致的堆栈追踪格式（用于调试工具）、更快的构建速度（Bun 原生打包器）。 - -### 决策五：包自引用用于内部导入 - -**选择：** 即使在同一个包内也使用 `@lutinglt/gitea-github-theme/core` 风格的导入，通过 `package.json` 中的 `exports` -映射实现。 - -**放弃：** 全程使用相对路径导入。 - -**权衡：** 需要 `tsconfig.json` 中的 `paths` -映射支持 IDE。收益：无论作为依赖使用还是本地开发，导入路径完全一致；`src/`、`styles/`、`themes/` -三个目录之间没有路径混淆。 - ---- - -## 添加新主题 - -### 快速路径（15 个颜色定义） - -1. 创建 `themes/my-theme.ts`： - -```typescript -import { defineTheme } from "@lutinglt/gitea-github-theme/core"; -import type { ThemeColor, Syntax } from "@lutinglt/gitea-github-theme/core"; - -const themeColor: ThemeColor = { - isDarkTheme: true, - primary: "#8b5cf6", // 强调色（紫色） - primaryContrast: "#ffffff", - secondary: "#27272a", // 边框色 - base: { - red: "#ef4444", - orange: "#f97316", - yellow: "#eab308", - olive: "#84cc16", - green: "#22c55e", - teal: "#14b8a6", - cyan: "#06b6d4", - blue: "#3b82f6", - violet: "#8b5cf6", - purple: "#a855f7", - pink: "#ec4899", - brown: "#a16207", - black: "#18181b", - grey: "#71717a", - gold: "#eab308", - white: "#fafafa", - }, - console: { - /* Actions 日志颜色 */ - }, - diff: { - /* 代码差异颜色 */ - }, - other: { - /* body、text、input、shadow 等 */ - }, - github: { - /* GitHub 专有变量 */ - }, -}; - -const syntaxColor: Syntax = { - /* 代码高亮色 */ -}; - -export default defineTheme({ colorType: "theme", themeColor, syntaxColor }); -``` - -2. 在 `theme.config.ts` 中注册： - -```typescript -{ - themeSeriesName: "my-theme", - themes: { - dark: { theme: myDarkTheme }, - // 可选: 添加 light 变体后自动生成 auto 主题 - light: { theme: myLightTheme }, - }, -} -``` - -3. 运行 `bun bundle`——主题 CSS 将出现在 `dist/` 目录中。 - -### 完整路径（Primer 令牌） - -如需像素级精准的 GitHub 颜色匹配，使用 `github` 路径直接映射 Primer 设计令牌。完整映射参考见 `themes/github.ts` 和 -`src/palette/github.ts`。 - ---- - -## 测试策略 - -| 层级 | 测试类型 | 位置 | 验证内容 | -| -------- | -------- | ---------------------------- | ----------------------------------------------------------------------------------------------- | -| 工具函数 | 单元测试 | `src/utils.test.ts` | `deepOverride` 行为、`getCallerInfo` 堆栈解析 | -| 计算函数 | 单元测试 | `src/functions/*.test.ts` | `scaleColorLight` 数值计算、`extractVarName` 解析 | -| 核心框架 | 单元测试 | `src/core/css.test.ts` | `css()` 校验、`cssCombine()` 组合、`cssStyle()` 序列化 | -| 调色板 | 快照测试 | `src/palette/*.test.ts` | 完整颜色转换链路（Primer → ThemeColor → ThemeVars、Catppuccin → ThemeColor → ThemeVars 等） | -| 调色板 | 结构测试 | `src/palette/github.test.ts` | 颜色值合法性（所有叶子节点都是有效 CSS 颜色字符串）、必需键存在 | -| 构建产物 | 集成测试 | `src/build-output.test.ts` | 预期文件存在、CSS 内容有效性（变量存在、无调试残留、hex 小写、color-scheme 匹配）、文件体积上限 | - ---- - -## 相关文档 - -- [CONTRIBUTING_CN.md](CONTRIBUTING_CN.md) — 开发环境配置与贡献指南 -- [README.md](README.md) — 用户面安装与使用 -- [README_CN.md](README_CN.md) — 中文用户安装与使用 -- [primer/README.md](primer/README.md) — 自动生成的 Primer 令牌说明 -- [CHANGELOG.md](CHANGELOG.md) — 发布历史 diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 7a534b1c..00000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,29 +0,0 @@ -### 🌈 Style - -- Reduce the displacement when the button is clicked. -- Remove the shadow of the administrator interface button. -- Fine tune the font size of the dashboard code. - -#### Adaptation for version 1.27 - -- Fine tune the global spacing of elements. -- Fine tune menu item height. -- Fix some border corner issues. -- Fix the horizontal alignment issue of check boxes in some drop-down menus. -- Optimize heat map style. -- Optimize transparency when stacking avatars. -- Synchronize the color of branches in Git commit graph. -- Synchronize PR operation comment panel style. - -#### More GitHub-like style - -- Fine tune the spacing of elements in menu sub items. -- Optimize the spacing of warehouse themes on exploration pages. -- Increase the corner angle of the pop-up window. -- Synchronize the style of the search bar. -- Synchronize workflow summary style. - -### 🐞 Fix - -- Fix filter button overlaps with profile menu. #39 -- Fix the issue where the branch menu under the manual workflow pop-up window is obscured. diff --git a/CONTRIBUTING_CN.md b/CONTRIBUTING_CN.md deleted file mode 100644 index 915845df..00000000 --- a/CONTRIBUTING_CN.md +++ /dev/null @@ -1,185 +0,0 @@ -# 贡献指南 - -## 目录结构 - -| 目录 | 说明 | -| ----------------- | ----------------------------------------- | -| src | 主题生成框架与辅助工具的包 | -| src/core | 主题生成框架（CSS 变量、语法高亮样式） | -| src/functions | 主题辅助工具（颜色计算等） | -| src/palette | 主题调色板（GitHub / Gitea / Catppuccin） | -| src/types | 主题颜色变量类型定义 | -| src/vite-plugin | 主题的 Vite 构建插件 | -| styles | 主题样式覆盖 | -| styles/common | 可复用的 CSS 样式片段 | -| styles/public | 基础元素或跨页面元素的样式 | -| styles/components | 具体页面的样式 | -| styles/templates | 模板专属样式 | -| themes | 颜色主题定义 | -| primer | 自动生成的 Primer 设计令牌 | -| scripts | 构建和工具脚本 | -| templates | Gitea 模板覆盖（可选） | -| gitea | 上游 Gitea 参考文件 | -| screenshots | 主题截图 | - -## 贡献说明 - -不推荐主题样式贡献, 因为 Gitea 主题最终是由单个 CSS 文件提供, 所以会有先后顺序覆盖, 样式影响广泛等问题. - -开发者每个人的思路不一样, 审核很难看出这些问题, 会极大增加维护难度. - -如果确定理解了 Gitea 的样式布局和我的思路, 请先提交 Issue 确认工作量和预期效果, 然后再开发提交 PR. - -如果认为有更好的思路, 欢迎提交 Issue. - -> [!IMPORTANT] -> -> 提交 PR 时, 请执行 `bun commit` - -## 开发环境 - -主题依赖于 Bun 环境, 请确保你的环境中已经安装了 Bun, 推荐使用 Bun 1.3.14 或以上版本. - -请使用 VSCode 开发, 并安装仓库中推荐的插件. - -如果不喜欢多余的插件, 请务必安装 `vscode-styled-components` 插件, 此插件用于渲染和检查 TypeScript 中的 CSS 模板字符串. - -推荐使用 VSCode 1.102.0 版本以上开发, 此版本以上提供 TypeScript 代码中 16 进制颜色的支持. - -## 开发流程 - -### 安装依赖 - -```bash -bun install -``` - -### 设置环境变量 - -在项目根目录下创建 `.env` 文件, 变量参考 `.env.example` 文件. - -环境变量用于发送编译后的主题到服务器上, 快速预览主题. - -### 编译主题 - -编译并同步到远程服务器预览 - -```bash -bun bundle:dev -``` - -编译所有主题 - -```bash -bun bundle -``` - -格式化项目中的代码 - -```bash -bun fmt -``` - -用于 PR, 检查并编译项目中的所有代码并进行格式化 - -```bash -bun commit -``` - -## 开发规范 - -`src`, `styles`, `themes` 为项目的主目录. - -跨模块引用时使用 package exports 路径, 例如 `import { defineTheme } from "@lutinglt/gitea-github-theme/core"` - -同模块内文件互相引用时使用相对路径, 例如 `import { defineTheme } from "./theme"` - -## 颜色主题贡献 - -主题文件命名格式: `主题名称.ts`，配合 `theme.config.ts` 注册使用。 - -如果主题同时有深色和亮色变体, 框架会自动生成 auto 自动颜色主题. - -项目接受自定义主题并会附加到发布的版本中, 但项目所有者不参与维护和审核. - -请在颜色主题文件头部附加自己的作者信息, 方便 Issue 提问者找到你 `@`. - -推荐使用 `defineTheme` 配合 `ThemeColor` 类型来定义主题颜色, 框架会自动计算生成所有 Gitea CSS 变量. - -颜色计算函数可从 `@lutinglt/gitea-github-theme/core` 导入 `scaleColorLight` 和 `rgba`, 或使用 `color2k` -库进行额外颜色操作. - -例: `themes/主题名称.ts` - -```ts -/** - * @author 你的名字 - * @description 主题描述 - */ -import { defineTheme, scaleColorLight } from "@lutinglt/gitea-github-theme/core"; -import type { ThemeColor, Syntax } from "@lutinglt/gitea-github-theme/core"; - -const themeColor: ThemeColor = { - isDarkTheme: true, - primary: "#0969da", - primaryContrast: "#f0f6fc", - secondary: "#30363d", - base: { red: "#f85149", orange: "#d29922" /* ... */ }, - console: { - /* ... */ - }, - diff: { - /* ... */ - }, - other: { - /* ... */ - }, - github: { - /* ... */ - }, -}; - -const syntaxColor: Syntax = { - /* 自定义代码高亮色, 或导入使用其他主题的代码高亮色 */ -}; - -export default defineTheme({ colorType: "theme", themeColor, syntaxColor }); -``` - -如需使用 Gitea 原生颜色格式, 使用 `colorType: "gitea"` 配合 `GiteaColor` 类型: - -```ts -import type { GiteaColor, Syntax } from "@lutinglt/gitea-github-theme/core"; -import { defineTheme } from "@lutinglt/gitea-github-theme/core"; - -const giteaColor: GiteaColor = { - /* ... */ -}; -const syntaxColor: Syntax = { - /* ... */ -}; -export default defineTheme({ colorType: "gitea", themeColor: giteaColor, syntaxColor }); -``` - -完成主题颜色开发后, 在 `theme.config.ts` 中注册主题系列, 编译后在 Gitea 实例中截图放入 `screenshots` -目录, 截图名与主题名相同. (推荐克隆本仓库, 避免泄露个人隐私) - -然后将截图信息添加到 `README.md` 文件中. - -颜色复用案例可参考 `themes/github.ts` 的色盲主题实现. - -## 主题样式贡献 - -主题样式使用 `css()` -模板字符串开发，字符串经过 LightningCSS 处理, 支持 CSS 嵌套语法。请勿使用 SCSS 函数，如需复杂处理请使用 TypeScript 相关库，比如项目自带的 -`color2k` 库。 - -推荐需要复杂处理时，提取逻辑到 `src/functions` 目录下的函数中。 - -主题样式中使用到的所有颜色必须使用颜色变量，导入 `import { themeVars } from "@lutinglt/gitea-github-theme/core"` - -涉及到主题自己的颜色变量 `${themeVars.github.xxx}`，在使用时请将使用的文件和变量添加到对应变量的注释中 -`src/types/color/github` - -小型圆角 (6px) 请使用全局圆角变量，导入 -`import { otherThemeVars } from "@lutinglt/gitea-github-theme/core"`，`${otherThemeVars.border.radius}` diff --git a/README.md b/README.md index ad6df967..fd675632 100644 --- a/README.md +++ b/README.md @@ -1,42 +1,33 @@

-

Gitea GitHub Theme

- - - - +

Forgejo GitHub Theme

+ + + +

-A Gitea theme that pursues GitHub style not only in colors but also in styling details. +A Forgejo theme that pursues GitHub style not only in colors but also in styling details.

-![Dashboard](https://raw.githubusercontent.com/lutinglt/gitea-github-theme/assets/screenshots/dashboard.png) +![Dashboard](.github/assets/screenshots/dashboard.png) -## Forgejo 15 Target +## Compatibility -This fork targets Forgejo `15.0.5+gitea-1.22.0` while retaining the upstream theme engine and design system. Styles -address Forgejo's native markup directly in the existing `styles` pipeline; they do not layer a newer-Gitea selector set -over compatibility aliases. Adapted Go templates live in the top-level `templates` tree. The standard `bun bundle` -command generates all themes in `dist`; generated CSS remains excluded from Git. +This project is a Forgejo-focused fork of [Gitea GitHub Theme](https://github.com/lutinglt/gitea-github-theme). It +retains the upstream theme engine and design system while adapting styles and templates to Forgejo's native markup. -The included templates are version-bound and should not be installed on another Forgejo release without reviewing its -routes and template data. +The standard `bun bundle` command generates all themes in `dist`; generated CSS remains excluded from Git. The included +templates are version-bound and should not be installed on another Forgejo release without reviewing its routes and +template data. -## Version Number Explanation +Releases are not tied to a Forgejo version number. Each release states the supported Forgejo major version and the exact +Forgejo version used for testing in its release notes. -The theme version number is kept consistent with the Gitea version number - -Gitea version number format: `1.major.minor` - -Theoretically, minor version changes in Gitea do not modify the frontend layout, so the minor version of the theme is -applicable to all Gitea versions with the same major version number. - -For example: Theme version `1.24.5` is applicable to Gitea versions `>=1.24.0` `<1.25.0` - -Only the latest released Gitea version is maintained. Issues and PRs for other older theme versions will not be -accepted. +This project is licensed under the Apache License 2.0. See [LICENSE](LICENSE) and [NOTICE](NOTICE) for the upstream +copyright and attribution information. ## Installation @@ -45,19 +36,28 @@ accepted. > Because the project uses new CSS features, ensure styles are applied correctly by keeping Chrome/Edge >= 120, > Firefox >= 121, Safari >= 16.5 -1. Download the latest CSS theme file from the release page and place it in the `data/gitea/public/assets/css` directory - (This directory may not be available by default and needs to be manually created) -2. Download `theme-github-fonts.tar.gz` from the same release and extract its `assets/fonts` directory into - `data/gitea/public`. This supplies the Mona Sans variable font used by GitHub; the packaged SIL Open Font License is - retained beside the font. -3. Modify `data/gitea/conf/app.ini` and append the CSS filename without the `theme-` prefix to the end of `THEMES` under - the `[ui]` section -4. Restart Gitea -5. Check the theme in the settings +Choose one of the following ways to obtain the assets: + +- Download the packaged archives from the [latest release](https://github.com/whereareiam/forgejo-github-theme/releases/latest). +- Run the [Development Build](https://github.com/whereareiam/forgejo-github-theme/actions/workflows/development-build.yml) + workflow manually and download its artifact. +- Build the assets locally with the commands in [Using the Development Version](#using-the-development-version-of-the-theme). + +Install the resulting files using your Forgejo data directory (commonly `data/gitea` in the official container): + +1. Extract the CSS archive(s), then place the contained `*.css` files in `/public/assets/css` (create the + directory if necessary). +2. Extract `theme-github-fonts.tar.gz` into `/public`. This supplies the Mona Sans variable font; its SIL + Open Font License is included beside the font. +3. Extract the optional `theme-github-templates.tar.gz` archive into ``. +4. Modify `/conf/app.ini` and append the CSS filename without the `theme-` prefix to `THEMES` under + the `[ui]` section. +5. Restart Forgejo. +6. Select the theme in the Forgejo settings. Example: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES` -Example `data/gitea/conf/app.ini`: +Example `/conf/app.ini`: ```ini [ui] @@ -66,39 +66,26 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github- > [!TIP] > -> When THEMES is not set, Gitea will use all themes +> When `THEMES` is not set, Forgejo will use all themes > [!IMPORTANT] > > Automatic color theme requires both light and dark theme files. -For details, please refer to the Gitea documentation -[Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea) +For details, refer to the [Forgejo documentation](https://forgejo.org/docs/latest/administration/customizing-gitea/). ### Template File Installation (Optional) > [!IMPORTANT] > -> The template modifies Gitea's layout to make it closer to GitHub's layout. Do not use template files across versions, -> as this may lead to missing functionality, Gitea instance failing to start, and other issues. +> The template modifies Forgejo's layout to make it closer to GitHub's layout. Do not use template files across versions, +> as this may lead to missing functionality, Forgejo failing to start, and other issues. > -> Template layout is bound to the Gitea instance and will affect all themes, impacting the experience of other +> Template layout is bound to the Forgejo instance and will affect all themes, impacting the experience of other > non-project themes. -1. Download the latest template files from the release page and place them in the `data/gitea/templates` directory (This - directory may not be available by default and needs to be manually created) -2. Restart Gitea - -### Translation File Installation (Optional) - -> [!TIP] -> -> Translation files are only needed when using this project's template files to provide support for non-English -> languages. - -1. Download the latest translation files from the release page and place them in the `data/gitea/options/locale` - directory (This directory may not be available by default and needs to be manually created) -2. Restart Gitea +1. Download the latest template archive from the release page and extract it into ``. +2. Restart Forgejo ## Screenshots @@ -180,14 +167,14 @@ THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft -### Gitea Themes +### Gitea-Compatible Themes ```ini THEMES = github-gitea-auto, github-gitea-light, github-gitea-dark ```
-Gitea +Gitea-compatible

theme-github-gitea-light.css

theme-github-gitea-dark.css

@@ -249,28 +236,18 @@ Add the following code at the beginning or end of the theme's CSS file | --custom-org-repolist-columns | Number of repository list columns on organization page | 1 | 1 | 1/2 | | | | --custom-org-userlist-columns | Number of user list columns on organization page | 2 | 1 | 1/2 | | | -## Using Development Version of the Theme +## Using the Development Version of the Theme -You might want to use the development version of the theme instead of the released version +You might want to use the development version of the theme instead of the released version. -Please ensure you have Bun environment installed, Bun 1.3.14 or above is recommended +Please ensure you have Bun 1.3.14 or above installed. ```bash -git clone https://github.com/lutinglt/gitea-github-theme.git -cd gitea-github-theme +git clone https://github.com/whereareiam/forgejo-github-theme.git +cd forgejo-github-theme bun install bun bundle ``` -After compilation, theme files will be generated in the `dist` directory. You can place the theme files into the -`gitea/public/assets/css` directory, then add the theme name to the end of `THEMES` in `gitea/conf/app.ini` - -## Star History - - - - - - Star History Chart - - +After compilation, CSS files are generated in `dist`. Install them as described above. The full release packaging step, +including templates and fonts, is available through the repository's CI workflow. diff --git a/README_CN.md b/README_CN.md deleted file mode 100644 index bc2d38fe..00000000 --- a/README_CN.md +++ /dev/null @@ -1,247 +0,0 @@ -

-

Gitea GitHub Theme

- - - - -

- -

- -不仅仅是在颜色上, 在样式细节上也追求 GitHub 风格的 Gitea 主题 - -

- -![Dashboard](https://raw.githubusercontent.com/lutinglt/gitea-github-theme/assets/screenshots/dashboard.png) - -## 版本号说明 - -主题版本号与 Gitea 版本号保持一致 - -Gitea 版本号格式: `1.大版本号.小版本号` - -Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本. - -比如: 主题版本 `1.24.5` 适用于 Gitea 版本 `>=1.24.0` `<1.25.0` - -仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR. - -## 安装 - -> [!IMPORTANT] -> -> 因为项目使用了 CSS 新特性, 确保样式正确应用需保持 Chrome/Edge >= 120, Firefox >= 121, Safari >= 16.5 - -1. 在发布页下载最新的 CSS 主题文件放入 `data/gitea/public/assets/css` 目录下 (默认可能没有此目录需手动创建) -2. 修改 `data/gitea/conf/app.ini`，并将 CSS 文件名去掉 `theme-` 的名称附加到 `[ui]` 下的 `THEMES` 末尾 -3. 重启 Gitea -4. 在设置中查看主题 - -例: 主题文件名为 `theme-github-dark.css`，则添加 `github-dark` 到 `THEMES` 末尾 - -`data/gitea/conf/app.ini` 例: - -```ini -[ui] -THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark -``` - -> [!TIP] -> -> 不设置 THEMES 时, Gitea 会使用所有主题 - -> [!IMPORTANT] -> -> 自动颜色主题需要亮色和暗色的主题文件 - -详细请查看 Gitea 文档 -[Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea) - -### 模板文件安装 (可选) - -> [!IMPORTANT] -> -> 模板修改了 Gitea 的布局, 使其更接近 GitHub 的布局, 请勿跨版本使用模板文件, 可能会导致功能缺失, -> Gitea 实例无法启动等问题 -> -> 模板布局跟 Gitea 实例绑定, 所有主题都会生效, 会影响其他非本项目的主题的体验 - -1. 在发布页下载最新的模板文件放入 `data/gitea/templates` 目录下 (默认可能没有此目录需手动创建) -2. 重启 Gitea - -### 翻译文件安装 (可选) - -> [!TIP] -> -> 仅在使用本项目的模板文件时需要安装翻译文件以提供非英文语言的支持 - -1. 在发布页下载最新的翻译文件放入 `data/gitea/options/locale` 目录下 (默认可能没有此目录需手动创建) -2. 重启 Gitea - -> [!NOTE] -> -> 中文翻译中还额外将 "工单" 替换为 "议题", "合并请求" 替换为 "拉取请求", 以与 GitHub 手机版中文保持一致 - -## 截图 - -### 默认主题 - -```ini -THEMES = github-auto, github-light, github-dark, github-soft-dark -``` - -
-Default -

theme-github-light.css

- -

theme-github-dark.css

- -

theme-github-soft-dark.css

- -
- -### 色盲主题 ( Beta ) - -```ini -THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark -THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark -``` - -
-Colorblind & Tritanopia (红绿色盲 & 蓝色盲) -

theme-github-colorblind-light.css & theme-github-tritanopia-light.css

- -

theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css

- -
- -### 高对比度主题 - -```ini -THEMES = github-high-contrast-auto, github-high-contrast-light, github-high-contrast-dark, github-high-contrast-soft-dark -``` - -
-HighContrast -

theme-github-high-contrast-light.css

- -

theme-github-high-contrast-dark.css

- -

theme-github-high-contrast-soft-dark.css

- -
- -### 高对比度色盲主题 ( Beta ) - -```ini -THEMES = github-high-contrast-colorblind-auto, github-high-contrast-colorblind-light, github-high-contrast-colorblind-dark -THEMES = github-high-contrast-tritanopia-auto, github-high-contrast-tritanopia-light, github-high-contrast-tritanopia-dark -``` - -
-HighContrast Colorblind & Tritanopia (红绿色盲 & 蓝色盲) -

theme-github-high-contrast-colorblind-light.css & theme-github-high-contrast-tritanopia-light.css

- -

theme-github-high-contrast-colorblind-dark.css & theme-github-high-contrast-tritanopia-dark.css

- -
- -### 粉色主题 - -```ini -THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark -``` - -
-Pink -

theme-github-pink-light.css

- -

theme-github-pink-dark.css

- -

theme-github-pink-soft-dark.css

- -
- -### Gitea 主题 - -```ini -THEMES = github-gitea-auto, github-gitea-light, github-gitea-dark -``` - -
-Gitea -

theme-github-gitea-light.css

- -

theme-github-gitea-dark.css

- -
- -### Catppuccin 主题 - -```ini -THEMES = github-catppuccin-auto, github-catppuccin-latte, github-catppuccin-frappe, github-catppuccin-macchiato, github-catppuccin-mocha -``` - -
-Catppuccin -

theme-github-catppuccin-latte.css

- -

theme-github-catppuccin-frappe.css

- -

theme-github-catppuccin-macchiato.css

- -

theme-github-catppuccin-mocha.css

- -
- -## 自定义 CSS 变量 - -可以根据自己的偏好自定义主题的一部分样式 - -### 使用方法 - -在主题的 CSS 文件的头部或尾部添加以下代码 - -```css -:root { - --custom-clone-menu-width: 150px; - ... -} -``` - -> [!IMPORTANT] -> -> 请确保在 `:root` 选择器中添加自定义变量，否则无法生效 -> -> 变量之间用 `;` 分隔 -> -> 建议自定义变量放在单独的文件中, 通过 shell 命令等方式追加到主题文件中 - -### CSS 变量 - -| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 | -| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- | -| --custom-branch-menu-width | 分支菜单的宽度 | 320px | 320px | 320px | Gitea | 640px | -| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px | -| --custom-user-menu-width | 用户菜单的宽度 | 192px | 256px | | Gitea | 320px | -| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | | -| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | | -| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 1/2 | | | -| --custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1/2 | | | -| --custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 1 | 1/2 | | | - -## 使用开发中的主题 - -也许你会想使用开发中的主题, 而不是发布的主题 - -请确保你已经安装了 Bun 环境, 推荐使用 Bun 1.3.14 或以上版本 - -```bash -git clone https://github.com/lutinglt/gitea-github-theme.git -cd gitea-github-theme -bun install -bun bundle -``` - -编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在 -`gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾 diff --git a/options/locale/locale_zh-CN.json b/options/locale/locale_zh-CN.json deleted file mode 100644 index 3e987688..00000000 --- a/options/locale/locale_zh-CN.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "gitea-github-theme.verifed": "已验证", - "gitea-github-theme.partially_verifed": "部分验证", - "gitea-github-theme.unverifed": "未验证" -} diff --git a/package.json b/package.json index 091255e1..29a869cc 100644 --- a/package.json +++ b/package.json @@ -26,11 +26,10 @@ "dev": "bun bundle && bun sync:theme", "commit": "bun fmt && bun bundle && bun vitest", "version": "bun scripts/version.ts", - "release": "bun bundle && bun update:locale", + "release": "bun bundle", "bundle:ci": "bun bundle && bun vitest", "sync:theme": "bun scripts/syncTheme.ts", "update:primer": "bun scripts/buildPrimerTSToken.ts", - "update:locale": "bun scripts/translate.ts", "update:gitea": "bun scripts/updateGitea.ts", "update:snapshot": "bun vitest --update", "install:clean": "rm -rf node_modules bun.lock bun.lockb && bun install" diff --git a/scripts/translate.ts b/scripts/translate.ts deleted file mode 100644 index 11c6117c..00000000 --- a/scripts/translate.ts +++ /dev/null @@ -1,74 +0,0 @@ -/*! - * Copyright (c) https://github.com/lutinglt - * - * See the NOTICE file distributed with this work for additional - * information regarding copyright ownership. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import dotenv from "dotenv"; -import child_process from "node:child_process"; -import fs from "node:fs"; -import path from "node:path"; -import { pkg, rootDir, setGlobalProxy } from "./utils"; - -dotenv.config({ quiet: true }); -setGlobalProxy(); - -const githubSite = "https://raw.githubusercontent.com"; -const giteaRepo = "go-gitea/gitea"; -const githubBranchPath = "refs/heads/release"; -const githubTagPath = "refs/tags"; -const localePath = "options/locale"; - -const [major, minor, patch, tag = ""] = pkg.version.split("."); -console.log("Version:", pkg.version); - -const versionPath = - tag.includes("rc") || patch.includes("latest") - ? `${githubBranchPath}/v${major}.${minor}` - : `${githubTagPath}/v${major}.${minor}.${patch}`; - -const githubUrl = `${githubSite}/${giteaRepo}/${versionPath}/${localePath}`; -const locales = fs.readdirSync(path.join(rootDir, localePath)).filter(file => file.endsWith(".json")); - -(async () => { - fs.mkdirSync(path.join(rootDir, "dist", localePath), { recursive: true }); - for (const locale of locales) { - const localUrl = `${githubUrl}/${locale}`; - const themeLocale = JSON.parse(fs.readFileSync(path.join(rootDir, localePath, locale), "utf-8")); - - const response = await fetch(localUrl); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - const content = (await response.json()) as Record; - if (locale.includes("zh-CN")) { - for (const key of Object.keys(content)) { - if (typeof content[key] === "string") { - content[key] = content[key].replaceAll("工单", "议题").replaceAll("合并请求", "拉取请求"); - } - } - } - Object.assign(content, themeLocale); - fs.writeFileSync(path.join(rootDir, "dist", localePath, locale), JSON.stringify(content, null, 2)); - console.log("✔︎ LocaleUrl:", localUrl); - } - - if (process.env.SSH_SERVER && process.env.GITEA_PATH && process.env.SSH_USER) { - const cmd = `scp -r dist/options ${process.env.SSH_USER}@${process.env.SSH_SERVER}:${process.env.GITEA_PATH}`; - console.log("[translate] exec:", cmd); - child_process.execSync(cmd, { stdio: "inherit" }); - } -})();