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; +}