diff --git a/README.md b/README.md index 16ed678..2e2901d 100644 --- a/README.md +++ b/README.md @@ -8,65 +8,71 @@
-中文 • [English](README_EN.md) +English • [中文](README_CN.md) -不仅仅是在颜色上, 在样式细节上也追求 GitHub 风格的 Gitea 主题. +A Gitea theme that pursues GitHub style not only in colors but also in styling details.
-![Dashboard](screenshots/dashboard.png) +![Dashboard](screenshots/en/dashboard-en.png) > [!TIP] > -> 推荐搭配 Catppuccin 文件图标浏览器插件一起使用更佳 +> Recommend using Catppuccin file icon browser plugin together for better performance. > [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons) -## 版本号说明 +## Version Number Explanation -主题版本号与 Gitea 版本号保持一致 +The theme version number is kept consistent with the Gitea version number -Gitea 版本号格式: `1.大版本号.小版本号` +Gitea version number format: `1.major.minor` -Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本. +Theoretically, minor version changes in Gitea do not modify the frontend layout, so the minor version of the theme is +applicable to all Gitea versions with the same major version number. -比如: 主题版本 `1.24.5` 适用于 Gitea 版本 `>=1.24.0` `<1.25.0` +For example: Theme version `1.24.5` is applicable to Gitea versions `>=1.24.0` `<1.25.0` -仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR. +Only the latest released Gitea version is maintained. Issues and PRs for other older theme versions will not be +accepted. -> 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳` +> Development stage theme version number format: `1.major.minor.timestamp` -### 主题版本发布规则 +### Theme Version Release Rules -- 当 Gitea 发布小版本时, 主题中间如有变更, 则发布新的和 Gitea 小版本相同的主题版本 -- 当 Gitea 发布大版本时, 主题中间如有变更, 会发布 `1.旧大版本号.latest` 的主题版本并不再维护旧版本 -- 适配大版本的预发布版本为 `1.大版本号.rc`, 当无明显 BUG 时发布与 Gitea 大版本相同的主题版本 +- When Gitea releases a minor version, if there are changes in the theme, a new theme version with the same minor + version as Gitea will be released +- When Gitea releases a major version, if there are changes in the theme, a theme version `1.old_major_version.latest` + will be released and the old version will no longer be maintained +- The pre-release version for major version adaptation is `1.major_version.rc`, and when there are no obvious bugs, a + theme version with the same major version as Gitea will be released -## 安装 +## Installation -1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下 -2. 修改 `gitea/conf/app.ini`，并将 CSS 文件名去掉 `theme-` 的名称附加到 `[ui]` 下的 `THEMES` 末尾 -3. 重启 Gitea -4. 在设置中查看主题 +1. Download the latest CSS theme file from the release page and place it in the `gitea/public/assets/css` directory +2. Modify `gitea/conf/app.ini` and append the CSS filename without the `theme-` prefix to the end of `THEMES` under the + `[ui]` section +3. Restart Gitea +4. Check the theme in the settings -例: 主题文件名为 `theme-github-dark.css`，则添加 `github-dark` 到 `THEMES` 末尾 +Example: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES` -`gitea/conf/app.ini` 例: +Example `gitea/conf/app.ini`: ```ini [ui] THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark ``` -详细请查看 Gitea 文档 +For details, please refer to the Gitea documentation [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea) > [!IMPORTANT] > -> 自动颜色主题需要亮色和暗色的主题文件 +> Automatic color theme requires both light and dark theme files. -## 截图 +## Screenshots -### 基本主题 +### Basic Themes ```ini THEMES = github-auto, github-light, github-dark, github-soft-dark @@ -75,14 +81,14 @@ THEMES = github-auto, github-light, github-dark, github-soft-dark
Base

theme-github-light.css

- +

theme-github-dark.css

- +

theme-github-soft-dark.css

- +
-### 色盲主题 ( Beta ) +### Colorblind Themes (Beta) ```ini THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark @@ -90,14 +96,14 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark ```
-Colorblind & Tritanopia (红绿色盲 & 蓝色盲) +Colorblind & Tritanopia

theme-github-colorblind-light.css & theme-github-tritanopia-light.css

- +

theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css

- +
-### 粉色主题 +### Pink Themes ```ini THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark @@ -106,20 +112,20 @@ THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft
Pink

theme-github-pink-light.css

- +

theme-github-pink-dark.css

- +

theme-github-pink-soft-dark.css

- +
-## 自定义 CSS 变量 +## Custom CSS Variables -可以根据自己的偏好自定义主题的一部分样式 +You can customize parts of the theme style according to your preferences -### 使用方法 +### Usage Method -在主题的 CSS 文件的头部或尾部添加以下代码 +Add the following code at the beginning or end of the theme's CSS file ```css :root { @@ -130,30 +136,31 @@ THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft > [!IMPORTANT] > -> 请确保在 `:root` 选择器中添加自定义变量，否则无法生效 +> Please ensure to add custom variables in the `:root` selector, otherwise they will not take effect > -> 变量之间用 `;` 分隔 +> Variables are separated by `;` > -> 建议自定义变量放在单独的文件中, 通过 shell 命令等方式追加到主题文件中 +> It is recommended to place custom variables in a separate file and append them to the theme file using shell commands +> or other methods -### CSS 变量 +### CSS Variables -| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 | -| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- | -| --custom-branch-menu-width | 分支菜单的宽度 | 320px | 320px | 320px | Gitea | 640px | -| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px | -| --custom-user-menu-width | 用户菜单的宽度 | 192px | 256px | | Gitea | 320px | -| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | | -| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | | -| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 1/2 | | | -| --custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1/2 | | | -| --custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 1 | 1/2 | | | +| Variable Name | Description | Default | Github | Recommend | Min | Max | +| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :---- | :---- | +| --custom-branch-menu-width | Branch menu width | 320px | 320px | 320px | Gitea | 640px | +| --custom-clone-menu-width | Clone button menu width | Gitea | 332px | 200px | 150px | 400px | +| --custom-user-menu-width | User menu width | 192px | 200px | | Gitea | 320px | +| --custom-explore-repolist-columns | Number of repository list columns on explore page | 2 | 2 | 2 | | | +| --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3 | 1 | 2/3 | | | +| --custom-user-repolist-columns | Number of repository list columns on user page | 2 | 2 | 1/2 | | | +| --custom-org-repolist-columns | Number of repository list columns on organization page | 1 | 1 | 1/2 | | | +| --custom-org-userlist-columns | Number of user list columns on organization page | 2 | 1 | 1/2 | | | -## 使用开发中的主题 +## Using Development Version of the Theme -也许你会想使用开发中的主题, 而不是发布的主题 +You might want to use the development version of the theme instead of the released version -请确保你已经安装了 Node.js 环境, 推荐使用 Node.js 20 或以上版本 +Please ensure you have Node.js environment installed, Node.js 20 or above is recommended ```bash git clone https://github.com/lutinglt/gitea-github-theme.git @@ -162,5 +169,5 @@ npm install npm run build ``` -编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在 -`gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾 +After compilation, theme files will be generated in the `dist` directory. You can place the theme files into the +`gitea/public/assets/css` directory, then add the theme name to the end of `THEMES` in `gitea/conf/app.ini` diff --git a/README_CN.md b/README_CN.md new file mode 100644 index 0000000..52a9d17 --- /dev/null +++ b/README_CN.md @@ -0,0 +1,166 @@ +

+

Gitea GitHub Theme

+ + + + +

+ +
+ +中文 • [English](README.md) + +不仅仅是在颜色上, 在样式细节上也追求 GitHub 风格的 Gitea 主题. + +
+ +![Dashboard](screenshots/dashboard.png) + +> [!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 发布小版本时, 主题中间如有变更, 则发布新的和 Gitea 小版本相同的主题版本 +- 当 Gitea 发布大版本时, 主题中间如有变更, 会发布 `1.旧大版本号.latest` 的主题版本并不再维护旧版本 +- 适配大版本的预发布版本为 `1.大版本号.rc`, 当无明显 BUG 时发布与 Gitea 大版本相同的主题版本 + +## 安装 + +1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下 +2. 修改 `gitea/conf/app.ini`，并将 CSS 文件名去掉 `theme-` 的名称附加到 `[ui]` 下的 `THEMES` 末尾 +3. 重启 Gitea +4. 在设置中查看主题 + +例: 主题文件名为 `theme-github-dark.css`，则添加 `github-dark` 到 `THEMES` 末尾 + +`gitea/conf/app.ini` 例: + +```ini +[ui] +THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark +``` + +详细请查看 Gitea 文档 +[Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea) + +> [!IMPORTANT] +> +> 自动颜色主题需要亮色和暗色的主题文件 + +## 截图 + +### 基本主题 + +```ini +THEMES = github-auto, github-light, github-dark, github-soft-dark +``` + +
+Base +

theme-github-light.css

+ +

theme-github-dark.css

+ +

theme-github-soft-dark.css

+ +
+ +### 色盲主题 ( Beta ) + +```ini +THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark +THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark +``` + +
+Colorblind & Tritanopia (红绿色盲 & 蓝色盲) +

theme-github-colorblind-light.css & theme-github-tritanopia-light.css

+ +

theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css

+ +
+ +### 粉色主题 + +```ini +THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark +``` + +
+Pink +

theme-github-pink-light.css

+ +

theme-github-pink-dark.css

+ +

theme-github-pink-soft-dark.css

+ +
+ +## 自定义 CSS 变量 + +可以根据自己的偏好自定义主题的一部分样式 + +### 使用方法 + +在主题的 CSS 文件的头部或尾部添加以下代码 + +```css +:root { + --custom-clone-menu-width: 150px; + ... +} +``` + +> [!IMPORTANT] +> +> 请确保在 `:root` 选择器中添加自定义变量，否则无法生效 +> +> 变量之间用 `;` 分隔 +> +> 建议自定义变量放在单独的文件中, 通过 shell 命令等方式追加到主题文件中 + +### CSS 变量 + +| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 | +| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- | +| --custom-branch-menu-width | 分支菜单的宽度 | 320px | 320px | 320px | Gitea | 640px | +| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px | +| --custom-user-menu-width | 用户菜单的宽度 | 192px | 256px | | Gitea | 320px | +| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | | +| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | | +| --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://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` 末尾 diff --git a/README_EN.md b/README_EN.md deleted file mode 100644 index 57fffd2..0000000 --- a/README_EN.md +++ /dev/null @@ -1,173 +0,0 @@ -

-

Gitea GitHub Theme

- - - - -

- -
- -English • [中文](README.md) - -A Gitea theme that pursues GitHub style not only in colors but also in styling details. - -
- -![Dashboard](screenshots/en/dashboard-en.png) - -> [!TIP] -> -> Recommend using Catppuccin file icon browser plugin together for better performance. -> [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons) - -## Version Number Explanation - -The theme version number is kept consistent with the Gitea version number - -Gitea version number format: `1.major.minor` - -Theoretically, minor version changes in Gitea do not modify the frontend layout, so the minor version of the theme is -applicable to all Gitea versions with the same major version number. - -For example: Theme version `1.24.5` is applicable to Gitea versions `>=1.24.0` `<1.25.0` - -Only the latest released Gitea version is maintained. Issues and PRs for other older theme versions will not be -accepted. - -> Development stage theme version number format: `1.major.minor.timestamp` - -### Theme Version Release Rules - -- When Gitea releases a minor version, if there are changes in the theme, a new theme version with the same minor - version as Gitea will be released -- When Gitea releases a major version, if there are changes in the theme, a theme version `1.old_major_version.latest` - will be released and the old version will no longer be maintained -- The pre-release version for major version adaptation is `1.major_version.rc`, and when there are no obvious bugs, a - theme version with the same major version as Gitea will be released - -## Installation - -1. Download the latest CSS theme file from the release page and place it in the `gitea/public/assets/css` directory -2. Modify `gitea/conf/app.ini` and append the CSS filename without the `theme-` prefix to the end of `THEMES` under the - `[ui]` section -3. Restart Gitea -4. Check the theme in the settings - -Example: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES` - -Example `gitea/conf/app.ini`: - -```ini -[ui] -THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark -``` - -For details, please refer to the Gitea documentation -[Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea) - -> [!IMPORTANT] -> -> Automatic color theme requires both light and dark theme files. - -## Screenshots - -### Basic Themes - -```ini -THEMES = github-auto, github-light, github-dark, github-soft-dark -``` - -
-Base -

theme-github-light.css

- -

theme-github-dark.css

- -

theme-github-soft-dark.css

- -
- -### Colorblind Themes (Beta) - -```ini -THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark -THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark -``` - -
-Colorblind & Tritanopia -

theme-github-colorblind-light.css & theme-github-tritanopia-light.css

- -

theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css

- -
- -### Pink Themes - -```ini -THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark -``` - -
-Pink -

theme-github-pink-light.css

- -

theme-github-pink-dark.css

- -

theme-github-pink-soft-dark.css

- -
- -## Custom CSS Variables - -You can customize parts of the theme style according to your preferences - -### Usage Method - -Add the following code at the beginning or end of the theme's CSS file - -```css -:root { - --custom-clone-menu-width: 150px; - ... -} -``` - -> [!IMPORTANT] -> -> Please ensure to add custom variables in the `:root` selector, otherwise they will not take effect -> -> Variables are separated by `;` -> -> It is recommended to place custom variables in a separate file and append them to the theme file using shell commands -> or other methods - -### CSS Variables - -| Variable Name | Description | Default | Github | Recommend | Min | Max | -| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :---- | :---- | -| --custom-branch-menu-width | Branch menu width | 320px | 320px | 320px | Gitea | 640px | -| --custom-clone-menu-width | Clone button menu width | Gitea | 332px | 200px | 150px | 400px | -| --custom-user-menu-width | User menu width | 192px | 200px | | Gitea | 320px | -| --custom-explore-repolist-columns | Number of repository list columns on explore page | 2 | 2 | 2 | | | -| --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3 | 1 | 2/3 | | | -| --custom-user-repolist-columns | Number of repository list columns on user page | 2 | 2 | 1/2 | | | -| --custom-org-repolist-columns | Number of repository list columns on organization page | 1 | 1 | 1/2 | | | -| --custom-org-userlist-columns | Number of user list columns on organization page | 2 | 1 | 1/2 | | | - -## Using Development Version of the Theme - -You might want to use the development version of the theme instead of the released version - -Please ensure you have Node.js environment installed, Node.js 20 or above is recommended - -```bash -git clone https://github.com/lutinglt/gitea-github-theme.git -cd gitea-github-theme -npm install -npm run build -``` - -After compilation, theme files will be generated in the `dist` directory. You can place the theme files into the -`gitea/public/assets/css` directory, then add the theme name to the end of `THEMES` in `gitea/conf/app.ini`