You've already forked gitea-banana-theme
自述文件更新
This commit is contained in:
User
37
README.md
37
README.md
@@ -1,9 +1,4 @@
|
||||
<p align="center">
|
||||
中文 |
|
||||
<a href="./README_EN.md">English</a>
|
||||
</p>
|
||||
|
||||
# Gitea GitHub Theme
|
||||
# Gitea Banana Theme
|
||||
|
||||
> [!TIP]
|
||||
>
|
||||
@@ -35,13 +30,13 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
|
||||
>
|
||||
> 自动颜色主题需要亮色和暗色的主题文件
|
||||
|
||||
例: 主题文件名为 `theme-github-dark.css`，则添加 `github-dark` 到 `THEMES` 末尾
|
||||
例: 主题文件名为 `theme-Banana-dark.css`，则添加 `Banana-dark` 到 `THEMES` 末尾
|
||||
|
||||
`gitea/conf/app.ini` 例:
|
||||
|
||||
```ini
|
||||
[ui]
|
||||
THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark
|
||||
THEMES = gitea-auto, gitea-light, gitea-dark, Banana-auto, Banana-light, Banana-dark, Banana-soft-dark
|
||||
```
|
||||
|
||||
详细请查看 Gitea 文档
|
||||
@@ -54,47 +49,47 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
|
||||
### 基本主题
|
||||
|
||||
```ini
|
||||
THEMES = github-auto, github-light, github-dark, github-soft-dark
|
||||
THEMES = Banana-auto, Banana-light, Banana-dark, Banana-soft-dark
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>Base</summary>
|
||||
<h4>theme-github-light.css</h4>
|
||||
<h4>theme-Banana-light.css</h4>
|
||||
<img src="screenshots/light.png"/>
|
||||
<h4>theme-github-dark.css</h4>
|
||||
<h4>theme-Banana-dark.css</h4>
|
||||
<img src="screenshots/dark.png"/>
|
||||
<h4>theme-github-soft-dark.css</h4>
|
||||
<h4>theme-Banana-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
|
||||
THEMES = Banana-colorblind-auto, Banana-colorblind-light, Banana-colorblind-dark
|
||||
THEMES = Banana-tritanopia-auto, Banana-tritanopia-light, Banana-tritanopia-dark
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>Colorblind & Tritanopia (红绿色盲 & 蓝色盲)</summary>
|
||||
<h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4>
|
||||
<h4>theme-Banana-colorblind-light.css & theme-Banana-tritanopia-light.css</h4>
|
||||
<img src="screenshots/colorblind-light.png"/>
|
||||
<h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4>
|
||||
<h4>theme-Banana-colorblind-dark.css & theme-Banana-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
|
||||
THEMES = Banana-pink-auto, Banana-pink-light, Banana-pink-dark, Banana-pink-soft-dark
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>Pink</summary>
|
||||
<h4>theme-github-pink-light.css</h4>
|
||||
<h4>theme-Banana-pink-light.css</h4>
|
||||
<img src="screenshots/pink/pink-light.png"/>
|
||||
<h4>theme-github-pink-dark.css</h4>
|
||||
<h4>theme-Banana-pink-dark.css</h4>
|
||||
<img src="screenshots/pink/pink-dark.png"/>
|
||||
<h4>theme-github-pink-soft-dark.css</h4>
|
||||
<h4>theme-Banana-pink-soft-dark.css</h4>
|
||||
<img src="screenshots/pink/pink-soft-dark.png"/>
|
||||
</details>
|
||||
|
||||
@@ -142,7 +137,7 @@ THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft
|
||||
|
||||
```bash
|
||||
git clone https://github.com/lutinglt/gitea-github-theme.git
|
||||
cd gitea-github-theme
|
||||
cd gitea-Banana-theme
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
159
README_EN.md
159
README_EN.md
@@ -1,159 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="./README.md">中文</a> |
|
||||
English
|
||||
</p>
|
||||
|
||||
# Gitea GitHub Theme
|
||||
|
||||
> [!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`
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
<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`
|
||||
|
||||
## Contribution
|
||||
|
||||
Please refer to [CONTRIBUTING](CONTRIBUTING.md)
|
||||
Reference in New Issue
Block a user