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;