You've already forked gitea-banana-theme
82 lines
2.4 KiB
Markdown
82 lines
2.4 KiB
Markdown
# Gitea Banana Theme 项目概述
|
|
|
|
这个项目为 Gitea 提供了一套 Banana 风格的主题。它包含多种预设颜色方案，如基础的亮色、暗色和柔和暗色主题，以及为色盲用户设计的主题和粉色主题。主题通过 CSS 实现，并利用 Vite 和 Vanilla Extract 等工具进行构建。
|
|
|
|
## 项目结构
|
|
|
|
- `src/`: 核心源代码，包括主题定义、颜色处理和类型定义。
|
|
- `styles/`: 全局样式定义，覆盖 Gitea 的 UI 组件。
|
|
- `themes/`: 各种预定义的主题颜色配置。
|
|
- `dist/`: 构建后的 CSS 主题文件输出目录。
|
|
- `screenshots/`: 各种主题的预览截图。
|
|
|
|
## 技术栈
|
|
|
|
- **TypeScript**: 用于类型安全的 JavaScript 开发。
|
|
- **Vite**: 构建工具，提供快速的开发和构建体验。
|
|
- **Vanilla Extract**: 用于在 JavaScript/TypeScript 中编写 CSS 样式。
|
|
- **Lightning CSS**: 用于 CSS 转换和优化。
|
|
- **Linaria/WYW-in-JS**: 用于在 JavaScript 中编写 CSS。
|
|
|
|
## 构建和运行
|
|
|
|
### 安装依赖
|
|
|
|
```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
|
|
```
|
|
|
|
## 主题开发
|
|
|
|
主题定义在 `themes/` 目录下，每个主题是一个 `.css.ts` 文件。这些文件导出一个包含颜色和其他样式变量的对象，该对象通过 `defineTheme` 函数处理后生成最终的 CSS。
|
|
|
|
核心主题逻辑位于 `src/core/` 目录中，`theme.ts` 文件负责创建全局 CSS 主题，`vite.ts` 文件包含 Vite 插件，用于处理主题构建过程。
|
|
|
|
## 自定义 CSS 变量
|
|
|
|
用户可以通过在生成的 CSS 文件中添加自定义 CSS 变量来覆盖部分样式。支持的变量包括菜单宽度、列表列数等。
|
|
|
|
## 安装到 Gitea
|
|
|
|
1. 构建项目以生成 CSS 文件。
|
|
2. 将 `dist/` 目录下的 CSS 文件复制到 Gitea 服务器的 `gitea/public/assets/css` 目录。
|
|
3. 修改 Gitea 配置文件 `gitea/conf/app.ini`，在 `[ui]` 部分的 `THEMES` 列表中添加主题名称（文件名去掉 `theme-` 前缀）。
|
|
4. 重启 Gitea 服务。 |