mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-12-21 22:23:56 +00:00
readme change
This commit is contained in:
lutinglt
127
README.md
127
README.md
@@ -8,65 +8,71 @@
|
|||||||
|
|
||||||
<div align="center">
|
<div align="center">
|
||||||
|
|
||||||
中文 • [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.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
> [!TIP]
|
> [!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)
|
> [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 小版本相同的主题版本
|
- When Gitea releases a minor version, if there are changes in the theme, a new theme version with the same minor
|
||||||
- 当 Gitea 发布大版本时, 主题中间如有变更, 会发布 `1.旧大版本号.latest` 的主题版本并不再维护旧版本
|
version as Gitea will be released
|
||||||
- 适配大版本的预发布版本为 `1.大版本号.rc`, 当无明显 BUG 时发布与 Gitea 大版本相同的主题版本
|
- 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` 目录下
|
1. Download the latest CSS theme file from the release page and place it in the `gitea/public/assets/css` directory
|
||||||
2. 修改 `gitea/conf/app.ini`，并将 CSS 文件名去掉 `theme-` 的名称附加到 `[ui]` 下的 `THEMES` 末尾
|
2. Modify `gitea/conf/app.ini` and append the CSS filename without the `theme-` prefix to the end of `THEMES` under the
|
||||||
3. 重启 Gitea
|
`[ui]` section
|
||||||
4. 在设置中查看主题
|
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
|
```ini
|
||||||
[ui]
|
[ui]
|
||||||
THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark
|
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)
|
[Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
|
||||||
|
|
||||||
> [!IMPORTANT]
|
> [!IMPORTANT]
|
||||||
>
|
>
|
||||||
> 自动颜色主题需要亮色和暗色的主题文件
|
> Automatic color theme requires both light and dark theme files.
|
||||||
|
|
||||||
## 截图
|
## Screenshots
|
||||||
|
|
||||||
### 基本主题
|
### Basic Themes
|
||||||
|
|
||||||
```ini
|
```ini
|
||||||
THEMES = github-auto, github-light, github-dark, github-soft-dark
|
THEMES = github-auto, github-light, github-dark, github-soft-dark
|
||||||
@@ -75,14 +81,14 @@ THEMES = github-auto, github-light, github-dark, github-soft-dark
|
|||||||
<details>
|
<details>
|
||||||
<summary>Base</summary>
|
<summary>Base</summary>
|
||||||
<h4>theme-github-light.css</h4>
|
<h4>theme-github-light.css</h4>
|
||||||
<img src="screenshots/light.png"/>
|
<img src="screenshots/en/light.png"/>
|
||||||
<h4>theme-github-dark.css</h4>
|
<h4>theme-github-dark.css</h4>
|
||||||
<img src="screenshots/dark.png"/>
|
<img src="screenshots/en/dark.png"/>
|
||||||
<h4>theme-github-soft-dark.css</h4>
|
<h4>theme-github-soft-dark.css</h4>
|
||||||
<img src="screenshots/soft-dark.png"/>
|
<img src="screenshots/en/soft-dark.png"/>
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
### 色盲主题 ( Beta )
|
### Colorblind Themes (Beta)
|
||||||
|
|
||||||
```ini
|
```ini
|
||||||
THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark
|
THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark
|
||||||
@@ -90,14 +96,14 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
|
|||||||
```
|
```
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
<summary>Colorblind & Tritanopia (红绿色盲 & 蓝色盲)</summary>
|
<summary>Colorblind & Tritanopia</summary>
|
||||||
<h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4>
|
<h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4>
|
||||||
<img src="screenshots/colorblind-light.png"/>
|
<img src="screenshots/en/colorblind-light.png"/>
|
||||||
<h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4>
|
<h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4>
|
||||||
<img src="screenshots/colorblind-dark.png"/>
|
<img src="screenshots/en/colorblind-dark.png"/>
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
### 粉色主题
|
### Pink Themes
|
||||||
|
|
||||||
```ini
|
```ini
|
||||||
THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark
|
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
|
|||||||
<details>
|
<details>
|
||||||
<summary>Pink</summary>
|
<summary>Pink</summary>
|
||||||
<h4>theme-github-pink-light.css</h4>
|
<h4>theme-github-pink-light.css</h4>
|
||||||
<img src="screenshots/pink/pink-light.png"/>
|
<img src="screenshots/pink/en/pink-light-en.png"/>
|
||||||
<h4>theme-github-pink-dark.css</h4>
|
<h4>theme-github-pink-dark.css</h4>
|
||||||
<img src="screenshots/pink/pink-dark.png"/>
|
<img src="screenshots/pink/en/pink-dark-en.png"/>
|
||||||
<h4>theme-github-pink-soft-dark.css</h4>
|
<h4>theme-github-pink-soft-dark.css</h4>
|
||||||
<img src="screenshots/pink/pink-soft-dark.png"/>
|
<img src="screenshots/pink/en/pink-soft-dark-en.png"/>
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
## 自定义 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
|
```css
|
||||||
:root {
|
:root {
|
||||||
@@ -130,30 +136,31 @@ THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft
|
|||||||
|
|
||||||
> [!IMPORTANT]
|
> [!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 | 推荐 | 最小 | 最大 |
|
| Variable Name | Description | Default | Github | Recommend | Min | Max |
|
||||||
| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- |
|
| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :---- | :---- |
|
||||||
| --custom-branch-menu-width | 分支菜单的宽度 | 320px | 320px | 320px | Gitea | 640px |
|
| --custom-branch-menu-width | Branch menu width | 320px | 320px | 320px | Gitea | 640px |
|
||||||
| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
|
| --custom-clone-menu-width | Clone button menu width | Gitea | 332px | 200px | 150px | 400px |
|
||||||
| --custom-user-menu-width | 用户菜单的宽度 | 192px | 256px | | Gitea | 320px |
|
| --custom-user-menu-width | User menu width | 192px | 200px | | Gitea | 320px |
|
||||||
| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | |
|
| --custom-explore-repolist-columns | Number of repository list columns on explore page | 2 | 2 | 2 | | |
|
||||||
| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | |
|
| --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3 | 1 | 2/3 | | |
|
||||||
| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 1/2 | | |
|
| --custom-user-repolist-columns | Number of repository list columns on user page | 2 | 2 | 1/2 | | |
|
||||||
| --custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1/2 | | |
|
| --custom-org-repolist-columns | Number of repository list columns on organization page | 1 | 1 | 1/2 | | |
|
||||||
| --custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 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
|
```bash
|
||||||
git clone https://github.com/lutinglt/gitea-github-theme.git
|
git clone https://github.com/lutinglt/gitea-github-theme.git
|
||||||
@@ -162,5 +169,5 @@ npm install
|
|||||||
npm run build
|
npm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在
|
After compilation, theme files will be generated in the `dist` directory. You can place the theme files into the
|
||||||
`gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾
|
`gitea/public/assets/css` directory, then add the theme name to the end of `THEMES` in `gitea/conf/app.ini`
|
||||||
|
|||||||
166
README_CN.md
Normal file
166
README_CN.md
Normal file
@@ -0,0 +1,166 @@
|
|||||||
|
<h1 align="center">
|
||||||
|
<p>Gitea GitHub Theme</p>
|
||||||
|
<img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37">
|
||||||
|
<img src="https://img.shields.io/github/issues-closed-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=8250df">
|
||||||
|
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/total?style=for-the-badge&labelColor=25292e&color=1f6feb">
|
||||||
|
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/latest/total?style=for-the-badge&labelColor=25292e&color=238636">
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
中文 • [English](README.md)
|
||||||
|
|
||||||
|
不仅仅是在颜色上, 在样式细节上也追求 GitHub 风格的 Gitea 主题.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> [!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
|
||||||
|
```
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Base</summary>
|
||||||
|
<h4>theme-github-light.css</h4>
|
||||||
|
<img src="screenshots/light.png"/>
|
||||||
|
<h4>theme-github-dark.css</h4>
|
||||||
|
<img src="screenshots/dark.png"/>
|
||||||
|
<h4>theme-github-soft-dark.css</h4>
|
||||||
|
<img src="screenshots/soft-dark.png"/>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
### 色盲主题 ( Beta )
|
||||||
|
|
||||||
|
```ini
|
||||||
|
THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark
|
||||||
|
THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
|
||||||
|
```
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Colorblind & Tritanopia (红绿色盲 & 蓝色盲)</summary>
|
||||||
|
<h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4>
|
||||||
|
<img src="screenshots/colorblind-light.png"/>
|
||||||
|
<h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4>
|
||||||
|
<img src="screenshots/colorblind-dark.png"/>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
### 粉色主题
|
||||||
|
|
||||||
|
```ini
|
||||||
|
THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark
|
||||||
|
```
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Pink</summary>
|
||||||
|
<h4>theme-github-pink-light.css</h4>
|
||||||
|
<img src="screenshots/pink/pink-light.png"/>
|
||||||
|
<h4>theme-github-pink-dark.css</h4>
|
||||||
|
<img src="screenshots/pink/pink-dark.png"/>
|
||||||
|
<h4>theme-github-pink-soft-dark.css</h4>
|
||||||
|
<img src="screenshots/pink/pink-soft-dark.png"/>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
## 自定义 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` 末尾
|
||||||
173
README_EN.md
173
README_EN.md
@@ -1,173 +0,0 @@
|
|||||||
<h1 align="center">
|
|
||||||
<p>Gitea GitHub Theme</p>
|
|
||||||
<img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37">
|
|
||||||
<img src="https://img.shields.io/github/issues-closed-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=8250df">
|
|
||||||
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/total?style=for-the-badge&labelColor=25292e&color=1f6feb">
|
|
||||||
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/latest/total?style=for-the-badge&labelColor=25292e&color=238636">
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div align="center">
|
|
||||||
|
|
||||||
English • [中文](README.md)
|
|
||||||
|
|
||||||
A Gitea theme that pursues GitHub style not only in colors but also in styling details.
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
> [!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
|
|
||||||
```
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Base</summary>
|
|
||||||
<h4>theme-github-light.css</h4>
|
|
||||||
<img src="screenshots/en/light.png"/>
|
|
||||||
<h4>theme-github-dark.css</h4>
|
|
||||||
<img src="screenshots/en/dark.png"/>
|
|
||||||
<h4>theme-github-soft-dark.css</h4>
|
|
||||||
<img src="screenshots/en/soft-dark.png"/>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
### Colorblind Themes (Beta)
|
|
||||||
|
|
||||||
```ini
|
|
||||||
THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark
|
|
||||||
THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
|
|
||||||
```
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Colorblind & Tritanopia</summary>
|
|
||||||
<h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4>
|
|
||||||
<img src="screenshots/en/colorblind-light.png"/>
|
|
||||||
<h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4>
|
|
||||||
<img src="screenshots/en/colorblind-dark.png"/>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
### Pink Themes
|
|
||||||
|
|
||||||
```ini
|
|
||||||
THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark
|
|
||||||
```
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Pink</summary>
|
|
||||||
<h4>theme-github-pink-light.css</h4>
|
|
||||||
<img src="screenshots/pink/en/pink-light-en.png"/>
|
|
||||||
<h4>theme-github-pink-dark.css</h4>
|
|
||||||
<img src="screenshots/pink/en/pink-dark-en.png"/>
|
|
||||||
<h4>theme-github-pink-soft-dark.css</h4>
|
|
||||||
<img src="screenshots/pink/en/pink-soft-dark-en.png"/>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
## 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`
|
|
||||||
Reference in New Issue
Block a user