From 7287267b35f02362ecaf0aa38af959895a79d2c9 Mon Sep 17 00:00:00 2001 From: Giteabot Date: Thu, 11 Apr 2024 10:14:28 +0800 Subject: [PATCH] Minor color tweaks (#30397) (#30398) Backport #30397 by @silverwind New approach to color shades: Stem all colors off the body color `#1b1f23` using [this](https://pinetools.com/darken-color) and [this](https://pinetools.com/lighten-color) tool. The differences are very subtle, but it will give a more consistent color scheme until https://github.com/go-gitea/gitea/issues/30160. Screenshot 2024-04-10 at 20 44 16 Co-authored-by: silverwind --- web_src/css/themes/theme-gitea-dark.css | 128 +++++++++++------------ web_src/css/themes/theme-gitea-light.css | 18 ++-- 2 files changed, 73 insertions(+), 73 deletions(-) diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index c74f334c2d..7bf2c982c6 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -30,45 +30,45 @@ --color-primary-alpha-90: #4183c4e1; --color-primary-hover: var(--color-primary-light-1); --color-primary-active: var(--color-primary-light-2); - --color-secondary: #3b444a; - --color-secondary-dark-1: #424b51; - --color-secondary-dark-2: #4a545b; - --color-secondary-dark-3: #59646c; - --color-secondary-dark-4: #6b7681; - --color-secondary-dark-5: #78858f; - --color-secondary-dark-6: #87929d; - --color-secondary-dark-7: #939ea9; - --color-secondary-dark-8: #a1acb4; - --color-secondary-dark-9: #aab3bc; - --color-secondary-dark-10: #b6bfc8; - --color-secondary-dark-11: #c2cbd3; - --color-secondary-dark-12: #ccd4dc; - --color-secondary-dark-13: #cfd7df; - --color-secondary-light-1: #2e353b; - --color-secondary-light-2: #2b353e; - --color-secondary-light-3: #1c2227; - --color-secondary-light-4: #161b1f; - --color-secondary-alpha-10: #3b444a19; - --color-secondary-alpha-20: #3b444a33; - --color-secondary-alpha-30: #3b444a4b; - --color-secondary-alpha-40: #3b444a66; - --color-secondary-alpha-50: #3b444a80; - --color-secondary-alpha-60: #3b444a99; - --color-secondary-alpha-70: #3b444ab3; - --color-secondary-alpha-80: #3b444acc; - --color-secondary-alpha-90: #3b444ae1; + --color-secondary: #3b444c; + --color-secondary-dark-1: #414b54; + --color-secondary-dark-2: #49545f; + --color-secondary-dark-3: #576471; + --color-secondary-dark-4: #677685; + --color-secondary-dark-5: #758594; + --color-secondary-dark-6: #8392a0; + --color-secondary-dark-7: #929eab; + --color-secondary-dark-8: #a2acb7; + --color-secondary-dark-9: #a9b3bd; + --color-secondary-dark-10: #b7bfc7; + --color-secondary-dark-11: #c5cbd2; + --color-secondary-dark-12: #cfd4da; + --color-secondary-dark-13: #d2d7dc; + --color-secondary-light-1: #313940; + --color-secondary-light-2: #292f35; + --color-secondary-light-3: #1d2226; + --color-secondary-light-4: #171b1e; + --color-secondary-alpha-10: #3b444c19; + --color-secondary-alpha-20: #3b444c33; + --color-secondary-alpha-30: #3b444c4b; + --color-secondary-alpha-40: #3b444c66; + --color-secondary-alpha-50: #3b444c80; + --color-secondary-alpha-60: #3b444c99; + --color-secondary-alpha-70: #3b444cb3; + --color-secondary-alpha-80: #3b444ccc; + --color-secondary-alpha-90: #3b444ce1; --color-secondary-button: var(--color-secondary-dark-4); --color-secondary-hover: var(--color-secondary-dark-3); --color-secondary-active: var(--color-secondary-dark-2); /* console colors - used for actions console and console files */ - --color-console-fg: #f8f8f9; - --color-console-fg-subtle: #bec4c8; + --color-console-fg: #f7f8f9; + --color-console-fg-subtle: #bdc4cc; --color-console-bg: #171b1e; --color-console-border: #2e353b; - --color-console-hover-bg: #292d31; + --color-console-hover-bg: #272d33; --color-console-active-bg: #2e353b; - --color-console-menu-bg: #252b30; - --color-console-menu-border: #424b51; + --color-console-menu-bg: #262b31; + --color-console-menu-border: #414b55; /* named colors */ --color-red: #cc4848; --color-orange: #cc580c; @@ -122,7 +122,7 @@ --color-brown-dark-2: #835b42; --color-black-dark-2: #272930; /* ansi colors used for actions console and console files */ - --color-ansi-black: #1d2328; + --color-ansi-black: #1e2327; --color-ansi-red: #cc4848; --color-ansi-green: #87ab63; --color-ansi-yellow: #cc9903; @@ -139,8 +139,8 @@ --color-ansi-bright-cyan: #00b6ad; --color-ansi-bright-white: var(--color-console-fg); /* other colors */ - --color-grey: #384147; - --color-grey-light: #828f99; + --color-grey: #384149; + --color-grey-light: #818f9e; --color-gold: #b1983b; --color-white: #ffffff; --color-diff-removed-word-bg: #6f3333; @@ -180,55 +180,55 @@ --color-orange-badge-hover-bg: #f2711c4d; --color-git: #f05133; /* target-based colors */ - --color-body: #1c1f25; + --color-body: #1b1f23; --color-box-header: #1a1d1f; --color-box-body: #14171a; - --color-box-body-highlight: #1c2227; - --color-text-dark: #f8f8f9; - --color-text: #d1d5d8; - --color-text-light: #bdc3c7; - --color-text-light-1: #a8afb5; - --color-text-light-2: #929ba2; - --color-text-light-3: #7c8790; + --color-box-body-highlight: #1e2226; + --color-text-dark: #f7f8f9; + --color-text: #d0d5da; + --color-text-light: #bcc3cb; + --color-text-light-1: #a5afb9; + --color-text-light-2: #8f9ba8; + --color-text-light-3: #788797; --color-footer: var(--color-nav-bg); - --color-timeline: #353c42; + --color-timeline: #343c44; --color-input-text: var(--color-text-dark); - --color-input-background: #151a1e; - --color-input-toggle-background: #2e353b; + --color-input-background: #171a1e; + --color-input-toggle-background: #2e353c; --color-input-border: var(--color-secondary); --color-input-border-hover: var(--color-secondary-dark-1); --color-light: #00001728; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #e8e8ff28; - --color-hover: #e8e8ff19; - --color-active: #e8e8ff24; - --color-menu: #151a1e; - --color-card: #151a1e; - --color-markup-table-row: #e8e8ff0f; - --color-markup-code-block: #e8e8ff12; - --color-markup-code-inline: #e8e8ff28; - --color-button: #151a1e; + --color-light-border: #e8f3ff28; + --color-hover: #e8f3ff19; + --color-active: #e8f3ff24; + --color-menu: #171a1e; + --color-card: #171a1e; + --color-markup-table-row: #e8f3ff0f; + --color-markup-code-block: #e8f3ff12; + --color-markup-code-inline: #e8f3ff28; + --color-button: #171a1e; --color-code-bg: #14171a; --color-shadow: #00001758; - --color-secondary-bg: #2f3138; - --color-expand-button: #2b353e; + --color-secondary-bg: #2a3137; + --color-expand-button: #2f363d; --color-placeholder-text: var(--color-text-light-3); --color-editor-line-highlight: var(--color-primary-light-5); --color-project-board-bg: var(--color-secondary-light-2); --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #e8e8ff12; + --color-reaction-bg: #e8f3ff12; --color-reaction-hover-bg: var(--color-primary-light-4); --color-reaction-active-bg: var(--color-primary-light-5); - --color-tooltip-text: #fafafb; - --color-tooltip-bg: #000017f0; - --color-nav-bg: #16191c; + --color-tooltip-text: #f9fafb; + --color-tooltip-bg: #000b17f0; + --color-nav-bg: #16191d; --color-nav-hover-bg: var(--color-secondary-light-1); --color-nav-text: var(--color-text); --color-secondary-nav-bg: #181c20; --color-label-text: var(--color-text); - --color-label-bg: #73828e4b; - --color-label-hover-bg: #73828ea0; - --color-label-active-bg: #73828eff; + --color-label-bg: #7282924b; + --color-label-hover-bg: #728292a0; + --color-label-active-bg: #728292ff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-highlight-fg: #87651e; diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index 01dd8ba4f7..dfccd37647 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -61,14 +61,14 @@ --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: #f8f8f9; - --color-console-fg-subtle: #bec4c8; + --color-console-fg: #f7f8f9; + --color-console-fg-subtle: #bdc4cc; --color-console-bg: #171b1e; --color-console-border: #2e353b; - --color-console-hover-bg: #292d31; + --color-console-hover-bg: #272d33; --color-console-active-bg: #2e353b; - --color-console-menu-bg: #252b30; - --color-console-menu-border: #424b51; + --color-console-menu-bg: #262b31; + --color-console-menu-border: #414b55; /* named colors */ --color-red: #db2828; --color-orange: #f2711c; @@ -81,7 +81,7 @@ --color-purple: #a333c8; --color-pink: #e03997; --color-brown: #a5673f; - --color-black: #191c1d; + --color-black: #1d2328; /* light variants - produced via Sass scale-color(color, $lightness: +25%) */ --color-red-light: #e45e5e; --color-orange-light: #f59555; @@ -94,7 +94,7 @@ --color-purple-light: #bb64d8; --color-pink-light: #e86bb1; --color-brown-light: #c58b66; - --color-black-light: #525558; + --color-black-light: #4b5b68; /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ --color-red-dark-1: #c82121; --color-orange-dark-1: #e6630d; @@ -107,7 +107,7 @@ --color-purple-dark-1: #932eb4; --color-pink-dark-1: #db228a; --color-brown-dark-1: #955d39; - --color-black-dark-1: #16191c; + --color-black-dark-1: #2c3339; /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ --color-red-dark-2: #b11e1e; --color-orange-dark-2: #cc580c; @@ -122,7 +122,7 @@ --color-brown-dark-2: #845232; --color-black-dark-2: #131619; /* ansi colors used for actions console and console files */ - --color-ansi-black: #1f2326; + --color-ansi-black: #1e2327; --color-ansi-red: #cc4848; --color-ansi-green: #87ab63; --color-ansi-yellow: #cc9903;