diff --git a/README.md b/README.md index ba03c10..00ad2e5 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,57 @@

- English | - 中文 + 中文 | + English

# gitea-github-theme -A meticulously crafted Gitea theme that mimics the GitHub style +一个精致模仿 Github 风格的 Gitea 主题 > [!TIP] > -> For the best experience, it is recommended to use this theme with the file explorer icon plugin +> 推荐搭配文件图标浏览器插件一起使用更佳 > [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 版本号保持一致 -Gitea version number format: `1.major.minor` +Gitea 版本号格式: `1.大版本号.小版本号` -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. +Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本. -For example: Theme version `1.24.5` is applicable to Gitea versions `>=1.24.0` `<1.25.0` +比如: 主题版本 `1.24.5` 适用于 Gitea 版本 `>=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. +仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR. -> Development stage theme version number format: `1.major.minor.timestamp` +> 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳` -## 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 +1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下 +2. 修改 `gitea/conf/app.ini`，并将 CSS 文件名去掉 `theme-` 的名称附加到 `[ui]` 下的 `THEMES` 末尾 +3. 重启 Gitea +4. 在设置中查看主题 > [!IMPORTANT] > -> Automatic color theme requires both light and dark theme files +> 自动颜色主题需要亮色和暗色的主题文件 -Example: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES` +例: 主题文件名为 `theme-github-dark.css`，则添加 `github-dark` 到 `THEMES` 末尾 -Example `gitea/conf/app.ini`: +`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 文档 [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea) -## Screenshots +## 截图 -### Basic Themes +### 基本主题 ```ini THEMES = github-auto, github-light, github-dark, github-soft-dark @@ -60,14 +60,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

- +
-### Colorblind Themes (Beta) +### 色盲主题 ( Beta ) ```ini THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark @@ -75,20 +75,20 @@ 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

- +
-## Custom CSS Variables +## 自定义 CSS 变量 -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 文件的头部或尾部添加以下代码 ```css :root { @@ -99,28 +99,28 @@ Add the following code at the beginning or end of the theme's CSS file > [!IMPORTANT] > -> Please ensure to add custom variables in the `:root` selector, otherwise they will not take effect +> 请确保在 `:root` 选择器中添加自定义变量，否则无法生效 > -> 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 +> 建议自定义变量放在单独的文件中, 通过 shell 命令等方式追加到主题文件中 -### CSS Variables +### CSS 变量 -| Variable Name | Description | Default | Github | Recommend | Min | Max | -| :-------------------------------- | :-------------------------------------------- | :------ | :----- | :-------- | :---- | :---- | -| --custom-clone-menu-width | Clone button menu width | Gitea | 332px | 200px | 150px | 400px | -| --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 | | | +| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 | +| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- | +| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px | +| --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 | | | -## 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 +请确保你已经安装了 Node.js 环境, 推荐使用 Node.js 20 或以上版本 ```bash git clone https://github.com/lutinglt/gitea-github-theme.git @@ -129,8 +129,9 @@ 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` +编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在 +`gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾 -## Contribution +## 贡献 -Please refer to [CONTRIBUTING](CONTRIBUTING.md) \ No newline at end of file +请查看 [CONTRIBUTING](CONTRIBUTING.md) diff --git a/README_EN.md b/README_EN.md new file mode 100644 index 0000000..1d298f1 --- /dev/null +++ b/README_EN.md @@ -0,0 +1,141 @@ +

+ 中文 | + English +

+ +# gitea-github-theme + +A meticulously crafted Gitea theme that mimics the GitHub style + +> [!TIP] +> +> For the best experience, it is recommended to use this theme with the file explorer icon plugin +> [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` + +## 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 + +> [!IMPORTANT] +> +> Automatic color theme requires both light and dark theme files + +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) + +## 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

+ +
+ +## 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-clone-menu-width | Clone button menu width | Gitea | 332px | 200px | 150px | 400px | +| --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` + +## Contribution + +Please refer to [CONTRIBUTING](CONTRIBUTING.md) diff --git a/README_ZH.md b/README_ZH.md deleted file mode 100644 index f2da754..0000000 --- a/README_ZH.md +++ /dev/null @@ -1,137 +0,0 @@ -

- English | - 中文 -

- -# gitea-github-theme - -一个精致模仿 Github 风格的 Gitea 主题 - -> [!TIP] -> -> 推荐搭配文件图标浏览器插件一起使用更佳 -> [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.大版本号.小版本号.时间戳` - -## 安装 - -1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下 -2. 修改 `gitea/conf/app.ini`，并将 CSS 文件名去掉 `theme-` 的名称附加到 `[ui]` 下的 `THEMES` 末尾 -3. 重启 Gitea -4. 在设置中查看主题 - -> [!IMPORTANT] -> -> 自动颜色主题需要亮色和暗色的主题文件 - -例: 主题文件名为 `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) - -## 截图 - -### 基本主题 - -```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

- -
- -## 自定义 CSS 变量 - -可以根据自己的偏好自定义主题的一部分样式 - -### 使用方法 - -在主题的 CSS 文件的头部或尾部添加以下代码 - -```css -:root { - --custom-clone-menu-width: 150px; - ... -} -``` - -> [!IMPORTANT] -> -> 请确保在 `:root` 选择器中添加自定义变量，否则无法生效 -> -> 变量之间用 `;` 分隔 -> -> 建议自定义变量放在单独的文件中, 通过 shell 命令等方式追加到主题文件中 - -### CSS 变量 - -| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 | -| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- | -| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px | -| --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` 末尾 - -## 贡献 - -请查看 [CONTRIBUTING](CONTRIBUTING.md)