Gitea Banana Theme

为 Gitea 提供一套现代化、美观的 Banana 风格主题。包含多种预设颜色方案，如基础的亮色、暗色和柔和暗色主题，以及为色盲用户设计的主题和粉色主题。主题通过 CSS 实现，并利用 Vite 和 Vanilla Extract 等工具进行构建。

安装

1. 在发布页下载最新的 CSS 主题文件放入 gitea/public/assets/css 目录下
2. 修改 gitea/conf/app.ini，并将 CSS 文件名去掉 theme- 的名称附加到 [ui] 下的 THEMES 末尾
3. 重启 Gitea
4. 在设置中查看主题

Important

自动颜色主题需要亮色和暗色的主题文件

例: 主题文件名为 theme-banana-modern-dark.css，则添加 banana-modern-dark 到 THEMES 末尾

gitea/conf/app.ini 例:

[ui]
THEMES = gitea-auto, gitea-light, gitea-dark, banana-modern-auto, banana-modern-light, banana-modern-dark, banana-soft-dark

详细请查看 Gitea 文档 Gitea docs

技术栈

• TypeScript: 用于类型安全的 JavaScript 开发。
• Vite: 构建工具，提供快速的开发和构建体验。
• Vanilla Extract: 用于在 JavaScript/TypeScript 中编写 CSS 样式。
• Lightning CSS: 用于 CSS 转换和优化。
• Linaria/WYW-in-JS: 用于在 JavaScript 中编写 CSS。

开发指南

安装依赖

确保你已经安装了 Node.js 环境, 推荐使用 Node.js 20 或以上版本。

npm install

开发构建

构建开发版本（仅构建 DEV_THEME 环境变量指定的主题，或默认的 dark 主题）：

npm run dev

生产构建

构建所有主题：

npm run build

构建过程会生成 CSS 文件到 dist/ 目录。

代码检查和格式化

• 检查代码风格：

  npm run lint
  

• 格式化代码：

  npm run format
  

• 一键执行检查、格式化和构建：

  npm run commit
  

截图

贡献

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。

在提交 Issue 时，请根据问题类型选择合适的模板：

• 样式错误报告 (Style bug report)
• 功能请求 (Feature request)
• 核心错误报告 (Core bug report)
• 文档报告 (Doc report)

在提交 Pull Request 时，请确保：

1. 代码风格符合项目规范
2. 添加了必要的测试
3. 更新了相关文档

基本主题

THEMES = banana-modern-auto, banana-modern-light, banana-modern-dark, banana-auto, banana-light, banana-dark, banana-soft-dark

色盲主题 ( Beta )

THEMES = banana-colorblind-auto, banana-colorblind-light, banana-colorblind-dark
THEMES = banana-tritanopia-auto, banana-tritanopia-light, banana-tritanopia-dark

粉色主题

THEMES = banana-pink-auto, banana-pink-light, banana-pink-dark, banana-pink-soft-dark

自定义 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