update README

CONTRIBUTING.md

@@ -21,7 +21,7 @@
 
 如果确定理解了 Gitea 的样式布局和我的思路, 请先提交 Issue 确认工作量和预期效果, 然后再开发提交 PR.
 
-如果认为有更好的思路, 欢迎提交 PR.
+如果认为有更好的思路, 欢迎提交 Issue.
 
 > [!IMPORTANT]
 >
@@ -82,13 +82,13 @@ npm run commit
 
 `src`, `styles`, `themes` 为项目的主目录, 主目录下的第一个目录为模块.
 
-主目录或主目录模块互相引用时, 请使用绝对路径, 例如 `import { defineTheme } from "src"`
+主目录或主目录下模块互相引用时, 请使用绝对路径, 例如 `import { defineTheme } from "src"`
 
 模块下的文件互相引用时, 请使用相对路径, 例如 `import { defineTheme } from "./theme"`
 
 ## 颜色主题贡献
 
-颜色主题名称格式 `主题名称-dark.css.ts` 或 `主题名称-light.css.ts`, 分别表示深色和亮色主题.
+颜色主题名称格式: `主题名称-dark.css.ts` 或 `主题名称-light.css.ts`, 分别表示深色和亮色主题.
 
 如果主题有深色和亮色模式, 会自动生成自动颜色主题, 不需要手动添加.
 
@@ -135,6 +135,10 @@ export default theme: Theme = {
 };
 ```
 
+完成主题颜色开发后, 请在某个仓库的代码文件列表页, 打开 Code 菜单选择 Tea Cli 进行截图, 并放入 `screenshots` 目录下, 截图名与主题名相同. (推荐克隆 Github 的 actions/checkout 仓库, 该仓库信息较全, 避免泄露个人隐私)
+
+然后将截图信息添加到 `README.md` 文件中, 可以在折叠部分中添加自己的说明.
+
 ## 主题样式贡献
 
 主题样式使用 TypeScript 的 css 模板字符串开发, 该模板字符串会经过过 sass 预处理器处理, 支持 SCSS 语法并且本主题只接受 SCSS 嵌套语法, 请不要使用 CSS 语法, 如果一定要用请说明原因.
@@ -146,5 +150,8 @@ export default theme: Theme = {
 
 主题样式中使用到的所有颜色请使用颜色变量, 颜色变量导入 `import { themeVars } from "src/types"`
 
+涉及到本主题的颜色变量 `${themeVars.github.xxx}`, 在使用时请将使用的文件和变量添加到对应变量的注释中
+`src/types/color/github`
+
 小型圆角(6px)请使用全局圆角变量, 圆角变量导入 `import { otherThemeVars } from "src/types/vars"`
 `${otherThemeVars.border.radius}`

README.md

@@ -1,13 +1,23 @@
 # gitea-github-theme
 
-尽量保持与 GitHub 相同样式的 Gitea 主题
+一个精致模仿 Github 风格的 Gitea 主题
 
-### 主题说明
+> [!TIP]
+>
+> 推荐搭配文件图标浏览器插件一起使用更佳
+> [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons)
 
-添加了短暂的过渡动画优化体验(与 GitHub Code 克隆列表动画一致)
+## 版本号说明
 
-推荐搭配文件图标浏览器插件一起使用更佳
-[github-file-explorer-icons](https://github.com/catppuccin/github-file-explorer-icons)
+本主题版本号格式: `Gitea 版本号.时间戳`
+
+Gitea 版本号格式: `1.大版本号.小版本号`
+
+Gitea 理论上小版本号变更不会修改前端布局, 所以本主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本.
+
+比如: 本主题版本 `1.24.4` 适用于 Gitea 版本 `>=1.24.0` ~ `<1.25.0`
+
+本主题仅维护本主题发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR.
 
 ## 安装
 
@@ -15,7 +25,10 @@
 2. 修改 `gitea/conf/app.ini`，并将 CSS 文件名去掉 `theme-` 的名称附加到 `[ui]` 下的 `THEMES` 末尾
 3. 重启 Gitea
 4. 在设置中查看主题
-5. 自动颜色主题需要亮色和暗色的主题文件
+
+> [!IMPORTANT]
+>
+> 自动颜色主题需要亮色和暗色的主题文件
 
 例: 主题文件名为 `theme-github-dark.css`，则添加 `github-dark` 到 `THEMES` 末尾
 
@@ -65,20 +78,38 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
 
 ## 截图
 
-![仓库](screenshots/repo.png)
+<details open>
+<summary>GitHub</summary>
+<h4>亮色:</h4>
+<img src="screenshots/light.png"/>
+<h4>暗色:</h4>
+<img src="screenshots/dark.png"/>
+<h4>柔和暗色:</h4>
+<img src="screenshots/soft-dark.png"/>
+</details>
 
-![仓库文件列表](screenshots/file_list.png)
 
-![仓库发布](screenshots/release.png)
+<details>
+<summary>其他主题</summary>
+等待贡献者ing...
+</details>
 
-![仓库提交](screenshots/commit.png)
+## 使用开发中的主题
 
-![Actions](screenshots/actions.png)
+也许你会想使用开发中的主题, 而不是发布的主题
 
-![Action](screenshots/action.png)
+请确保你已经安装了 Node.js 环境, 推荐使用 Node.js 20 或以上版本
+
+```bash
+git clone https://github.com/lutinglt/gitea-github-theme.git
+cd gitea-github-theme
+npm install
+npm run build
+```
+
+编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在 `gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾
 
-![Dispatch](screenshots/dispatch.png)
 
 ## 贡献
 
-欢迎提交 Issue 或 Pull Request
+请查看 [CONTRIBUTING](CONTRIBUTING.md)

TODO.md

@@ -2,10 +2,3 @@
 
 - gitea issue 默认标签颜色匹配使用 github 样式
 - issue/PR 列表样式 github 布局
-- styles/themes 库组件导出整理
-- defineTheme 颜色生成代码重构
-
-### 其他
-
-- README 更新/截图更新
-- CONTRIBUTING 更新