diff --git a/custom/conf/app.example.ini b/custom/conf/app.example.ini
index 7db3c157c9dc..a4ff78fb358f 100644
--- a/custom/conf/app.example.ini
+++ b/custom/conf/app.example.ini
@@ -1209,10 +1209,10 @@ LEVEL = Info
;SHOW_USER_EMAIL = true
;;
;; Set the default theme for the Gitea install
-;DEFAULT_THEME = auto
+;DEFAULT_THEME = gitea-auto
;;
;; All available themes. Allow users select personalized themes regardless of the value of `DEFAULT_THEME`.
-;THEMES = auto,gitea,arc-green
+;THEMES = gitea-auto,gitea-light,gitea-dark
;;
;; All available reactions users can choose on issues/prs and comments.
;; Values can be emoji alias (:smile:) or a unicode emoji.
diff --git a/docs/content/administration/config-cheat-sheet.en-us.md b/docs/content/administration/config-cheat-sheet.en-us.md
index a337ae82a05b..8bb2b19c280f 100644
--- a/docs/content/administration/config-cheat-sheet.en-us.md
+++ b/docs/content/administration/config-cheat-sheet.en-us.md
@@ -215,9 +215,9 @@ The following configuration set `Content-Type: application/vnd.android.package-a
- `SITEMAP_PAGING_NUM`: **20**: Number of items that are displayed in a single subsitemap.
- `GRAPH_MAX_COMMIT_NUM`: **100**: Number of maximum commits shown in the commit graph.
- `CODE_COMMENT_LINES`: **4**: Number of line of codes shown for a code comment.
-- `DEFAULT_THEME`: **auto**: \[auto, gitea, arc-green\]: Set the default theme for the Gitea install.
+- `DEFAULT_THEME`: **gitea-auto**: \[gitea-auto, gitea-light, gitea-dark\]: Set the default theme for the Gitea installation.
- `SHOW_USER_EMAIL`: **true**: Whether the email of the user should be shown in the Explore Users page.
-- `THEMES`: **auto,gitea,arc-green**: All available themes. Allow users select personalized themes.
+- `THEMES`: **gitea-auto,gitea-light,gitea-dark**: All available themes. Allow users select personalized themes.
regardless of the value of `DEFAULT_THEME`.
- `MAX_DISPLAY_FILE_SIZE`: **8388608**: Max size of files to be displayed (default is 8MiB)
- `REACTIONS`: All available reactions users can choose on issues/prs and comments
diff --git a/docs/content/administration/config-cheat-sheet.zh-cn.md b/docs/content/administration/config-cheat-sheet.zh-cn.md
index 2849752c0ab5..fbd65a1919a6 100644
--- a/docs/content/administration/config-cheat-sheet.zh-cn.md
+++ b/docs/content/administration/config-cheat-sheet.zh-cn.md
@@ -214,9 +214,9 @@ menu:
- `SITEMAP_PAGING_NUM`: **20**: 在单个子SiteMap中显示的项数。
- `GRAPH_MAX_COMMIT_NUM`: **100**: 提交图中显示的最大commit数量。
- `CODE_COMMENT_LINES`: **4**: 在代码评论中能够显示的最大代码行数。
-- `DEFAULT_THEME`: **auto**: \[auto, gitea, arc-green\]: 在Gitea安装时候设置的默认主题。
+- `DEFAULT_THEME`: **gitea-auto**: \[gitea-auto, gitea-light, gitea-dark\]: 在Gitea安装时候设置的默认主题。
- `SHOW_USER_EMAIL`: **true**: 用户的电子邮件是否应该显示在`Explore Users`页面中。
-- `THEMES`: **auto,gitea,arc-green**: 所有可用的主题。允许用户选择个性化的主题，
+- `THEMES`: **gitea-auto,gitea-light,gitea-dark**: 所有可用的主题。允许用户选择个性化的主题，
而不受DEFAULT_THEME 值的影响。
- `MAX_DISPLAY_FILE_SIZE`: **8388608**: 能够显示文件的最大大小（默认为8MiB）。
- `REACTIONS`: 用户可以在问题（Issue）、Pull Request（PR）以及评论中选择的所有可选的反应。
diff --git a/docs/content/administration/customizing-gitea.en-us.md b/docs/content/administration/customizing-gitea.en-us.md
index 4c2d7ed0c418..d122fb4bfaac 100644
--- a/docs/content/administration/customizing-gitea.en-us.md
+++ b/docs/content/administration/customizing-gitea.en-us.md
@@ -370,7 +370,8 @@ A full list of supported emoji's is at [emoji list](https://gitea.com/gitea/gite
## Customizing the look of Gitea
-The default built-in themes are `gitea` (light), `arc-green` (dark), and `auto` (chooses light or dark depending on operating system settings).
+The built-in themes are `gitea-light`, `gitea-dark`, and `gitea-auto` (which automatically adapts to OS settings).
+
The default theme can be changed via `DEFAULT_THEME` in the [ui](administration/config-cheat-sheet.md#ui-ui) section of `app.ini`.
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:
Community themes are listed in [gitea/awesome-gitea#themes](https://gitea.com/gitea/awesome-gitea#themes).
-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).
+The default theme sources can be found [here](https://github.com/go-gitea/gitea/blob/main/web_src/css/themes).
If your custom theme is considered a dark theme, set the global css variable `--is-dark-theme` to `true`.
This allows Gitea to adjust the Monaco code editor's theme accordingly.
diff --git a/docs/content/administration/customizing-gitea.zh-cn.md b/docs/content/administration/customizing-gitea.zh-cn.md
index 2babf03da79b..d828704557cf 100644
--- a/docs/content/administration/customizing-gitea.zh-cn.md
+++ b/docs/content/administration/customizing-gitea.zh-cn.md
@@ -86,5 +86,6 @@ Gitea 引用 `custom` 目录中的自定义配置文件来覆盖配置、模板
## 更改 Gitea 外观
-Gitea 目前由两种内置主题，分别为默认 `gitea` 主题和深色主题 `arc-green`，您可以通过修改
-`app.ini` [ui](administration/config-cheat-sheet.md#ui-ui) 部分的 `DEFAULT_THEME` 的值来变更至一个可用的 Gitea 外观。
+内置主题是“gitea-light”、“gitea-dark”和“gitea-auto”（自动适应操作系统设置）。
+
+默认主题可以通过 `app.ini` 的 [ui](administration/config-cheat-sheet.md#ui-ui) 部分中的 `DEFAULT_THEME` 进行更改。
diff --git a/docs/content/help/faq.en-us.md b/docs/content/help/faq.en-us.md
index c83f8549e20d..b4f5171bcfd9 100644
--- a/docs/content/help/faq.en-us.md
+++ b/docs/content/help/faq.en-us.md
@@ -181,7 +181,7 @@ Use [Fail2Ban](administration/fail2ban-setup.md) to monitor and stop automated l
## How to add/use custom themes
-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).
+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).
To add your own theme, currently the only way is to provide a complete theme (not just color overrides)
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))
diff --git a/docs/content/help/faq.zh-cn.md b/docs/content/help/faq.zh-cn.md
index 36610db8e0b8..ff53fc1d0396 100644
--- a/docs/content/help/faq.zh-cn.md
+++ b/docs/content/help/faq.zh-cn.md
@@ -185,7 +185,7 @@ Gitea不提供内置的Pages服务器。您需要一个专用的域名来提供
## 如何添加/使用自定义主题
-Gitea 目前支持三个官方主题，分别是 `gitea`（亮色）、`arc-green`（暗色）和 `auto`（根据操作系统设置自动切换前两个主题）。
+Gitea 目前支持三个官方主题，分别是 `gitea-light`、`gitea-dark` 和 `gitea-auto`（根据操作系统设置自动切换前两个主题）。
要添加自己的主题，目前唯一的方法是提供一个完整的主题（不仅仅是颜色覆盖）。
假设我们的主题是 `arc-blue`（这是一个真实的主题，可以在[此问题](https://github.com/go-gitea/gitea/issues/6011)中找到）
diff --git a/models/migrations/migrations.go b/models/migrations/migrations.go
index 020043cfc3b3..a8037fa67ed1 100644
--- a/models/migrations/migrations.go
+++ b/models/migrations/migrations.go
@@ -20,6 +20,7 @@ import (
"code.gitea.io/gitea/models/migrations/v1_19"
"code.gitea.io/gitea/models/migrations/v1_20"
"code.gitea.io/gitea/models/migrations/v1_21"
+ "code.gitea.io/gitea/models/migrations/v1_22"
"code.gitea.io/gitea/models/migrations/v1_6"
"code.gitea.io/gitea/models/migrations/v1_7"
"code.gitea.io/gitea/models/migrations/v1_8"
@@ -540,6 +541,11 @@ var migrations = []Migration{
NewMigration("Add Index to comment.dependent_issue_id", v1_21.AddIndexToCommentDependentIssueID),
// v279 -> v280
NewMigration("Add Index to action.user_id", v1_21.AddIndexToActionUserID),
+
+ // Gitea 1.21.0 ends at 280
+
+ // v280 -> v281
+ NewMigration("Rename user themes", v1_22.RenameUserThemes),
}
// GetCurrentDBVersion returns the current db version
diff --git a/models/migrations/v1_22/v280.go b/models/migrations/v1_22/v280.go
new file mode 100644
index 000000000000..a8ee4a3bf7da
--- /dev/null
+++ b/models/migrations/v1_22/v280.go
@@ -0,0 +1,29 @@
+// Copyright 2023 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package v1_22 //nolint
+
+import (
+ "xorm.io/xorm"
+)
+
+func RenameUserThemes(x *xorm.Engine) error {
+ sess := x.NewSession()
+ defer sess.Close()
+
+ if err := sess.Begin(); err != nil {
+ return err
+ }
+
+ if _, err := sess.Exec("UPDATE `user` SET `theme` = 'gitea-light' WHERE `theme` = 'gitea'"); err != nil {
+ return err
+ }
+ if _, err := sess.Exec("UPDATE `user` SET `theme` = 'gitea-dark' WHERE `theme` = 'arc-green'"); err != nil {
+ return err
+ }
+ if _, err := sess.Exec("UPDATE `user` SET `theme` = 'gitea-auto' WHERE `theme` = 'auto'"); err != nil {
+ return err
+ }
+
+ return sess.Commit()
+}
diff --git a/modules/setting/ui.go b/modules/setting/ui.go
index 41438db40d5e..231698bf6058 100644
--- a/modules/setting/ui.go
+++ b/modules/setting/ui.go
@@ -76,8 +76,8 @@ var UI = struct {
CodeCommentLines: 4,
ReactionMaxUserNum: 10,
MaxDisplayFileSize: 8388608,
- DefaultTheme: `auto`,
- Themes: []string{`auto`, `gitea`, `arc-green`},
+ DefaultTheme: `gitea-auto`,
+ Themes: []string{`gitea-auto`, `gitea-light`, `gitea-dark`},
Reactions: []string{`+1`, `-1`, `laugh`, `hooray`, `confused`, `heart`, `rocket`, `eyes`},
CustomEmojis: []string{`git`, `gitea`, `codeberg`, `gitlab`, `github`, `gogs`},
CustomEmojisMap: map[string]string{"git": ":git:", "gitea": ":gitea:", "codeberg": ":codeberg:", "gitlab": ":gitlab:", "github": ":github:", "gogs": ":gogs:"},
diff --git a/modules/templates/helper.go b/modules/templates/helper.go
index bb1411cbfdb3..235fd96b73d8 100644
--- a/modules/templates/helper.go
+++ b/modules/templates/helper.go
@@ -12,6 +12,7 @@ import (
"strings"
"time"
+ user_model "code.gitea.io/gitea/models/user"
"code.gitea.io/gitea/modules/base"
"code.gitea.io/gitea/modules/emoji"
"code.gitea.io/gitea/modules/markup"
@@ -131,8 +132,11 @@ func NewFuncMap() template.FuncMap {
"DisableImportLocal": func() bool {
return !setting.ImportLocalPaths
},
- "DefaultTheme": func() string {
- return setting.UI.DefaultTheme
+ "ThemeName": func(user *user_model.User) string {
+ if user == nil || user.Theme == "" {
+ return setting.UI.DefaultTheme
+ }
+ return user.Theme
},
"NotificationSettings": func() map[string]any {
return map[string]any{
diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
index c3645209cd60..876b42d512b1 100644
--- a/templates/base/head.tmpl
+++ b/templates/base/head.tmpl
@@ -1,5 +1,5 @@
-
+
{{if .Title}}{{.Title | RenderEmojiPlain}} - {{end}}{{if .Repository.Name}}{{.Repository.Name}} - {{end}}{{AppName}}
diff --git a/templates/base/head_style.tmpl b/templates/base/head_style.tmpl
index 7e8cba2aedde..0793eaca20dc 100644
--- a/templates/base/head_style.tmpl
+++ b/templates/base/head_style.tmpl
@@ -1,8 +1,2 @@
-{{if .IsSigned}}
- {{if ne .SignedUser.Theme "gitea"}}
-
- {{end}}
-{{else if ne DefaultTheme "gitea"}}
-
-{{end}}
+
diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl
index 5488976da288..e5570bde738d 100644
--- a/templates/status/500.tmpl
+++ b/templates/status/500.tmpl
@@ -1,12 +1,12 @@
{{/* This page should only depend the minimal template functions/variables, to avoid triggering new panics.
-* base template functions: AppName, AssetUrlPrefix, AssetVersion, AppSubUrl, DefaultTheme, Str2html
+* base template functions: AppName, AssetUrlPrefix, AssetVersion, AppSubUrl, ThemeName, Str2html
* locale
* Flash
* ErrorMsg
* SignedUser (optional)
*/}}
-
+
Internal Server Error - {{AppName}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index c1ebc959d550..efb2553db4c8 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -11,252 +11,17 @@
--font-weight-bold: 700;
/* line-height: use the default value as "modules/normalize.css" */
--line-height-default: normal;
- /* backgrounds */
+ /* images */
--checkbox-mask-checked: url('data:image/svg+xml;utf8,');
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,');
--octicon-chevron-right: url('data:image/svg+xml;utf8,');
- /* non-color variables */
+ /* other variables */
--border-radius: 4px;
--border-radius-medium: 6px;
--border-radius-circle: 50%;
--opacity-disabled: 0.55;
--height-loading: 16rem;
--tab-size: 4;
- /* base colors */
- --color-primary: #4183c4;
- --color-primary-contrast: #ffffff;
- --color-primary-dark-1: #3876b3;
- --color-primary-dark-2: #31699f;
- --color-primary-dark-3: #2b5c8b;
- --color-primary-dark-4: #254f77;
- --color-primary-dark-5: #193450;
- --color-primary-dark-6: #0c1a28;
- --color-primary-dark-7: #04080c;
- --color-primary-light-1: #548fca;
- --color-primary-light-2: #679cd0;
- --color-primary-light-3: #7aa8d6;
- --color-primary-light-4: #8db5dc;
- --color-primary-light-5: #b3cde7;
- --color-primary-light-6: #d9e6f3;
- --color-primary-light-7: #f4f8fb;
- --color-primary-alpha-10: #4183c419;
- --color-primary-alpha-20: #4183c433;
- --color-primary-alpha-30: #4183c44b;
- --color-primary-alpha-40: #4183c466;
- --color-primary-alpha-50: #4183c480;
- --color-primary-alpha-60: #4183c499;
- --color-primary-alpha-70: #4183c4b3;
- --color-primary-alpha-80: #4183c4cc;
- --color-primary-alpha-90: #4183c4e1;
- --color-primary-hover: var(--color-primary-dark-1);
- --color-primary-active: var(--color-primary-dark-2);
- --color-secondary: #dedede;
- --color-secondary-dark-1: #cecece;
- --color-secondary-dark-2: #bfbfbf;
- --color-secondary-dark-3: #a0a0a0;
- --color-secondary-dark-4: #909090;
- --color-secondary-dark-5: #818181;
- --color-secondary-dark-6: #717171;
- --color-secondary-dark-7: #626262;
- --color-secondary-dark-8: #525252;
- --color-secondary-dark-9: #434343;
- --color-secondary-dark-10: #333333;
- --color-secondary-dark-11: #242424;
- --color-secondary-dark-12: #141414;
- --color-secondary-dark-13: #040404;
- --color-secondary-light-1: #e5e5e5;
- --color-secondary-light-2: #ebebeb;
- --color-secondary-light-3: #f2f2f2;
- --color-secondary-light-4: #f8f8f8;
- --color-secondary-alpha-10: #dedede19;
- --color-secondary-alpha-20: #dedede33;
- --color-secondary-alpha-30: #dedede4b;
- --color-secondary-alpha-40: #dedede66;
- --color-secondary-alpha-50: #dedede80;
- --color-secondary-alpha-60: #dedede99;
- --color-secondary-alpha-70: #dededeb3;
- --color-secondary-alpha-80: #dededecc;
- --color-secondary-alpha-90: #dededee1;
- --color-secondary-button: var(--color-secondary-dark-4);
- --color-secondary-hover: var(--color-secondary-dark-5);
- --color-secondary-active: var(--color-secondary-dark-6);
- /* console colors - used for actions console and console files */
- --color-console-fg: #eeeff2;
- --color-console-fg-subtle: #959cab;
- --color-console-bg: #262936;
- --color-console-border: #383c47;
- --color-console-hover-bg: #ffffff16;
- --color-console-active-bg: #454a57;
- --color-console-menu-bg: #383c47;
- --color-console-menu-border: #5c6374;
- /* named colors */
- --color-red: #db2828;
- --color-orange: #f2711c;
- --color-yellow: #fbbd08;
- --color-olive: #b5cc18;
- --color-green: #21ba45;
- --color-teal: #00b5ad;
- --color-blue: #2185d0;
- --color-violet: #6435c9;
- --color-purple: #a333c8;
- --color-pink: #e03997;
- --color-brown: #a5673f;
- --color-black: #1b1c1d;
- /* light variants - produced via Sass scale-color(color, $lightness: +25%) */
- --color-red-light: #e45e5e;
- --color-orange-light: #f59555;
- --color-yellow-light: #fcce46;
- --color-olive-light: #d3e942;
- --color-green-light: #46de6a;
- --color-teal-light: #08fff4;
- --color-blue-light: #51a5e3;
- --color-violet-light: #8b67d7;
- --color-purple-light: #bb64d8;
- --color-pink-light: #e86bb1;
- --color-brown-light: #c58b66;
- --color-black-light: #525558;
- /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
- --color-red-dark-1: #c82121;
- --color-orange-dark-1: #e6630d;
- --color-yellow-dark-1: #e5ac04;
- --color-olive-dark-1: #a3b816;
- --color-green-dark-1: #1ea73e;
- --color-teal-dark-1: #00a39c;
- --color-blue-dark-1: #1e78bb;
- --color-violet-dark-1: #5a30b5;
- --color-purple-dark-1: #932eb4;
- --color-pink-dark-1: #db228a;
- --color-brown-dark-1: #955d39;
- --color-black-dark-1: #18191a;
- /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
- --color-red-dark-2: #b11e1e;
- --color-orange-dark-2: #cc580c;
- --color-yellow-dark-2: #cc9903;
- --color-olive-dark-2: #91a313;
- --color-green-dark-2: #1a9537;
- --color-teal-dark-2: #00918a;
- --color-blue-dark-2: #1a6aa6;
- --color-violet-dark-2: #502aa1;
- --color-purple-dark-2: #8229a0;
- --color-pink-dark-2: #c21e7b;
- --color-brown-dark-2: #845232;
- --color-black-dark-2: #161617;
- /* ansi colors used for actions console and console files */
- --color-ansi-black: var(--color-black);
- --color-ansi-red: var(--color-red);
- --color-ansi-green: var(--color-green);
- --color-ansi-yellow: var(--color-yellow);
- --color-ansi-blue: var(--color-blue);
- --color-ansi-magenta: var(--color-pink);
- --color-ansi-cyan: var(--color-teal);
- --color-ansi-white: var(--color-console-fg-subtle);
- --color-ansi-bright-black: var(--color-black-light);
- --color-ansi-bright-red: var(--color-red-light);
- --color-ansi-bright-green: var(--color-green-light);
- --color-ansi-bright-yellow: var(--color-yellow-light);
- --color-ansi-bright-blue: var(--color-blue-light);
- --color-ansi-bright-magenta: var(--color-pink-light);
- --color-ansi-bright-cyan: var(--color-teal-light);
- --color-ansi-bright-white: var(--color-console-fg);
- /* other colors */
- --color-grey: #707070;
- --color-grey-light: #838383;
- --color-gold: #a1882b;
- --color-white: #ffffff;
- --color-diff-removed-word-bg: #fdb8c0;
- --color-diff-added-word-bg: #acf2bd;
- --color-diff-removed-row-bg: #ffeef0;
- --color-diff-moved-row-bg: #f1f8d1;
- --color-diff-added-row-bg: #e6ffed;
- --color-diff-removed-row-border: #f1c0c0;
- --color-diff-moved-row-border: #d0e27f;
- --color-diff-added-row-border: #e6ffed;
- --color-diff-inactive: #f2f2f2;
- --color-error-border: #e0b4b4;
- --color-error-bg: #fff6f6;
- --color-error-bg-active: #fbb;
- --color-error-bg-hover: #fdd;
- --color-error-text: #9f3a38;
- --color-success-border: #a3c293;
- --color-success-bg: #fcfff5;
- --color-success-text: #2c662d;
- --color-warning-border: #c9ba9b;
- --color-warning-bg: #fffaf3;
- --color-warning-text: #573a08;
- --color-info-border: #a9d5de;
- --color-info-bg: #f8ffff;
- --color-info-text: #276f86;
- --color-red-badge: #db2828;
- --color-red-badge-bg: #db28281a;
- --color-red-badge-hover-bg: #db28284d;
- --color-green-badge: #21ba45;
- --color-green-badge-bg: #21ba451a;
- --color-green-badge-hover-bg: #21ba454d;
- --color-yellow-badge: #fbbd08;
- --color-yellow-badge-bg: #fbbd081a;
- --color-yellow-badge-hover-bg: #fbbd084d;
- --color-orange-badge: #f2711c;
- --color-orange-badge-bg: #f2711c1a;
- --color-orange-badge-hover-bg: #f2711c4d;
- --color-git: #f05133;
- /* target-based colors */
- --color-body: #ffffff;
- --color-text-dark: #080808;
- --color-text: #212121;
- --color-text-light: #555555;
- --color-text-light-1: #6a6a6a;
- --color-text-light-2: #808080;
- --color-text-light-3: #a0a0a0;
- --color-box-header: #f7f7f7;
- --color-box-body: #ffffff;
- --color-box-body-highlight: #fafafa;
- --color-footer: #ffffff;
- --color-timeline: #ececec;
- --color-input-text: #212121;
- --color-input-background: #fafafa;
- --color-input-toggle-background: #dedede;
- --color-input-border: var(--color-secondary);
- --color-input-border-hover: var(--color-secondary-dark-1);
- --color-header-wrapper: transparent;
- --color-light: #00000006;
- --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
- --color-light-border: #0000001d;
- --color-hover: #00000014;
- --color-active: #0000001b;
- --color-menu: #fafafa;
- --color-card: #fafafa;
- --color-markup-table-row: #00000008;
- --color-markup-code-block: #00000010;
- --color-button: #fafafa;
- --color-code-bg: #ffffff;
- --color-code-sidebar-bg: #f5f5f5;
- --color-shadow: #00000026;
- --color-secondary-bg: #f4f4f4;
- --color-expand-button: #d8efff;
- --color-placeholder-text: #aaa;
- --color-editor-line-highlight: var(--color-primary-light-6);
- --color-project-board-bg: var(--color-secondary-light-4);
- --color-project-board-dark-label: #111111;
- --color-project-board-light-label: #eeeeee;
- --color-caret: var(--color-text-dark);
- --color-reaction-bg: #0000000a;
- --color-reaction-hover-bg: var(--color-primary-light-5);
- --color-reaction-active-bg: var(--color-primary-light-6);
- --color-tooltip-text: #ffffff;
- --color-tooltip-bg: #000000f0;
- --color-nav-bg: #ffffff;
- --color-nav-hover-bg: #ebebeb;
- --color-nav-text: var(--color-text);
- --color-label-text: #232323;
- --color-label-bg: #cacaca5b;
- --color-label-hover-bg: #cacacaa0;
- --color-label-active-bg: #cacacaff;
- --color-accent: var(--color-primary-light-1);
- --color-small-accent: var(--color-primary-light-6);
- --color-active-line: #fffbdd;
- --color-overlay-backdrop: #080808c0;
- accent-color: var(--color-accent);
- color-scheme: light;
}
:root * {
diff --git a/web_src/css/index.css b/web_src/css/index.css
index d399f073d557..c1360bb19446 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -32,11 +32,7 @@
@import "./markup/asciicast.css";
@import "./chroma/base.css";
-@import "./chroma/light.css";
-
@import "./codemirror/base.css";
-@import "./codemirror/light.css";
-
@import "./font_i18n.css";
@import "./base.css";
@import "./home.css";
diff --git a/web_src/css/themes/theme-auto.css b/web_src/css/themes/theme-auto.css
deleted file mode 100644
index e0d31e2cfbb7..000000000000
--- a/web_src/css/themes/theme-auto.css
+++ /dev/null
@@ -1 +0,0 @@
-@import "./theme-arc-green.css" (prefers-color-scheme: dark);
diff --git a/web_src/css/themes/theme-gitea-auto.css b/web_src/css/themes/theme-gitea-auto.css
new file mode 100644
index 000000000000..509889e80225
--- /dev/null
+++ b/web_src/css/themes/theme-gitea-auto.css
@@ -0,0 +1,2 @@
+@import "./theme-gitea-light.css" (prefers-color-scheme: light);
+@import "./theme-gitea-dark.css" (prefers-color-scheme: dark);
diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-gitea-dark.css
similarity index 98%
rename from web_src/css/themes/theme-arc-green.css
rename to web_src/css/themes/theme-gitea-dark.css
index 96d9f5821c38..bac002e3db5e 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -212,11 +212,12 @@
--color-code-sidebar-bg: #232834;
--color-shadow: #00000058;
--color-secondary-bg: #2a2e3a;
- --color-text-focus: #fff;
--color-expand-button: #3c404d;
--color-placeholder-text: #8a8e99;
--color-editor-line-highlight: var(--color-primary-light-5);
--color-project-board-bg: var(--color-secondary-light-2);
+ --color-project-board-dark-label: #111111;
+ --color-project-board-light-label: #eeeeee;
--color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
--color-reaction-bg: #ffffff12;
--color-reaction-hover-bg: var(--color-primary-light-4);
@@ -225,6 +226,7 @@
--color-tooltip-bg: #000000f0;
--color-nav-bg: #232834;
--color-nav-hover-bg: #383c47;
+ --color-nav-text: var(--color-text);
--color-label-text: #dfe3ec;
--color-label-bg: #7c84974b;
--color-label-hover-bg: #7c8497a0;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
new file mode 100644
index 000000000000..ca5d15cd25ba
--- /dev/null
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -0,0 +1,240 @@
+@import "../chroma/light.css";
+@import "../codemirror/light.css";
+
+:root {
+ --is-dark-theme: false;
+ --color-primary: #4183c4;
+ --color-primary-contrast: #ffffff;
+ --color-primary-dark-1: #3876b3;
+ --color-primary-dark-2: #31699f;
+ --color-primary-dark-3: #2b5c8b;
+ --color-primary-dark-4: #254f77;
+ --color-primary-dark-5: #193450;
+ --color-primary-dark-6: #0c1a28;
+ --color-primary-dark-7: #04080c;
+ --color-primary-light-1: #548fca;
+ --color-primary-light-2: #679cd0;
+ --color-primary-light-3: #7aa8d6;
+ --color-primary-light-4: #8db5dc;
+ --color-primary-light-5: #b3cde7;
+ --color-primary-light-6: #d9e6f3;
+ --color-primary-light-7: #f4f8fb;
+ --color-primary-alpha-10: #4183c419;
+ --color-primary-alpha-20: #4183c433;
+ --color-primary-alpha-30: #4183c44b;
+ --color-primary-alpha-40: #4183c466;
+ --color-primary-alpha-50: #4183c480;
+ --color-primary-alpha-60: #4183c499;
+ --color-primary-alpha-70: #4183c4b3;
+ --color-primary-alpha-80: #4183c4cc;
+ --color-primary-alpha-90: #4183c4e1;
+ --color-primary-hover: var(--color-primary-dark-1);
+ --color-primary-active: var(--color-primary-dark-2);
+ --color-secondary: #dedede;
+ --color-secondary-dark-1: #cecece;
+ --color-secondary-dark-2: #bfbfbf;
+ --color-secondary-dark-3: #a0a0a0;
+ --color-secondary-dark-4: #909090;
+ --color-secondary-dark-5: #818181;
+ --color-secondary-dark-6: #717171;
+ --color-secondary-dark-7: #626262;
+ --color-secondary-dark-8: #525252;
+ --color-secondary-dark-9: #434343;
+ --color-secondary-dark-10: #333333;
+ --color-secondary-dark-11: #242424;
+ --color-secondary-dark-12: #141414;
+ --color-secondary-dark-13: #040404;
+ --color-secondary-light-1: #e5e5e5;
+ --color-secondary-light-2: #ebebeb;
+ --color-secondary-light-3: #f2f2f2;
+ --color-secondary-light-4: #f8f8f8;
+ --color-secondary-alpha-10: #dedede19;
+ --color-secondary-alpha-20: #dedede33;
+ --color-secondary-alpha-30: #dedede4b;
+ --color-secondary-alpha-40: #dedede66;
+ --color-secondary-alpha-50: #dedede80;
+ --color-secondary-alpha-60: #dedede99;
+ --color-secondary-alpha-70: #dededeb3;
+ --color-secondary-alpha-80: #dededecc;
+ --color-secondary-alpha-90: #dededee1;
+ --color-secondary-button: var(--color-secondary-dark-4);
+ --color-secondary-hover: var(--color-secondary-dark-5);
+ --color-secondary-active: var(--color-secondary-dark-6);
+ /* console colors - used for actions console and console files */
+ --color-console-fg: #eeeff2;
+ --color-console-fg-subtle: #959cab;
+ --color-console-bg: #262936;
+ --color-console-border: #383c47;
+ --color-console-hover-bg: #ffffff16;
+ --color-console-active-bg: #454a57;
+ --color-console-menu-bg: #383c47;
+ --color-console-menu-border: #5c6374;
+ /* named colors */
+ --color-red: #db2828;
+ --color-orange: #f2711c;
+ --color-yellow: #fbbd08;
+ --color-olive: #b5cc18;
+ --color-green: #21ba45;
+ --color-teal: #00b5ad;
+ --color-blue: #2185d0;
+ --color-violet: #6435c9;
+ --color-purple: #a333c8;
+ --color-pink: #e03997;
+ --color-brown: #a5673f;
+ --color-black: #1b1c1d;
+ /* light variants - produced via Sass scale-color(color, $lightness: +25%) */
+ --color-red-light: #e45e5e;
+ --color-orange-light: #f59555;
+ --color-yellow-light: #fcce46;
+ --color-olive-light: #d3e942;
+ --color-green-light: #46de6a;
+ --color-teal-light: #08fff4;
+ --color-blue-light: #51a5e3;
+ --color-violet-light: #8b67d7;
+ --color-purple-light: #bb64d8;
+ --color-pink-light: #e86bb1;
+ --color-brown-light: #c58b66;
+ --color-black-light: #525558;
+ /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
+ --color-red-dark-1: #c82121;
+ --color-orange-dark-1: #e6630d;
+ --color-yellow-dark-1: #e5ac04;
+ --color-olive-dark-1: #a3b816;
+ --color-green-dark-1: #1ea73e;
+ --color-teal-dark-1: #00a39c;
+ --color-blue-dark-1: #1e78bb;
+ --color-violet-dark-1: #5a30b5;
+ --color-purple-dark-1: #932eb4;
+ --color-pink-dark-1: #db228a;
+ --color-brown-dark-1: #955d39;
+ --color-black-dark-1: #18191a;
+ /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
+ --color-red-dark-2: #b11e1e;
+ --color-orange-dark-2: #cc580c;
+ --color-yellow-dark-2: #cc9903;
+ --color-olive-dark-2: #91a313;
+ --color-green-dark-2: #1a9537;
+ --color-teal-dark-2: #00918a;
+ --color-blue-dark-2: #1a6aa6;
+ --color-violet-dark-2: #502aa1;
+ --color-purple-dark-2: #8229a0;
+ --color-pink-dark-2: #c21e7b;
+ --color-brown-dark-2: #845232;
+ --color-black-dark-2: #161617;
+ /* ansi colors used for actions console and console files */
+ --color-ansi-black: var(--color-black);
+ --color-ansi-red: var(--color-red);
+ --color-ansi-green: var(--color-green);
+ --color-ansi-yellow: var(--color-yellow);
+ --color-ansi-blue: var(--color-blue);
+ --color-ansi-magenta: var(--color-pink);
+ --color-ansi-cyan: var(--color-teal);
+ --color-ansi-white: var(--color-console-fg-subtle);
+ --color-ansi-bright-black: var(--color-black-light);
+ --color-ansi-bright-red: var(--color-red-light);
+ --color-ansi-bright-green: var(--color-green-light);
+ --color-ansi-bright-yellow: var(--color-yellow-light);
+ --color-ansi-bright-blue: var(--color-blue-light);
+ --color-ansi-bright-magenta: var(--color-pink-light);
+ --color-ansi-bright-cyan: var(--color-teal-light);
+ --color-ansi-bright-white: var(--color-console-fg);
+ /* other colors */
+ --color-grey: #707070;
+ --color-grey-light: #838383;
+ --color-gold: #a1882b;
+ --color-white: #ffffff;
+ --color-diff-removed-word-bg: #fdb8c0;
+ --color-diff-added-word-bg: #acf2bd;
+ --color-diff-removed-row-bg: #ffeef0;
+ --color-diff-moved-row-bg: #f1f8d1;
+ --color-diff-added-row-bg: #e6ffed;
+ --color-diff-removed-row-border: #f1c0c0;
+ --color-diff-moved-row-border: #d0e27f;
+ --color-diff-added-row-border: #e6ffed;
+ --color-diff-inactive: #f2f2f2;
+ --color-error-border: #e0b4b4;
+ --color-error-bg: #fff6f6;
+ --color-error-bg-active: #fbb;
+ --color-error-bg-hover: #fdd;
+ --color-error-text: #9f3a38;
+ --color-success-border: #a3c293;
+ --color-success-bg: #fcfff5;
+ --color-success-text: #2c662d;
+ --color-warning-border: #c9ba9b;
+ --color-warning-bg: #fffaf3;
+ --color-warning-text: #573a08;
+ --color-info-border: #a9d5de;
+ --color-info-bg: #f8ffff;
+ --color-info-text: #276f86;
+ --color-red-badge: #db2828;
+ --color-red-badge-bg: #db28281a;
+ --color-red-badge-hover-bg: #db28284d;
+ --color-green-badge: #21ba45;
+ --color-green-badge-bg: #21ba451a;
+ --color-green-badge-hover-bg: #21ba454d;
+ --color-yellow-badge: #fbbd08;
+ --color-yellow-badge-bg: #fbbd081a;
+ --color-yellow-badge-hover-bg: #fbbd084d;
+ --color-orange-badge: #f2711c;
+ --color-orange-badge-bg: #f2711c1a;
+ --color-orange-badge-hover-bg: #f2711c4d;
+ --color-git: #f05133;
+ /* target-based colors */
+ --color-body: #ffffff;
+ --color-box-header: #f7f7f7;
+ --color-box-body: #ffffff;
+ --color-box-body-highlight: #fafafa;
+ --color-text-dark: #080808;
+ --color-text: #212121;
+ --color-text-light: #555555;
+ --color-text-light-1: #6a6a6a;
+ --color-text-light-2: #808080;
+ --color-text-light-3: #a0a0a0;
+ --color-footer: #ffffff;
+ --color-timeline: #ececec;
+ --color-input-text: #212121;
+ --color-input-background: #fafafa;
+ --color-input-toggle-background: #dedede;
+ --color-input-border: var(--color-secondary);
+ --color-input-border-hover: var(--color-secondary-dark-1);
+ --color-header-wrapper: transparent;
+ --color-light: #00000006;
+ --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
+ --color-light-border: #0000001d;
+ --color-hover: #00000014;
+ --color-active: #0000001b;
+ --color-menu: #fafafa;
+ --color-card: #fafafa;
+ --color-markup-table-row: #00000008;
+ --color-markup-code-block: #00000010;
+ --color-button: #fafafa;
+ --color-code-bg: #ffffff;
+ --color-code-sidebar-bg: #f5f5f5;
+ --color-shadow: #00000026;
+ --color-secondary-bg: #f4f4f4;
+ --color-expand-button: #d8efff;
+ --color-placeholder-text: #aaa;
+ --color-editor-line-highlight: var(--color-primary-light-6);
+ --color-project-board-bg: var(--color-secondary-light-4);
+ --color-project-board-dark-label: #111111;
+ --color-project-board-light-label: #eeeeee;
+ --color-caret: var(--color-text-dark);
+ --color-reaction-bg: #0000000a;
+ --color-reaction-hover-bg: var(--color-primary-light-5);
+ --color-reaction-active-bg: var(--color-primary-light-6);
+ --color-tooltip-text: #ffffff;
+ --color-tooltip-bg: #000000f0;
+ --color-nav-bg: #ffffff;
+ --color-nav-hover-bg: #ebebeb;
+ --color-nav-text: var(--color-text);
+ --color-label-text: #232323;
+ --color-label-bg: #cacaca5b;
+ --color-label-hover-bg: #cacacaa0;
+ --color-label-active-bg: #cacacaff;
+ --color-accent: var(--color-primary-light-1);
+ --color-small-accent: var(--color-primary-light-6);
+ --color-active-line: #fffbdd;
+ --color-overlay-backdrop: #080808c0;
+ accent-color: var(--color-accent);
+ color-scheme: light;
+}