Skip to content

Commit 023e937

Browse files
silverwindlunnyGiteaBot
authored
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419)
Part of #27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## ⚠️ BREAKING ⚠️ 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
1 parent 04e88e6 commit 023e937

20 files changed

+308
-269
lines changed

‎custom/conf/app.example.ini

+2-2
Original file line numberDiff line numberDiff line change
@@ -1209,10 +1209,10 @@ LEVEL = Info
12091209
;SHOW_USER_EMAIL = true
12101210
;;
12111211
;; Set the default theme for the Gitea install
1212-
;DEFAULT_THEME = auto
1212+
;DEFAULT_THEME = gitea-auto
12131213
;;
12141214
;; All available themes. Allow users select personalized themes regardless of the value of `DEFAULT_THEME`.
1215-
;THEMES = auto,gitea,arc-green
1215+
;THEMES = gitea-auto,gitea-light,gitea-dark
12161216
;;
12171217
;; All available reactions users can choose on issues/prs and comments.
12181218
;; Values can be emoji alias (:smile:) or a unicode emoji.

‎docs/content/administration/config-cheat-sheet.en-us.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -215,9 +215,9 @@ The following configuration set `Content-Type: application/vnd.android.package-a
215215
- `SITEMAP_PAGING_NUM`: **20**: Number of items that are displayed in a single subsitemap.
216216
- `GRAPH_MAX_COMMIT_NUM`: **100**: Number of maximum commits shown in the commit graph.
217217
- `CODE_COMMENT_LINES`: **4**: Number of line of codes shown for a code comment.
218-
- `DEFAULT_THEME`: **auto**: \[auto, gitea, arc-green\]: Set the default theme for the Gitea install.
218+
- `DEFAULT_THEME`: **gitea-auto**: \[gitea-auto, gitea-light, gitea-dark\]: Set the default theme for the Gitea installation.
219219
- `SHOW_USER_EMAIL`: **true**: Whether the email of the user should be shown in the Explore Users page.
220-
- `THEMES`: **auto,gitea,arc-green**: All available themes. Allow users select personalized themes.
220+
- `THEMES`: **gitea-auto,gitea-light,gitea-dark**: All available themes. Allow users select personalized themes.
221221
regardless of the value of `DEFAULT_THEME`.
222222
- `MAX_DISPLAY_FILE_SIZE`: **8388608**: Max size of files to be displayed (default is 8MiB)
223223
- `REACTIONS`: All available reactions users can choose on issues/prs and comments

‎docs/content/administration/config-cheat-sheet.zh-cn.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -214,9 +214,9 @@ menu:
214214
- `SITEMAP_PAGING_NUM`: **20**: 在单个子SiteMap中显示的项数。
215215
- `GRAPH_MAX_COMMIT_NUM`: **100**: 提交图中显示的最大commit数量。
216216
- `CODE_COMMENT_LINES`: **4**: 在代码评论中能够显示的最大代码行数。
217-
- `DEFAULT_THEME`: **auto**: \[auto, gitea, arc-green\]: 在Gitea安装时候设置的默认主题。
217+
- `DEFAULT_THEME`: **gitea-auto**: \[gitea-auto, gitea-light, gitea-dark\]: 在Gitea安装时候设置的默认主题。
218218
- `SHOW_USER_EMAIL`: **true**: 用户的电子邮件是否应该显示在`Explore Users`页面中。
219-
- `THEMES`: **auto,gitea,arc-green**: 所有可用的主题。允许用户选择个性化的主题，
219+
- `THEMES`: **gitea-auto,gitea-light,gitea-dark**: 所有可用的主题。允许用户选择个性化的主题，
220220
而不受DEFAULT_THEME 值的影响。
221221
- `MAX_DISPLAY_FILE_SIZE`: **8388608**: 能够显示文件的最大大小（默认为8MiB）。
222222
- `REACTIONS`: 用户可以在问题（Issue）、Pull Request（PR）以及评论中选择的所有可选的反应。

‎docs/content/administration/customizing-gitea.en-us.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -370,7 +370,8 @@ A full list of supported emoji's is at [emoji list](https://gitea.com/gitea/gite
370370
371371
## Customizing the look of Gitea
372372
373-
The default built-in themes are `gitea` (light), `arc-green` (dark), and `auto` (chooses light or dark depending on operating system settings).
373+
The built-in themes are `gitea-light`, `gitea-dark`, and `gitea-auto` (which automatically adapts to OS settings).
374+
374375
The default theme can be changed via `DEFAULT_THEME` in the [ui](administration/config-cheat-sheet.md#ui-ui) section of `app.ini`.
375376
376377
Gitea also has support for user themes, which means every user can select which theme should be used.
@@ -384,7 +385,7 @@ To make a custom theme available to all users:
384385
385386
Community themes are listed in [gitea/awesome-gitea#themes](https://gitea.com/gitea/awesome-gitea#themes).
386387
387-
The `arc-green` theme source can be found [here](https://github.com/go-gitea/gitea/blob/main/web_src/css/themes/theme-arc-green.css).
388+
The default theme sources can be found [here](https://github.com/go-gitea/gitea/blob/main/web_src/css/themes).
388389
389390
If your custom theme is considered a dark theme, set the global css variable `--is-dark-theme` to `true`.
390391
This allows Gitea to adjust the Monaco code editor's theme accordingly.

‎docs/content/administration/customizing-gitea.zh-cn.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -86,5 +86,6 @@ Gitea 引用 `custom` 目录中的自定义配置文件来覆盖配置、模板
8686

8787
## 更改 Gitea 外观
8888

89-
Gitea 目前由两种内置主题，分别为默认 `gitea` 主题和深色主题 `arc-green`，您可以通过修改
90-
`app.ini` [ui](administration/config-cheat-sheet.md#ui-ui) 部分的 `DEFAULT_THEME` 的值来变更至一个可用的 Gitea 外观。
89+
内置主题是“gitea-light”、“gitea-dark”和“gitea-auto”（自动适应操作系统设置）。
90+
91+
默认主题可以通过 `app.ini` 的 [ui](administration/config-cheat-sheet.md#ui-ui) 部分中的 `DEFAULT_THEME` 进行更改。

‎docs/content/help/faq.en-us.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ Use [Fail2Ban](administration/fail2ban-setup.md) to monitor and stop automated l
181181

182182
## How to add/use custom themes
183183

184-
Gitea supports three official themes right now, `gitea` (light), `arc-green` (dark), and `auto` (automatically switches between the previous two depending on operating system settings).
184+
Gitea supports three official themes right now, `gitea-light`, `gitea-dark`, and `gitea-auto` (automatically switches between the previous two depending on operating system settings).
185185
To add your own theme, currently the only way is to provide a complete theme (not just color overrides)
186186

187187
As an example, let's say our theme is `arc-blue` (this is a real theme, and can be found [in this issue](https://github.com/go-gitea/gitea/issues/6011))

‎docs/content/help/faq.zh-cn.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ Gitea不提供内置的Pages服务器。您需要一个专用的域名来提供
185185

186186
## 如何添加/使用自定义主题
187187

188-
Gitea 目前支持三个官方主题，分别是 `gitea`（亮色）、`arc-green`（暗色）和 `auto`（根据操作系统设置自动切换前两个主题）。
188+
Gitea 目前支持三个官方主题，分别是 `gitea-light`、`gitea-dark` 和 `gitea-auto`（根据操作系统设置自动切换前两个主题）。
189189
要添加自己的主题，目前唯一的方法是提供一个完整的主题（不仅仅是颜色覆盖）。
190190

191191
假设我们的主题是 `arc-blue`（这是一个真实的主题，可以在[此问题](https://github.com/go-gitea/gitea/issues/6011)中找到）

‎models/migrations/migrations.go

+6
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import (
2020
"code.gitea.io/gitea/models/migrations/v1_19"
2121
"code.gitea.io/gitea/models/migrations/v1_20"
2222
"code.gitea.io/gitea/models/migrations/v1_21"
23+
"code.gitea.io/gitea/models/migrations/v1_22"
2324
"code.gitea.io/gitea/models/migrations/v1_6"
2425
"code.gitea.io/gitea/models/migrations/v1_7"
2526
"code.gitea.io/gitea/models/migrations/v1_8"
@@ -540,6 +541,11 @@ var migrations = []Migration{
540541
NewMigration("Add Index to comment.dependent_issue_id", v1_21.AddIndexToCommentDependentIssueID),
541542
// v279 -> v280
542543
NewMigration("Add Index to action.user_id", v1_21.AddIndexToActionUserID),
544+
545+
// Gitea 1.21.0 ends at 280
546+
547+
// v280 -> v281
548+
NewMigration("Rename user themes", v1_22.RenameUserThemes),
543549
}
544550

545551
// GetCurrentDBVersion returns the current db version

‎models/migrations/v1_22/v280.go

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// Copyright 2023 The Gitea Authors. All rights reserved.
2+
// SPDX-License-Identifier: MIT
3+
4+
package v1_22 //nolint
5+
6+
import (
7+
"xorm.io/xorm"
8+
)
9+
10+
func RenameUserThemes(x *xorm.Engine) error {
11+
sess := x.NewSession()
12+
defer sess.Close()
13+
14+
if err := sess.Begin(); err != nil {
15+
return err
16+
}
17+
18+
if _, err := sess.Exec("UPDATE `user` SET `theme` = 'gitea-light' WHERE `theme` = 'gitea'"); err != nil {
19+
return err
20+
}
21+
if _, err := sess.Exec("UPDATE `user` SET `theme` = 'gitea-dark' WHERE `theme` = 'arc-green'"); err != nil {
22+
return err
23+
}
24+
if _, err := sess.Exec("UPDATE `user` SET `theme` = 'gitea-auto' WHERE `theme` = 'auto'"); err != nil {
25+
return err
26+
}
27+
28+
return sess.Commit()
29+
}

‎modules/setting/ui.go

+2-2
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ var UI = struct {
7676
CodeCommentLines: 4,
7777
ReactionMaxUserNum: 10,
7878
MaxDisplayFileSize: 8388608,
79-
DefaultTheme: `auto`,
80-
Themes: []string{`auto`, `gitea`, `arc-green`},
79+
DefaultTheme: `gitea-auto`,
80+
Themes: []string{`gitea-auto`, `gitea-light`, `gitea-dark`},
8181
Reactions: []string{`+1`, `-1`, `laugh`, `hooray`, `confused`, `heart`, `rocket`, `eyes`},
8282
CustomEmojis: []string{`git`, `gitea`, `codeberg`, `gitlab`, `github`, `gogs`},
8383
CustomEmojisMap: map[string]string{"git": ":git:", "gitea": ":gitea:", "codeberg": ":codeberg:", "gitlab": ":gitlab:", "github": ":github:", "gogs": ":gogs:"},

‎modules/templates/helper.go

+6-2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import (
1212
"strings"
1313
"time"
1414

15+
user_model "code.gitea.io/gitea/models/user"
1516
"code.gitea.io/gitea/modules/base"
1617
"code.gitea.io/gitea/modules/emoji"
1718
"code.gitea.io/gitea/modules/markup"
@@ -131,8 +132,11 @@ func NewFuncMap() template.FuncMap {
131132
"DisableImportLocal": func() bool {
132133
return !setting.ImportLocalPaths
133134
},
134-
"DefaultTheme": func() string {
135-
return setting.UI.DefaultTheme
135+
"ThemeName": func(user *user_model.User) string {
136+
if user == nil || user.Theme == "" {
137+
return setting.UI.DefaultTheme
138+
}
139+
return user.Theme
136140
},
137141
"NotificationSettings": func() map[string]any {
138142
return map[string]any{

‎templates/base/head.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="{{ctx.Locale.Lang}}" class="theme-{{if .SignedUser.Theme}}{{.SignedUser.Theme}}{{else}}{{DefaultTheme}}{{end}}">
2+
<html lang="{{ctx.Locale.Lang}}" data-theme="{{ThemeName .SignedUser}}">
33
<head>
44
<meta name="viewport" content="width=device-width, initial-scale=1">
55
<title>{{if .Title}}{{.Title | RenderEmojiPlain}} - {{end}}{{if .Repository.Name}}{{.Repository.Name}} - {{end}}{{AppName}}</title>

‎templates/base/head_style.tmpl

+1-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,2 @@
11
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{AssetVersion}}">
2-
{{if .IsSigned}}
3-
{{if ne .SignedUser.Theme "gitea"}}
4-
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{.SignedUser.Theme | PathEscape}}.css?v={{AssetVersion}}">
5-
{{end}}
6-
{{else if ne DefaultTheme "gitea"}}
7-
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{DefaultTheme | PathEscape}}.css?v={{AssetVersion}}">
8-
{{end}}
2+
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{ThemeName .SignedUser | PathEscape}}.css?v={{AssetVersion}}">

‎templates/status/500.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{/* This page should only depend the minimal template functions/variables, to avoid triggering new panics.
2-
* base template functions: AppName, AssetUrlPrefix, AssetVersion, AppSubUrl, DefaultTheme, Str2html
2+
* base template functions: AppName, AssetUrlPrefix, AssetVersion, AppSubUrl, ThemeName, Str2html
33
* locale
44
* Flash
55
* ErrorMsg
66
* SignedUser (optional)
77
*/}}
88
<!DOCTYPE html>
9-
<html lang="{{.locale.Lang}}" class="theme-{{if .SignedUser.Theme}}{{.SignedUser.Theme}}{{else}}{{DefaultTheme}}{{end}}">
9+
<html lang="{{.locale.Lang}}" data-theme="{{ThemeName .SignedUser}}">
1010
<head>
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
1212
<title>Internal Server Error - {{AppName}}</title>

0 commit comments

Comments
 (0)