You've already forked gitea-banana-theme
157 lines
4.5 KiB
Markdown
157 lines
4.5 KiB
Markdown
# 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` 例:
|
|
|
|
```ini
|
|
[ui]
|
|
THEMES = gitea-auto, gitea-light, gitea-dark, banana-modern-auto, banana-modern-light, banana-modern-dark, banana-soft-dark
|
|
```
|
|
|
|
详细请查看 Gitea 文档
|
|
[Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
|
|
|
|
## 技术栈
|
|
|
|
- **TypeScript**: 用于类型安全的 JavaScript 开发。
|
|
- **Vite**: 构建工具，提供快速的开发和构建体验。
|
|
- **Vanilla Extract**: 用于在 JavaScript/TypeScript 中编写 CSS 样式。
|
|
- **Lightning CSS**: 用于 CSS 转换和优化。
|
|
- **Linaria/WYW-in-JS**: 用于在 JavaScript 中编写 CSS。
|
|
|
|
## 开发指南
|
|
|
|
### 安装依赖
|
|
|
|
确保你已经安装了 Node.js 环境, 推荐使用 Node.js 20 或以上版本。
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 开发构建
|
|
|
|
构建开发版本（仅构建 `DEV_THEME` 环境变量指定的主题，或默认的 `dark` 主题）：
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
### 生产构建
|
|
|
|
构建所有主题：
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
构建过程会生成 CSS 文件到 `dist/` 目录。
|
|
|
|
### 代码检查和格式化
|
|
|
|
- 检查代码风格：
|
|
|
|
```bash
|
|
npm run lint
|
|
```
|
|
|
|
- 格式化代码：
|
|
|
|
```bash
|
|
npm run format
|
|
```
|
|
|
|
- 一键执行检查、格式化和构建：
|
|
|
|
```bash
|
|
npm run commit
|
|
```
|
|
|
|
## 截图
|
|
|
|
|
|
|
|
## 贡献
|
|
|
|
欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。
|
|
|
|
在提交 Issue 时，请根据问题类型选择合适的模板：
|
|
- 样式错误报告 (Style bug report)
|
|
- 功能请求 (Feature request)
|
|
- 核心错误报告 (Core bug report)
|
|
- 文档报告 (Doc report)
|
|
|
|
在提交 Pull Request 时，请确保：
|
|
1. 代码风格符合项目规范
|
|
2. 添加了必要的测试
|
|
3. 更新了相关文档
|
|
|
|
### 基本主题
|
|
|
|
```ini
|
|
THEMES = banana-modern-auto, banana-modern-light, banana-modern-dark, banana-auto, banana-light, banana-dark, banana-soft-dark
|
|
```
|
|
|
|
### 色盲主题 ( Beta )
|
|
|
|
```ini
|
|
THEMES = banana-colorblind-auto, banana-colorblind-light, banana-colorblind-dark
|
|
THEMES = banana-tritanopia-auto, banana-tritanopia-light, banana-tritanopia-dark
|
|
```
|
|
|
|
### 粉色主题
|
|
|
|
```ini
|
|
THEMES = banana-pink-auto, banana-pink-light, banana-pink-dark, banana-pink-soft-dark
|
|
```
|
|
|
|
## 自定义 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 | | |
|