From 023e937141dd891bce3370c869d4db2c60f971ed Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 6 Oct 2023 09:46:36 +0200 Subject: [PATCH] Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/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. ## :warning: BREAKING :warning: 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 `` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao Co-authored-by: Giteabot --- custom/conf/app.example.ini | 4 +- .../config-cheat-sheet.en-us.md | 4 +- .../config-cheat-sheet.zh-cn.md | 4 +- .../administration/customizing-gitea.en-us.md | 5 +- .../administration/customizing-gitea.zh-cn.md | 5 +- docs/content/help/faq.en-us.md | 2 +- docs/content/help/faq.zh-cn.md | 2 +- models/migrations/migrations.go | 6 + models/migrations/v1_22/v280.go | 29 +++ modules/setting/ui.go | 4 +- modules/templates/helper.go | 8 +- templates/base/head.tmpl | 2 +- templates/base/head_style.tmpl | 8 +- templates/status/500.tmpl | 4 +- web_src/css/base.css | 239 +---------------- web_src/css/index.css | 4 - web_src/css/themes/theme-auto.css | 1 - web_src/css/themes/theme-gitea-auto.css | 2 + ...eme-arc-green.css => theme-gitea-dark.css} | 4 +- web_src/css/themes/theme-gitea-light.css | 240 ++++++++++++++++++ 20 files changed, 308 insertions(+), 269 deletions(-) create mode 100644 models/migrations/v1_22/v280.go delete mode 100644 web_src/css/themes/theme-auto.css create mode 100644 web_src/css/themes/theme-gitea-auto.css rename web_src/css/themes/{theme-arc-green.css => theme-gitea-dark.css} (98%) create mode 100644 web_src/css/themes/theme-gitea-light.css diff --git a/custom/conf/app.example.ini b/custom/conf/app.example.ini index 7db3c157c9..a4ff78fb35 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 a337ae82a0..8bb2b19c28 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 2849752c0a..fbd65a1919 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 4c2d7ed0c4..d122fb4bfa 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 2babf03da7..d828704557 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 c83f8549e2..b4f5171bcf 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 36610db8e0..ff53fc1d03 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 020043cfc3..a8037fa67e 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 0000000000..a8ee4a3bf7 --- /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 41438db40d..231698bf60 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 bb1411cbfd..235fd96b73 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 c3645209cd..876b42d512 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 7e8cba2aed..0793eaca20 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 5488976da2..e5570bde73 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 c1ebc959d5..efb2553db4 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 d399f073d5..c1360bb194 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 e0d31e2cfb..0000000000 --- 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 0000000000..509889e802 --- /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 96d9f5821c..bac002e3db 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 0000000000..ca5d15cd25 --- /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; +}