# Gitea GitHub 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 服务。