主题更名为banana

.gitignore

@@ -1,4 +1,3 @@
-dist
 node_modules
 package-lock.json
 .env

CONTRIBUTING.md

@@ -1,171 +0,0 @@
-# 贡献指南
-
-## 目录结构
-
-| 目录              | 说明                         |
-| ----------------- | ---------------------------- |
-| src               | 主题生成框架与辅助工具的包   |
-| src/core          | 主题生成框架                 |
-| src/functions     | 主题辅助工具                 |
-| src/types         | 主题的颜色变量定义           |
-| styles            | 主题样式                     |
-| styles/components | 具体页面的元素的样式         |
-| styles/public     | 基础元素或跨页面的元素的样式 |
-| themes            | 颜色主题                     |
-
-## 贡献说明
-
-不推荐主题样式贡献, 因为 Gitea 主题最终是由单个 CSS 文件提供, 所以会有先后顺序覆盖, 样式影响广泛等问题.
-
-开发者每个人的思路不一样, 审核很难看出这些问题, 会极大增加维护难度.
-
-如果确定理解了 Gitea 的样式布局和我的思路, 请先提交 Issue 确认工作量和预期效果, 然后再开发提交 PR.
-
-如果认为有更好的思路, 欢迎提交 Issue.
-
-> [!IMPORTANT]
->
-> 提交 PR 时, 请执行 `npm run commit`
-
-## 开发环境
-
-主题仅依赖于 Node.js 环境, 请确保你的环境中已经安装了 Node.js, 推荐使用 Node.js 20 或以上版本.
-
-请使用 VSCode 开发, 并安装仓库中推荐的插件.
-
-如果不喜欢多余的插件, 请务必安装 `vscode-styled-components` 插件, 此插件用于渲染和检查 TypeScript 中的 CSS 模板字符串.
-
-推荐使用 VSCode 1.102.0 版本以上开发, 此版本以上提供 TypeScript 代码中 16 进制颜色的支持.
-
-## 开发流程
-
-### 安装依赖
-
-```bash
-npm install
-```
-
-### 设置环境变量
-
-在项目根目录下创建 `.env` 文件, 变量参考 `.env.example` 文件.
-
-环境变量用于发送编译后的主题到服务器上, 快速预览主题.
-
-### 编译主题
-
-编译开发中的主题
-
-```bash
-npm run dev
-```
-
-编译所有主题
-
-```bash
-npm run build
-```
-
-格式化项目中的代码
-
-```bash
-npm run format
-```
-
-用于 PR, 检查并编译项目中的所有代码并进行格式化
-
-```bash
-npm run commit
-```
-
-## 开发规范
-
-`src`, `styles`, `themes` 为项目的主目录, 主目录下的第一个目录为模块.
-
-主目录或主目录下模块互相引用时, 请使用绝对路径, 例如 `import { defineTheme } from "src"`
-
-模块下的文件互相引用时, 请使用相对路径, 例如 `import { defineTheme } from "./theme"`
-
-## 颜色主题贡献
-
-颜色主题名称格式: `主题名称-dark.css.ts` 或 `主题名称-light.css.ts`, 分别表示深色和亮色主题.
-
-如果主题有深色和亮色模式, 会自动生成自动颜色主题, 不需要手动添加.
-
-项目接受自定义主题并会附加到发布的版本中, 但项目所有者不参与维护和审核.
-
-请在颜色主题文件头部附加自己的作者信息, 方便 Issue 提问者找到你 `@`.
-
-推荐使用 `import { defineTheme, type ThemeColor } from "src"` 导入主题生成框架, 声明主题颜色, 然后使用 `defineTheme`
-函数生成主题所有 CSS 变量, defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明和定义.
-
-颜色计算函数可以从 `src/functions` 导入, 例如 `import { scaleColorLight } from "src/functions"`, 或者使用 `polished` 库.
-
-例: `themes/主题名称-dark.css.ts`
-
-```ts
-/**
- * @author 你的名字
- * @description 主题描述
- */
-import { defineTheme, type ThemeColor } from "src";
-export const 主题名称DarkColors: ThemeColor = {
-  ...
-}
-export default defineTheme(主题名称DarkColors);
-// 使用其他主题颜色作为基础
-import dark from "themes/dark";
-import { darkColors } from "themes/dark";
-export const 主题名称DarkColors: ThemeColor = darkColors;
-export default defineTheme({
-  ...dark,
-  ...
-});
-```
-
-如果不需要自定义代码高亮色, 则不传递 chroma 参数, 框架会自动根据主题的暗色或亮色生成代码高亮色.
-
-如果需要完全自定义每个 Gitea 变量, 请导入 `import type { Theme } from "src"`
-
-例: `themes/主题名称-dark.css.ts`
-
-```ts
-/**
- * @author 你的名字
- * @description 主题描述
- */
-import type { Theme, Chroma, Primary, Secondary, ... } from "src";
-export const primary: Primary = ...;
-export const secondary: Secondary =...;
-export const chroma: Chroma =...;
-...
-export default theme: Theme = {
-  primary,
-  secondary,
-  chroma,
-  ...
-};
-```
-
-完成主题颜色开发后, 请在某个仓库的代码文件列表页, 打开 Code 菜单选择 Tea Cli 进行截图, 并放入 `screenshots`
-目录下, 截图名与主题名相同. (推荐克隆本仓库, 避免泄露个人隐私)
-
-然后将截图信息添加到 `README.md` 文件中, 可以在折叠部分中添加自己的说明.
-
-主题颜色复用案例可以参考本主题的色盲主题.
-
-## 主题样式贡献
-
-主题样式使用 TypeScript 的 css 模板字符串开发, 该模板字符串会经过 sass 预处理器处理, 支持 SCSS 语法并且主题只接受 SCSS 嵌套语法, 请不要使用 CSS 语法, 如果一定要用请说明原因.
-
-请尽量不要使用 SCSS 的函数, `vscode-styled-components` 插件会报错, 请使用 TypeScript 相关库处理, 比如主题自带的
-`polished` 库.
-
-推荐需要使用复杂处理时, 提取逻辑到 `src/functions` 目录下的函数中, 然后在 `src/styles` 目录下的样式文件中使用.
-
-主题样式中使用到的所有颜色必须使用颜色变量, 颜色变量导入 `import { themeVars } from "src/types/vars"`
-
-涉及到主题自己的颜色变量 `${themeVars.github.xxx}`, 在使用时请将使用的文件和变量添加到对应变量的注释中
-`src/types/color/github`
-
-小型圆角(6px)请使用全局圆角变量, 圆角变量导入 `import { otherThemeVars } from "src/types/vars"`
-`${otherThemeVars.border.radius}`

IFLOW.md

@@ -1,4 +1,4 @@
-# Gitea GitHub Theme 项目概述
+# Gitea Banana Theme 项目概述
 
 这个项目为 Gitea 提供了一套 Banana 风格的主题。它包含多种预设颜色方案，如基础的亮色、暗色和柔和暗色主题，以及为色盲用户设计的主题和粉色主题。主题通过 CSS 实现，并利用 Vite 和 Vanilla Extract 等工具进行构建。
 

README.md

@@ -1,23 +1,6 @@
 # Gitea Banana Theme
 
-> [!TIP]
->
-> 推荐搭配 Catppuccin 文件图标浏览器插件一起使用更佳
-> [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons)
-
-## 版本号说明
-
-主题版本号与 Gitea 版本号保持一致
-
-Gitea 版本号格式: `1.大版本号.小版本号`
-
-Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本.
-
-比如: 主题版本 `1.24.5` 适用于 Gitea 版本 `>=1.24.0` `<1.25.0`
-
-仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR.
-
-> 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳`
+为 Gitea 提供一套现代化、美观的 Banana 风格主题。包含多种预设颜色方案，如基础的亮色、暗色和柔和暗色主题，以及为色盲用户设计的主题和粉色主题。主题通过 CSS 实现，并利用 Vite 和 Vanilla Extract 等工具进行构建。
 
 ## 安装
 
@@ -30,39 +13,110 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
 >
 > 自动颜色主题需要亮色和暗色的主题文件
 
-例: 主题文件名为 `theme-Banana-dark.css`，则添加 `Banana-dark` 到 `THEMES` 末尾
+例: 主题文件名为 `theme-banana-modern-dark.css`，则添加 `banana-modern-dark` 到 `THEMES` 末尾
 
 `gitea/conf/app.ini` 例:
 
 ```ini
 [ui]
-THEMES = gitea-auto, gitea-light, gitea-dark, Banana-auto, Banana-light, Banana-dark, Banana-soft-dark
+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
+  ```
+
 ## 截图
 
-![Dashboard](screenshots/light.png)
+![banana-modern](screenshots/light.png)
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。
+
+在提交 Issue 时，请根据问题类型选择合适的模板：
+- 样式错误报告 (Style bug report)
+- 功能请求 (Feature request)
+- 核心错误报告 (Core bug report)
+- 文档报告 (Doc report)
+
+在提交 Pull Request 时，请确保：
+1. 代码风格符合项目规范
+2. 添加了必要的测试
+3. 更新了相关文档
 
 ### 基本主题
 
 ```ini
-THEMES = Banana-auto, Banana-light, Banana-dark, Banana-soft-dark
+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
+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
+THEMES = banana-pink-auto, banana-pink-light, banana-pink-dark, banana-pink-soft-dark
 ```
 
 ## 自定义 CSS 变量
@@ -100,23 +154,3 @@ THEMES = Banana-pink-auto, Banana-pink-light, Banana-pink-dark, Banana-pink-soft
 | --custom-user-repolist-columns    | 用户页面的仓库列表列数      | 2     | 2      | 1/2   |       |       |
 | --custom-org-repolist-columns     | 组织页面的仓库列表列数      | 1     | 1      | 1/2   |       |       |
 | --custom-org-userlist-columns     | 组织页面的用户列表列数      | 2     | 1      | 1/2   |       |       |
-
-## 使用开发中的主题
-
-也许你会想使用开发中的主题, 而不是发布的主题
-
-请确保你已经安装了 Node.js 环境, 推荐使用 Node.js 20 或以上版本
-
-```bash
-git clone https://git.pandorastudio.cn/yuantao/giteam-custon-theme.git
-cd gitea-Banana-theme
-npm install
-npm run build
-```
-
-编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在
-`gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾
-
-## 贡献
-
-请查看 [CONTRIBUTING](CONTRIBUTING.md)

dist/theme-banana-auto.css

@@ -0,0 +1,3 @@
+@import "./theme-banana-light.css" (prefers-color-scheme: light);
+@import "./theme-banana-dark.css" (prefers-color-scheme: dark);
+gitea-theme-meta-info{--theme-display-name:"banana Auto";}

dist/theme-banana-colorblind-auto.css

@@ -0,0 +1,3 @@
+@import "./theme-banana-colorblind-light.css" (prefers-color-scheme: light);
+@import "./theme-banana-colorblind-dark.css" (prefers-color-scheme: dark);
+gitea-theme-meta-info{--theme-display-name:"banana Colorblind Auto";}

dist/theme-banana-modern-auto.css

@@ -0,0 +1,3 @@
+@import "./theme-banana-modern-light.css" (prefers-color-scheme: light);
+@import "./theme-banana-modern-dark.css" (prefers-color-scheme: dark);
+gitea-theme-meta-info{--theme-display-name:"banana Modern Auto";}

dist/theme-banana-pink-auto.css

@@ -0,0 +1,3 @@
+@import "./theme-banana-pink-light.css" (prefers-color-scheme: light);
+@import "./theme-banana-pink-dark.css" (prefers-color-scheme: dark);
+gitea-theme-meta-info{--theme-display-name:"banana Pink Auto";}

dist/theme-banana-tritanopia-auto.css

@@ -0,0 +1,3 @@
+@import "./theme-banana-tritanopia-light.css" (prefers-color-scheme: light);
+@import "./theme-banana-tritanopia-dark.css" (prefers-color-scheme: dark);
+gitea-theme-meta-info{--theme-display-name:"banana Tritanopia Auto";}

package.json

@@ -2,13 +2,15 @@
   "name": "gitea-banana-theme",
   "version": "1.0.0",
   "type": "module",
+  "author": {
+    "name": "Pandora Studio",
+    "email": "work@pandorastudio.cn"
+  },
+  "repository": {
+    "url": "https://git.pandorastudio.cn/yuantao/gitea-banana-theme.git"
+  },
   "scripts": {
-    "dev": "vite build --mode dev",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "format": "prettier --write .",
-    "commit": "npm run lint && npm run format && npm run build",
-    "version": "node scripts/version.cjs"
+    "build": "tsc -b && vite build"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.27.1",

src/core/vite.ts

@@ -1,4 +1,3 @@
-import { execSync } from "node:child_process";
 import crypto from "node:crypto";
 import fs from "node:fs";
 import path from "node:path";
@@ -52,10 +51,10 @@ export function themeInput(outDir: string, themeDir: string, mode: string): { [k
 
 function giteaThemeMetaInfo(nameGroup: string[]): string {
   const displayName = nameGroup.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
-  return `gitea-theme-meta-info{--theme-display-name:"Nanobanana ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别
+  return `gitea-theme-meta-info{--theme-display-name:"banana ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别
 }
 
-const prefix = "theme-nanobanana-";
+const prefix = "theme-banana-";
 
 /**
  * 生成主题文件
@@ -116,24 +115,5 @@ export function themePlugin(): Plugin {
         }
       }
     },
-    writeBundle() {
-      // 上传到服务器
-      const server = process.env.SSH_SERVER;
-      const user = process.env.SSH_USER || "root";
-      const theme_path = process.env.GITEA_THEME_PATH;
-      if (server && theme_path) {
-        const cmd = `scp dist/${prefix}*.css ${user}@${server}:${theme_path}`;
-        console.log("[themePlugin] exec:", cmd);
-        try {
-          execSync(cmd, { stdio: "inherit" });
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        } catch (_) {
-          // continue regardless of error
-        }
-      } else {
-        console.log("[themePlugin] no SSH_SERVER or GITEA_THEME_PATH, skip upload");
-      }
-      console.log("[themePlugin] exec end.");
-    },
   };
 }

styles/public/other.ts

@@ -20,7 +20,7 @@ export const star = css`
   }
 `;
 
-// 卡片样式，参考 Nano-Banana-AI-Image-Editor 的设计
+// 卡片样式
 export const card = css`
   .ui.segment,
   .ui.attached.segment,

styles/public/transition.ts

@@ -1,6 +1,6 @@
 import { css } from "src/types/vars";
 
-// 增强的渐变过渡，参考 Nano-Banana-AI-Image-Editor 的设计
+// 增强的渐变过渡
 export const transition = css`
   // 差异对比的代码折叠按钮
   .code-expander-button,

themes/modern-dark.css.ts

@@ -1,6 +1,5 @@
 /**
- * @author iFlow CLI
- * 现代化暗色主题，基于 Nano-Banana-AI-Image-Editor 的设计风格
+ * 现代化暗色主题
  */
 
 import { defineTheme } from "src";

themes/modern-light.css.ts

@@ -1,6 +1,5 @@
 /**
- * @author iFlow CLI
- * 现代化亮色主题，基于 Nano-Banana-AI-Image-Editor 的设计风格
+ * 现代化亮色主题
  */
 
 import { defineTheme } from "src";