oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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 `<html>` has moved from `class="theme-name"` to
`data-theme="name"`, existing customizations that depend on should be
updated.

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>

authored by

silverwind
Lunny Xiao
Giteabot and committed by
GitHub 023e9371 04e88e6c

+308 -269
+2 -2
custom/conf/app.example.ini
··· 1209 1209 ;SHOW_USER_EMAIL = true 1210 1210 ;; 1211 1211 ;; Set the default theme for the Gitea install 1212 - ;DEFAULT_THEME = auto 1212 + ;DEFAULT_THEME = gitea-auto 1213 1213 ;; 1214 1214 ;; All available themes. Allow users select personalized themes regardless of the value of `DEFAULT_THEME`. 1215 - ;THEMES = auto,gitea,arc-green 1215 + ;THEMES = gitea-auto,gitea-light,gitea-dark 1216 1216 ;; 1217 1217 ;; All available reactions users can choose on issues/prs and comments. 1218 1218 ;; Values can be emoji alias (:smile:) or a unicode emoji.
+2 -2
docs/content/administration/config-cheat-sheet.en-us.md
··· 215 215 - `SITEMAP_PAGING_NUM`: **20**: Number of items that are displayed in a single subsitemap. 216 216 - `GRAPH_MAX_COMMIT_NUM`: **100**: Number of maximum commits shown in the commit graph. 217 217 - `CODE_COMMENT_LINES`: **4**: Number of line of codes shown for a code comment. 218 - - `DEFAULT_THEME`: **auto**: \[auto, gitea, arc-green\]: Set the default theme for the Gitea install. 218 + - `DEFAULT_THEME`: **gitea-auto**: \[gitea-auto, gitea-light, gitea-dark\]: Set the default theme for the Gitea installation. 219 219 - `SHOW_USER_EMAIL`: **true**: Whether the email of the user should be shown in the Explore Users page. 220 - - `THEMES`: **auto,gitea,arc-green**: All available themes. Allow users select personalized themes. 220 + - `THEMES`: **gitea-auto,gitea-light,gitea-dark**: All available themes. Allow users select personalized themes. 221 221 regardless of the value of `DEFAULT_THEME`. 222 222 - `MAX_DISPLAY_FILE_SIZE`: **8388608**: Max size of files to be displayed (default is 8MiB) 223 223 - `REACTIONS`: All available reactions users can choose on issues/prs and comments
+2 -2
docs/content/administration/config-cheat-sheet.zh-cn.md
··· 214 214 - `SITEMAP_PAGING_NUM`: **20**: 在单个子SiteMap中显示的项数。 215 215 - `GRAPH_MAX_COMMIT_NUM`: **100**: 提交图中显示的最大commit数量。 216 216 - `CODE_COMMENT_LINES`: **4**: 在代码评论中能够显示的最大代码行数。 217 - - `DEFAULT_THEME`: **auto**: \[auto, gitea, arc-green\]: 在Gitea安装时候设置的默认主题。 217 + - `DEFAULT_THEME`: **gitea-auto**: \[gitea-auto, gitea-light, gitea-dark\]: 在Gitea安装时候设置的默认主题。 218 218 - `SHOW_USER_EMAIL`: **true**: 用户的电子邮件是否应该显示在`Explore Users`页面中。 219 - - `THEMES`: **auto,gitea,arc-green**: 所有可用的主题。允许用户选择个性化的主题， 219 + - `THEMES`: **gitea-auto,gitea-light,gitea-dark**: 所有可用的主题。允许用户选择个性化的主题， 220 220 而不受DEFAULT_THEME 值的影响。 221 221 - `MAX_DISPLAY_FILE_SIZE`: **8388608**: 能够显示文件的最大大小（默认为8MiB）。 222 222 - `REACTIONS`: 用户可以在问题（Issue）、Pull Request（PR）以及评论中选择的所有可选的反应。
+3 -2
docs/content/administration/customizing-gitea.en-us.md
··· 370 370 371 371 ## Customizing the look of Gitea 372 372 373 - The default built-in themes are `gitea` (light), `arc-green` (dark), and `auto` (chooses light or dark depending on operating system settings). 373 + The built-in themes are `gitea-light`, `gitea-dark`, and `gitea-auto` (which automatically adapts to OS settings). 374 + 374 375 The default theme can be changed via `DEFAULT_THEME` in the [ui](administration/config-cheat-sheet.md#ui-ui) section of `app.ini`. 375 376 376 377 Gitea also has support for user themes, which means every user can select which theme should be used. ··· 384 385 385 386 Community themes are listed in [gitea/awesome-gitea#themes](https://gitea.com/gitea/awesome-gitea#themes). 386 387 387 - 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). 388 + The default theme sources can be found [here](https://github.com/go-gitea/gitea/blob/main/web_src/css/themes). 388 389 389 390 If your custom theme is considered a dark theme, set the global css variable `--is-dark-theme` to `true`. 390 391 This allows Gitea to adjust the Monaco code editor's theme accordingly.
+3 -2
docs/content/administration/customizing-gitea.zh-cn.md
··· 86 86 87 87 ## 更改 Gitea 外观 88 88 89 - Gitea 目前由两种内置主题，分别为默认 `gitea` 主题和深色主题 `arc-green`，您可以通过修改 90 - `app.ini` [ui](administration/config-cheat-sheet.md#ui-ui) 部分的 `DEFAULT_THEME` 的值来变更至一个可用的 Gitea 外观。 89 + 内置主题是“gitea-light”、“gitea-dark”和“gitea-auto”（自动适应操作系统设置）。 90 + 91 + 默认主题可以通过 `app.ini` 的 [ui](administration/config-cheat-sheet.md#ui-ui) 部分中的 `DEFAULT_THEME` 进行更改。
+1 -1
docs/content/help/faq.en-us.md
··· 181 181 182 182 ## How to add/use custom themes 183 183 184 - 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). 184 + 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). 185 185 To add your own theme, currently the only way is to provide a complete theme (not just color overrides) 186 186 187 187 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))
+1 -1
docs/content/help/faq.zh-cn.md
··· 185 185 186 186 ## 如何添加/使用自定义主题 187 187 188 - Gitea 目前支持三个官方主题，分别是 `gitea`（亮色）、`arc-green`（暗色）和 `auto`（根据操作系统设置自动切换前两个主题）。 188 + Gitea 目前支持三个官方主题，分别是 `gitea-light`、`gitea-dark` 和 `gitea-auto`（根据操作系统设置自动切换前两个主题）。 189 189 要添加自己的主题，目前唯一的方法是提供一个完整的主题（不仅仅是颜色覆盖）。 190 190 191 191 假设我们的主题是 `arc-blue`（这是一个真实的主题，可以在[此问题](https://github.com/go-gitea/gitea/issues/6011)中找到）
+6
models/migrations/migrations.go
··· 20 20 "code.gitea.io/gitea/models/migrations/v1_19" 21 21 "code.gitea.io/gitea/models/migrations/v1_20" 22 22 "code.gitea.io/gitea/models/migrations/v1_21" 23 + "code.gitea.io/gitea/models/migrations/v1_22" 23 24 "code.gitea.io/gitea/models/migrations/v1_6" 24 25 "code.gitea.io/gitea/models/migrations/v1_7" 25 26 "code.gitea.io/gitea/models/migrations/v1_8" ··· 540 541 NewMigration("Add Index to comment.dependent_issue_id", v1_21.AddIndexToCommentDependentIssueID), 541 542 // v279 -> v280 542 543 NewMigration("Add Index to action.user_id", v1_21.AddIndexToActionUserID), 544 + 545 + // Gitea 1.21.0 ends at 280 546 + 547 + // v280 -> v281 548 + NewMigration("Rename user themes", v1_22.RenameUserThemes), 543 549 } 544 550 545 551 // GetCurrentDBVersion returns the current db version
+29
models/migrations/v1_22/v280.go
··· 1 + // Copyright 2023 The Gitea Authors. All rights reserved. 2 + // SPDX-License-Identifier: MIT 3 + 4 + package v1_22 //nolint 5 + 6 + import ( 7 + "xorm.io/xorm" 8 + ) 9 + 10 + func RenameUserThemes(x *xorm.Engine) error { 11 + sess := x.NewSession() 12 + defer sess.Close() 13 + 14 + if err := sess.Begin(); err != nil { 15 + return err 16 + } 17 + 18 + if _, err := sess.Exec("UPDATE `user` SET `theme` = 'gitea-light' WHERE `theme` = 'gitea'"); err != nil { 19 + return err 20 + } 21 + if _, err := sess.Exec("UPDATE `user` SET `theme` = 'gitea-dark' WHERE `theme` = 'arc-green'"); err != nil { 22 + return err 23 + } 24 + if _, err := sess.Exec("UPDATE `user` SET `theme` = 'gitea-auto' WHERE `theme` = 'auto'"); err != nil { 25 + return err 26 + } 27 + 28 + return sess.Commit() 29 + }
+2 -2
modules/setting/ui.go
··· 76 76 CodeCommentLines: 4, 77 77 ReactionMaxUserNum: 10, 78 78 MaxDisplayFileSize: 8388608, 79 - DefaultTheme: `auto`, 80 - Themes: []string{`auto`, `gitea`, `arc-green`}, 79 + DefaultTheme: `gitea-auto`, 80 + Themes: []string{`gitea-auto`, `gitea-light`, `gitea-dark`}, 81 81 Reactions: []string{`+1`, `-1`, `laugh`, `hooray`, `confused`, `heart`, `rocket`, `eyes`}, 82 82 CustomEmojis: []string{`git`, `gitea`, `codeberg`, `gitlab`, `github`, `gogs`}, 83 83 CustomEmojisMap: map[string]string{"git": ":git:", "gitea": ":gitea:", "codeberg": ":codeberg:", "gitlab": ":gitlab:", "github": ":github:", "gogs": ":gogs:"},
+6 -2
modules/templates/helper.go
··· 12 12 "strings" 13 13 "time" 14 14 15 + user_model "code.gitea.io/gitea/models/user" 15 16 "code.gitea.io/gitea/modules/base" 16 17 "code.gitea.io/gitea/modules/emoji" 17 18 "code.gitea.io/gitea/modules/markup" ··· 131 132 "DisableImportLocal": func() bool { 132 133 return !setting.ImportLocalPaths 133 134 }, 134 - "DefaultTheme": func() string { 135 - return setting.UI.DefaultTheme 135 + "ThemeName": func(user *user_model.User) string { 136 + if user == nil || user.Theme == "" { 137 + return setting.UI.DefaultTheme 138 + } 139 + return user.Theme 136 140 }, 137 141 "NotificationSettings": func() map[string]any { 138 142 return map[string]any{
+1 -1
templates/base/head.tmpl
··· 1 1 <!DOCTYPE html> 2 - <html lang="{{ctx.Locale.Lang}}" class="theme-{{if .SignedUser.Theme}}{{.SignedUser.Theme}}{{else}}{{DefaultTheme}}{{end}}"> 2 + <html lang="{{ctx.Locale.Lang}}" data-theme="{{ThemeName .SignedUser}}"> 3 3 <head> 4 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 5 <title>{{if .Title}}{{.Title | RenderEmojiPlain}} - {{end}}{{if .Repository.Name}}{{.Repository.Name}} - {{end}}{{AppName}}</title>
+1 -7
templates/base/head_style.tmpl
··· 1 1 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{AssetVersion}}"> 2 - {{if .IsSigned}} 3 - {{if ne .SignedUser.Theme "gitea"}} 4 - <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{.SignedUser.Theme | PathEscape}}.css?v={{AssetVersion}}"> 5 - {{end}} 6 - {{else if ne DefaultTheme "gitea"}} 7 - <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{DefaultTheme | PathEscape}}.css?v={{AssetVersion}}"> 8 - {{end}} 2 + <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{ThemeName .SignedUser | PathEscape}}.css?v={{AssetVersion}}">
+2 -2
templates/status/500.tmpl
··· 1 1 {{/* This page should only depend the minimal template functions/variables, to avoid triggering new panics. 2 - * base template functions: AppName, AssetUrlPrefix, AssetVersion, AppSubUrl, DefaultTheme, Str2html 2 + * base template functions: AppName, AssetUrlPrefix, AssetVersion, AppSubUrl, ThemeName, Str2html 3 3 * locale 4 4 * Flash 5 5 * ErrorMsg 6 6 * SignedUser (optional) 7 7 */}} 8 8 <!DOCTYPE html> 9 - <html lang="{{.locale.Lang}}" class="theme-{{if .SignedUser.Theme}}{{.SignedUser.Theme}}{{else}}{{DefaultTheme}}{{end}}"> 9 + <html lang="{{.locale.Lang}}" data-theme="{{ThemeName .SignedUser}}"> 10 10 <head> 11 11 <meta name="viewport" content="width=device-width, initial-scale=1"> 12 12 <title>Internal Server Error - {{AppName}}</title>
+2 -237
web_src/css/base.css
··· 11 11 --font-weight-bold: 700; 12 12 /* line-height: use the default value as "modules/normalize.css" */ 13 13 --line-height-default: normal; 14 - /* backgrounds */ 14 + /* images */ 15 15 --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>'); 16 16 --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>'); 17 17 --octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>'); 18 - /* non-color variables */ 18 + /* other variables */ 19 19 --border-radius: 4px; 20 20 --border-radius-medium: 6px; 21 21 --border-radius-circle: 50%; 22 22 --opacity-disabled: 0.55; 23 23 --height-loading: 16rem; 24 24 --tab-size: 4; 25 - /* base colors */ 26 - --color-primary: #4183c4; 27 - --color-primary-contrast: #ffffff; 28 - --color-primary-dark-1: #3876b3; 29 - --color-primary-dark-2: #31699f; 30 - --color-primary-dark-3: #2b5c8b; 31 - --color-primary-dark-4: #254f77; 32 - --color-primary-dark-5: #193450; 33 - --color-primary-dark-6: #0c1a28; 34 - --color-primary-dark-7: #04080c; 35 - --color-primary-light-1: #548fca; 36 - --color-primary-light-2: #679cd0; 37 - --color-primary-light-3: #7aa8d6; 38 - --color-primary-light-4: #8db5dc; 39 - --color-primary-light-5: #b3cde7; 40 - --color-primary-light-6: #d9e6f3; 41 - --color-primary-light-7: #f4f8fb; 42 - --color-primary-alpha-10: #4183c419; 43 - --color-primary-alpha-20: #4183c433; 44 - --color-primary-alpha-30: #4183c44b; 45 - --color-primary-alpha-40: #4183c466; 46 - --color-primary-alpha-50: #4183c480; 47 - --color-primary-alpha-60: #4183c499; 48 - --color-primary-alpha-70: #4183c4b3; 49 - --color-primary-alpha-80: #4183c4cc; 50 - --color-primary-alpha-90: #4183c4e1; 51 - --color-primary-hover: var(--color-primary-dark-1); 52 - --color-primary-active: var(--color-primary-dark-2); 53 - --color-secondary: #dedede; 54 - --color-secondary-dark-1: #cecece; 55 - --color-secondary-dark-2: #bfbfbf; 56 - --color-secondary-dark-3: #a0a0a0; 57 - --color-secondary-dark-4: #909090; 58 - --color-secondary-dark-5: #818181; 59 - --color-secondary-dark-6: #717171; 60 - --color-secondary-dark-7: #626262; 61 - --color-secondary-dark-8: #525252; 62 - --color-secondary-dark-9: #434343; 63 - --color-secondary-dark-10: #333333; 64 - --color-secondary-dark-11: #242424; 65 - --color-secondary-dark-12: #141414; 66 - --color-secondary-dark-13: #040404; 67 - --color-secondary-light-1: #e5e5e5; 68 - --color-secondary-light-2: #ebebeb; 69 - --color-secondary-light-3: #f2f2f2; 70 - --color-secondary-light-4: #f8f8f8; 71 - --color-secondary-alpha-10: #dedede19; 72 - --color-secondary-alpha-20: #dedede33; 73 - --color-secondary-alpha-30: #dedede4b; 74 - --color-secondary-alpha-40: #dedede66; 75 - --color-secondary-alpha-50: #dedede80; 76 - --color-secondary-alpha-60: #dedede99; 77 - --color-secondary-alpha-70: #dededeb3; 78 - --color-secondary-alpha-80: #dededecc; 79 - --color-secondary-alpha-90: #dededee1; 80 - --color-secondary-button: var(--color-secondary-dark-4); 81 - --color-secondary-hover: var(--color-secondary-dark-5); 82 - --color-secondary-active: var(--color-secondary-dark-6); 83 - /* console colors - used for actions console and console files */ 84 - --color-console-fg: #eeeff2; 85 - --color-console-fg-subtle: #959cab; 86 - --color-console-bg: #262936; 87 - --color-console-border: #383c47; 88 - --color-console-hover-bg: #ffffff16; 89 - --color-console-active-bg: #454a57; 90 - --color-console-menu-bg: #383c47; 91 - --color-console-menu-border: #5c6374; 92 - /* named colors */ 93 - --color-red: #db2828; 94 - --color-orange: #f2711c; 95 - --color-yellow: #fbbd08; 96 - --color-olive: #b5cc18; 97 - --color-green: #21ba45; 98 - --color-teal: #00b5ad; 99 - --color-blue: #2185d0; 100 - --color-violet: #6435c9; 101 - --color-purple: #a333c8; 102 - --color-pink: #e03997; 103 - --color-brown: #a5673f; 104 - --color-black: #1b1c1d; 105 - /* light variants - produced via Sass scale-color(color, $lightness: +25%) */ 106 - --color-red-light: #e45e5e; 107 - --color-orange-light: #f59555; 108 - --color-yellow-light: #fcce46; 109 - --color-olive-light: #d3e942; 110 - --color-green-light: #46de6a; 111 - --color-teal-light: #08fff4; 112 - --color-blue-light: #51a5e3; 113 - --color-violet-light: #8b67d7; 114 - --color-purple-light: #bb64d8; 115 - --color-pink-light: #e86bb1; 116 - --color-brown-light: #c58b66; 117 - --color-black-light: #525558; 118 - /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ 119 - --color-red-dark-1: #c82121; 120 - --color-orange-dark-1: #e6630d; 121 - --color-yellow-dark-1: #e5ac04; 122 - --color-olive-dark-1: #a3b816; 123 - --color-green-dark-1: #1ea73e; 124 - --color-teal-dark-1: #00a39c; 125 - --color-blue-dark-1: #1e78bb; 126 - --color-violet-dark-1: #5a30b5; 127 - --color-purple-dark-1: #932eb4; 128 - --color-pink-dark-1: #db228a; 129 - --color-brown-dark-1: #955d39; 130 - --color-black-dark-1: #18191a; 131 - /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ 132 - --color-red-dark-2: #b11e1e; 133 - --color-orange-dark-2: #cc580c; 134 - --color-yellow-dark-2: #cc9903; 135 - --color-olive-dark-2: #91a313; 136 - --color-green-dark-2: #1a9537; 137 - --color-teal-dark-2: #00918a; 138 - --color-blue-dark-2: #1a6aa6; 139 - --color-violet-dark-2: #502aa1; 140 - --color-purple-dark-2: #8229a0; 141 - --color-pink-dark-2: #c21e7b; 142 - --color-brown-dark-2: #845232; 143 - --color-black-dark-2: #161617; 144 - /* ansi colors used for actions console and console files */ 145 - --color-ansi-black: var(--color-black); 146 - --color-ansi-red: var(--color-red); 147 - --color-ansi-green: var(--color-green); 148 - --color-ansi-yellow: var(--color-yellow); 149 - --color-ansi-blue: var(--color-blue); 150 - --color-ansi-magenta: var(--color-pink); 151 - --color-ansi-cyan: var(--color-teal); 152 - --color-ansi-white: var(--color-console-fg-subtle); 153 - --color-ansi-bright-black: var(--color-black-light); 154 - --color-ansi-bright-red: var(--color-red-light); 155 - --color-ansi-bright-green: var(--color-green-light); 156 - --color-ansi-bright-yellow: var(--color-yellow-light); 157 - --color-ansi-bright-blue: var(--color-blue-light); 158 - --color-ansi-bright-magenta: var(--color-pink-light); 159 - --color-ansi-bright-cyan: var(--color-teal-light); 160 - --color-ansi-bright-white: var(--color-console-fg); 161 - /* other colors */ 162 - --color-grey: #707070; 163 - --color-grey-light: #838383; 164 - --color-gold: #a1882b; 165 - --color-white: #ffffff; 166 - --color-diff-removed-word-bg: #fdb8c0; 167 - --color-diff-added-word-bg: #acf2bd; 168 - --color-diff-removed-row-bg: #ffeef0; 169 - --color-diff-moved-row-bg: #f1f8d1; 170 - --color-diff-added-row-bg: #e6ffed; 171 - --color-diff-removed-row-border: #f1c0c0; 172 - --color-diff-moved-row-border: #d0e27f; 173 - --color-diff-added-row-border: #e6ffed; 174 - --color-diff-inactive: #f2f2f2; 175 - --color-error-border: #e0b4b4; 176 - --color-error-bg: #fff6f6; 177 - --color-error-bg-active: #fbb; 178 - --color-error-bg-hover: #fdd; 179 - --color-error-text: #9f3a38; 180 - --color-success-border: #a3c293; 181 - --color-success-bg: #fcfff5; 182 - --color-success-text: #2c662d; 183 - --color-warning-border: #c9ba9b; 184 - --color-warning-bg: #fffaf3; 185 - --color-warning-text: #573a08; 186 - --color-info-border: #a9d5de; 187 - --color-info-bg: #f8ffff; 188 - --color-info-text: #276f86; 189 - --color-red-badge: #db2828; 190 - --color-red-badge-bg: #db28281a; 191 - --color-red-badge-hover-bg: #db28284d; 192 - --color-green-badge: #21ba45; 193 - --color-green-badge-bg: #21ba451a; 194 - --color-green-badge-hover-bg: #21ba454d; 195 - --color-yellow-badge: #fbbd08; 196 - --color-yellow-badge-bg: #fbbd081a; 197 - --color-yellow-badge-hover-bg: #fbbd084d; 198 - --color-orange-badge: #f2711c; 199 - --color-orange-badge-bg: #f2711c1a; 200 - --color-orange-badge-hover-bg: #f2711c4d; 201 - --color-git: #f05133; 202 - /* target-based colors */ 203 - --color-body: #ffffff; 204 - --color-text-dark: #080808; 205 - --color-text: #212121; 206 - --color-text-light: #555555; 207 - --color-text-light-1: #6a6a6a; 208 - --color-text-light-2: #808080; 209 - --color-text-light-3: #a0a0a0; 210 - --color-box-header: #f7f7f7; 211 - --color-box-body: #ffffff; 212 - --color-box-body-highlight: #fafafa; 213 - --color-footer: #ffffff; 214 - --color-timeline: #ececec; 215 - --color-input-text: #212121; 216 - --color-input-background: #fafafa; 217 - --color-input-toggle-background: #dedede; 218 - --color-input-border: var(--color-secondary); 219 - --color-input-border-hover: var(--color-secondary-dark-1); 220 - --color-header-wrapper: transparent; 221 - --color-light: #00000006; 222 - --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); 223 - --color-light-border: #0000001d; 224 - --color-hover: #00000014; 225 - --color-active: #0000001b; 226 - --color-menu: #fafafa; 227 - --color-card: #fafafa; 228 - --color-markup-table-row: #00000008; 229 - --color-markup-code-block: #00000010; 230 - --color-button: #fafafa; 231 - --color-code-bg: #ffffff; 232 - --color-code-sidebar-bg: #f5f5f5; 233 - --color-shadow: #00000026; 234 - --color-secondary-bg: #f4f4f4; 235 - --color-expand-button: #d8efff; 236 - --color-placeholder-text: #aaa; 237 - --color-editor-line-highlight: var(--color-primary-light-6); 238 - --color-project-board-bg: var(--color-secondary-light-4); 239 - --color-project-board-dark-label: #111111; 240 - --color-project-board-light-label: #eeeeee; 241 - --color-caret: var(--color-text-dark); 242 - --color-reaction-bg: #0000000a; 243 - --color-reaction-hover-bg: var(--color-primary-light-5); 244 - --color-reaction-active-bg: var(--color-primary-light-6); 245 - --color-tooltip-text: #ffffff; 246 - --color-tooltip-bg: #000000f0; 247 - --color-nav-bg: #ffffff; 248 - --color-nav-hover-bg: #ebebeb; 249 - --color-nav-text: var(--color-text); 250 - --color-label-text: #232323; 251 - --color-label-bg: #cacaca5b; 252 - --color-label-hover-bg: #cacacaa0; 253 - --color-label-active-bg: #cacacaff; 254 - --color-accent: var(--color-primary-light-1); 255 - --color-small-accent: var(--color-primary-light-6); 256 - --color-active-line: #fffbdd; 257 - --color-overlay-backdrop: #080808c0; 258 - accent-color: var(--color-accent); 259 - color-scheme: light; 260 25 } 261 26 262 27 :root * {
-4
web_src/css/index.css
··· 32 32 @import "./markup/asciicast.css"; 33 33 34 34 @import "./chroma/base.css"; 35 - @import "./chroma/light.css"; 36 - 37 35 @import "./codemirror/base.css"; 38 - @import "./codemirror/light.css"; 39 - 40 36 @import "./font_i18n.css"; 41 37 @import "./base.css"; 42 38 @import "./home.css";
+3 -1
web_src/css/themes/theme-arc-green.css web_src/css/themes/theme-gitea-dark.css
··· 212 212 --color-code-sidebar-bg: #232834; 213 213 --color-shadow: #00000058; 214 214 --color-secondary-bg: #2a2e3a; 215 - --color-text-focus: #fff; 216 215 --color-expand-button: #3c404d; 217 216 --color-placeholder-text: #8a8e99; 218 217 --color-editor-line-highlight: var(--color-primary-light-5); 219 218 --color-project-board-bg: var(--color-secondary-light-2); 219 + --color-project-board-dark-label: #111111; 220 + --color-project-board-light-label: #eeeeee; 220 221 --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ 221 222 --color-reaction-bg: #ffffff12; 222 223 --color-reaction-hover-bg: var(--color-primary-light-4); ··· 225 226 --color-tooltip-bg: #000000f0; 226 227 --color-nav-bg: #232834; 227 228 --color-nav-hover-bg: #383c47; 229 + --color-nav-text: var(--color-text); 228 230 --color-label-text: #dfe3ec; 229 231 --color-label-bg: #7c84974b; 230 232 --color-label-hover-bg: #7c8497a0;
-1
web_src/css/themes/theme-auto.css
··· 1 - @import "./theme-arc-green.css" (prefers-color-scheme: dark);
+2
web_src/css/themes/theme-gitea-auto.css
··· 1 + @import "./theme-gitea-light.css" (prefers-color-scheme: light); 2 + @import "./theme-gitea-dark.css" (prefers-color-scheme: dark);
+240
web_src/css/themes/theme-gitea-light.css
··· 1 + @import "../chroma/light.css"; 2 + @import "../codemirror/light.css"; 3 + 4 + :root { 5 + --is-dark-theme: false; 6 + --color-primary: #4183c4; 7 + --color-primary-contrast: #ffffff; 8 + --color-primary-dark-1: #3876b3; 9 + --color-primary-dark-2: #31699f; 10 + --color-primary-dark-3: #2b5c8b; 11 + --color-primary-dark-4: #254f77; 12 + --color-primary-dark-5: #193450; 13 + --color-primary-dark-6: #0c1a28; 14 + --color-primary-dark-7: #04080c; 15 + --color-primary-light-1: #548fca; 16 + --color-primary-light-2: #679cd0; 17 + --color-primary-light-3: #7aa8d6; 18 + --color-primary-light-4: #8db5dc; 19 + --color-primary-light-5: #b3cde7; 20 + --color-primary-light-6: #d9e6f3; 21 + --color-primary-light-7: #f4f8fb; 22 + --color-primary-alpha-10: #4183c419; 23 + --color-primary-alpha-20: #4183c433; 24 + --color-primary-alpha-30: #4183c44b; 25 + --color-primary-alpha-40: #4183c466; 26 + --color-primary-alpha-50: #4183c480; 27 + --color-primary-alpha-60: #4183c499; 28 + --color-primary-alpha-70: #4183c4b3; 29 + --color-primary-alpha-80: #4183c4cc; 30 + --color-primary-alpha-90: #4183c4e1; 31 + --color-primary-hover: var(--color-primary-dark-1); 32 + --color-primary-active: var(--color-primary-dark-2); 33 + --color-secondary: #dedede; 34 + --color-secondary-dark-1: #cecece; 35 + --color-secondary-dark-2: #bfbfbf; 36 + --color-secondary-dark-3: #a0a0a0; 37 + --color-secondary-dark-4: #909090; 38 + --color-secondary-dark-5: #818181; 39 + --color-secondary-dark-6: #717171; 40 + --color-secondary-dark-7: #626262; 41 + --color-secondary-dark-8: #525252; 42 + --color-secondary-dark-9: #434343; 43 + --color-secondary-dark-10: #333333; 44 + --color-secondary-dark-11: #242424; 45 + --color-secondary-dark-12: #141414; 46 + --color-secondary-dark-13: #040404; 47 + --color-secondary-light-1: #e5e5e5; 48 + --color-secondary-light-2: #ebebeb; 49 + --color-secondary-light-3: #f2f2f2; 50 + --color-secondary-light-4: #f8f8f8; 51 + --color-secondary-alpha-10: #dedede19; 52 + --color-secondary-alpha-20: #dedede33; 53 + --color-secondary-alpha-30: #dedede4b; 54 + --color-secondary-alpha-40: #dedede66; 55 + --color-secondary-alpha-50: #dedede80; 56 + --color-secondary-alpha-60: #dedede99; 57 + --color-secondary-alpha-70: #dededeb3; 58 + --color-secondary-alpha-80: #dededecc; 59 + --color-secondary-alpha-90: #dededee1; 60 + --color-secondary-button: var(--color-secondary-dark-4); 61 + --color-secondary-hover: var(--color-secondary-dark-5); 62 + --color-secondary-active: var(--color-secondary-dark-6); 63 + /* console colors - used for actions console and console files */ 64 + --color-console-fg: #eeeff2; 65 + --color-console-fg-subtle: #959cab; 66 + --color-console-bg: #262936; 67 + --color-console-border: #383c47; 68 + --color-console-hover-bg: #ffffff16; 69 + --color-console-active-bg: #454a57; 70 + --color-console-menu-bg: #383c47; 71 + --color-console-menu-border: #5c6374; 72 + /* named colors */ 73 + --color-red: #db2828; 74 + --color-orange: #f2711c; 75 + --color-yellow: #fbbd08; 76 + --color-olive: #b5cc18; 77 + --color-green: #21ba45; 78 + --color-teal: #00b5ad; 79 + --color-blue: #2185d0; 80 + --color-violet: #6435c9; 81 + --color-purple: #a333c8; 82 + --color-pink: #e03997; 83 + --color-brown: #a5673f; 84 + --color-black: #1b1c1d; 85 + /* light variants - produced via Sass scale-color(color, $lightness: +25%) */ 86 + --color-red-light: #e45e5e; 87 + --color-orange-light: #f59555; 88 + --color-yellow-light: #fcce46; 89 + --color-olive-light: #d3e942; 90 + --color-green-light: #46de6a; 91 + --color-teal-light: #08fff4; 92 + --color-blue-light: #51a5e3; 93 + --color-violet-light: #8b67d7; 94 + --color-purple-light: #bb64d8; 95 + --color-pink-light: #e86bb1; 96 + --color-brown-light: #c58b66; 97 + --color-black-light: #525558; 98 + /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ 99 + --color-red-dark-1: #c82121; 100 + --color-orange-dark-1: #e6630d; 101 + --color-yellow-dark-1: #e5ac04; 102 + --color-olive-dark-1: #a3b816; 103 + --color-green-dark-1: #1ea73e; 104 + --color-teal-dark-1: #00a39c; 105 + --color-blue-dark-1: #1e78bb; 106 + --color-violet-dark-1: #5a30b5; 107 + --color-purple-dark-1: #932eb4; 108 + --color-pink-dark-1: #db228a; 109 + --color-brown-dark-1: #955d39; 110 + --color-black-dark-1: #18191a; 111 + /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ 112 + --color-red-dark-2: #b11e1e; 113 + --color-orange-dark-2: #cc580c; 114 + --color-yellow-dark-2: #cc9903; 115 + --color-olive-dark-2: #91a313; 116 + --color-green-dark-2: #1a9537; 117 + --color-teal-dark-2: #00918a; 118 + --color-blue-dark-2: #1a6aa6; 119 + --color-violet-dark-2: #502aa1; 120 + --color-purple-dark-2: #8229a0; 121 + --color-pink-dark-2: #c21e7b; 122 + --color-brown-dark-2: #845232; 123 + --color-black-dark-2: #161617; 124 + /* ansi colors used for actions console and console files */ 125 + --color-ansi-black: var(--color-black); 126 + --color-ansi-red: var(--color-red); 127 + --color-ansi-green: var(--color-green); 128 + --color-ansi-yellow: var(--color-yellow); 129 + --color-ansi-blue: var(--color-blue); 130 + --color-ansi-magenta: var(--color-pink); 131 + --color-ansi-cyan: var(--color-teal); 132 + --color-ansi-white: var(--color-console-fg-subtle); 133 + --color-ansi-bright-black: var(--color-black-light); 134 + --color-ansi-bright-red: var(--color-red-light); 135 + --color-ansi-bright-green: var(--color-green-light); 136 + --color-ansi-bright-yellow: var(--color-yellow-light); 137 + --color-ansi-bright-blue: var(--color-blue-light); 138 + --color-ansi-bright-magenta: var(--color-pink-light); 139 + --color-ansi-bright-cyan: var(--color-teal-light); 140 + --color-ansi-bright-white: var(--color-console-fg); 141 + /* other colors */ 142 + --color-grey: #707070; 143 + --color-grey-light: #838383; 144 + --color-gold: #a1882b; 145 + --color-white: #ffffff; 146 + --color-diff-removed-word-bg: #fdb8c0; 147 + --color-diff-added-word-bg: #acf2bd; 148 + --color-diff-removed-row-bg: #ffeef0; 149 + --color-diff-moved-row-bg: #f1f8d1; 150 + --color-diff-added-row-bg: #e6ffed; 151 + --color-diff-removed-row-border: #f1c0c0; 152 + --color-diff-moved-row-border: #d0e27f; 153 + --color-diff-added-row-border: #e6ffed; 154 + --color-diff-inactive: #f2f2f2; 155 + --color-error-border: #e0b4b4; 156 + --color-error-bg: #fff6f6; 157 + --color-error-bg-active: #fbb; 158 + --color-error-bg-hover: #fdd; 159 + --color-error-text: #9f3a38; 160 + --color-success-border: #a3c293; 161 + --color-success-bg: #fcfff5; 162 + --color-success-text: #2c662d; 163 + --color-warning-border: #c9ba9b; 164 + --color-warning-bg: #fffaf3; 165 + --color-warning-text: #573a08; 166 + --color-info-border: #a9d5de; 167 + --color-info-bg: #f8ffff; 168 + --color-info-text: #276f86; 169 + --color-red-badge: #db2828; 170 + --color-red-badge-bg: #db28281a; 171 + --color-red-badge-hover-bg: #db28284d; 172 + --color-green-badge: #21ba45; 173 + --color-green-badge-bg: #21ba451a; 174 + --color-green-badge-hover-bg: #21ba454d; 175 + --color-yellow-badge: #fbbd08; 176 + --color-yellow-badge-bg: #fbbd081a; 177 + --color-yellow-badge-hover-bg: #fbbd084d; 178 + --color-orange-badge: #f2711c; 179 + --color-orange-badge-bg: #f2711c1a; 180 + --color-orange-badge-hover-bg: #f2711c4d; 181 + --color-git: #f05133; 182 + /* target-based colors */ 183 + --color-body: #ffffff; 184 + --color-box-header: #f7f7f7; 185 + --color-box-body: #ffffff; 186 + --color-box-body-highlight: #fafafa; 187 + --color-text-dark: #080808; 188 + --color-text: #212121; 189 + --color-text-light: #555555; 190 + --color-text-light-1: #6a6a6a; 191 + --color-text-light-2: #808080; 192 + --color-text-light-3: #a0a0a0; 193 + --color-footer: #ffffff; 194 + --color-timeline: #ececec; 195 + --color-input-text: #212121; 196 + --color-input-background: #fafafa; 197 + --color-input-toggle-background: #dedede; 198 + --color-input-border: var(--color-secondary); 199 + --color-input-border-hover: var(--color-secondary-dark-1); 200 + --color-header-wrapper: transparent; 201 + --color-light: #00000006; 202 + --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); 203 + --color-light-border: #0000001d; 204 + --color-hover: #00000014; 205 + --color-active: #0000001b; 206 + --color-menu: #fafafa; 207 + --color-card: #fafafa; 208 + --color-markup-table-row: #00000008; 209 + --color-markup-code-block: #00000010; 210 + --color-button: #fafafa; 211 + --color-code-bg: #ffffff; 212 + --color-code-sidebar-bg: #f5f5f5; 213 + --color-shadow: #00000026; 214 + --color-secondary-bg: #f4f4f4; 215 + --color-expand-button: #d8efff; 216 + --color-placeholder-text: #aaa; 217 + --color-editor-line-highlight: var(--color-primary-light-6); 218 + --color-project-board-bg: var(--color-secondary-light-4); 219 + --color-project-board-dark-label: #111111; 220 + --color-project-board-light-label: #eeeeee; 221 + --color-caret: var(--color-text-dark); 222 + --color-reaction-bg: #0000000a; 223 + --color-reaction-hover-bg: var(--color-primary-light-5); 224 + --color-reaction-active-bg: var(--color-primary-light-6); 225 + --color-tooltip-text: #ffffff; 226 + --color-tooltip-bg: #000000f0; 227 + --color-nav-bg: #ffffff; 228 + --color-nav-hover-bg: #ebebeb; 229 + --color-nav-text: var(--color-text); 230 + --color-label-text: #232323; 231 + --color-label-bg: #cacaca5b; 232 + --color-label-hover-bg: #cacacaa0; 233 + --color-label-active-bg: #cacacaff; 234 + --color-accent: var(--color-primary-light-1); 235 + --color-small-accent: var(--color-primary-light-6); 236 + --color-active-line: #fffbdd; 237 + --color-overlay-backdrop: #080808c0; 238 + accent-color: var(--color-accent); 239 + color-scheme: light; 240 + }