Rename the default themes to gitea-light and gitea-dark

go-gitea · Oct 3, 2023 · 6972daa · 6972daa
1 parent e94f9fc
commit 6972daa
Show file tree

Hide file tree

Showing 12 changed files with 286 additions and 245 deletions.
diff --git a/custom/conf/app.example.ini b/custom/conf/app.example.ini
@@ -1212,7 +1212,7 @@ LEVEL = Info
 ;DEFAULT_THEME = auto
 ;;
 ;; All available themes. Allow users select personalized themes regardless of the value of `DEFAULT_THEME`.
-;THEMES = auto,gitea,arc-green
+;THEMES = 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
@@ -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`: **auto**: \[auto, gitea-light, gitea-dark\]: Set the default theme for the Gitea install.
 - `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`:  **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
@@ -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`: **auto**: \[auto, gitea-light, gitea-dark\]: 在Gitea安装时候设置的默认主题。
 - `SHOW_USER_EMAIL`: **true**: 用户的电子邮件是否应该显示在`Explore Users`页面中。
-- `THEMES`:  **auto,gitea,arc-green**: 所有可用的主题。允许用户选择个性化的主题，
+- `THEMES`:  **auto,gitea-light,gitea-dark**: 所有可用的主题。允许用户选择个性化的主题，
   而不受DEFAULT_THEME 值的影响。
 - `MAX_DISPLAY_FILE_SIZE`: **8388608**: 能够显示文件的最大大小（默认为8MiB）。
 - `REACTIONS`: 用户可以在问题（Issue）、Pull Request（PR）以及评论中选择的所有可选的反应。

diff --git 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 `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
@@ -185,7 +185,7 @@ Gitea不提供内置的Pages服务器。您需要一个专用的域名来提供
 
 ## 如何添加/使用自定义主题
 
-Gitea 目前支持三个官方主题，分别是 `gitea`（亮色）、`arc-green`（暗色）和 `auto`（根据操作系统设置自动切换前两个主题）。
+Gitea 目前支持三个官方主题，分别是 `gitea-light`、`gitea-dark` 和 `auto`（根据操作系统设置自动切换前两个主题）。
 要添加自己的主题，目前唯一的方法是提供一个完整的主题（不仅仅是颜色覆盖）。
 
 假设我们的主题是 `arc-blue`（这是一个真实的主题，可以在[此问题](https://github.com/go-gitea/gitea/issues/6011)中找到）

diff --git 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"
@@ -538,6 +539,12 @@ var migrations = []Migration{
 	NewMigration("Add Index to issue_user.issue_id", v1_21.AddIndexToIssueUserIssueID),
 	// v278 -> v279
 	NewMigration("Add Index to comment.dependent_issue_id", v1_21.AddIndexToCommentDependentIssueID),
+
+	// Gitea 1.21.0 ends at 279
+
+	// v279 -> v280
+	NewMigration("Rename user themes", v1_22.RenameUserThemes),
+
 }
 
 // GetCurrentDBVersion returns the current db version

diff --git a/models/migrations/v1_22/v279.go b/models/migrations/v1_22/v279.go
@@ -0,0 +1,26 @@
+// 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
+	}
+
+	return sess.Commit()
+}
diff --git a/modules/setting/ui.go b/modules/setting/ui.go
@@ -77,7 +77,7 @@ var UI = struct {
 	ReactionMaxUserNum:  10,
 	MaxDisplayFileSize:  8388608,
 	DefaultTheme:        `auto`,
-	Themes:              []string{`auto`, `gitea`, `arc-green`},
+	Themes:              []string{`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/web_src/css/base.css b/web_src/css/base.css
@@ -22,241 +22,6 @@
   --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/themes/theme-auto.css b/web_src/css/themes/theme-auto.css
@@ -1 +1,2 @@
-@import "./theme-arc-green.css" (prefers-color-scheme: dark);
+@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 → web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-arc-green.css → 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;