gitea-banana-theme/IFLOW.md

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。

构建和运行

安装依赖

npm install

开发构建

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

npm run dev

生产构建

构建所有主题：

npm run build

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

代码检查和格式化

• 检查代码风格：

  npm run lint
  

• 格式化代码：

  npm run format
  

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

  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 服务。