From 64683d60795ca49f351193b5c0e9e6adb29c21b9 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 17 Oct 2023 00:39:00 +0200 Subject: [PATCH 1/7] Recolor dark theme to blue shade Now uses the same primary color as light theme. The secondary colors are shifted towards a slightly blue shade. --- web_src/css/themes/theme-gitea-dark.css | 190 ++++++++++++------------ 1 file changed, 95 insertions(+), 95 deletions(-) diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index bac002e3db5eb..6edaf67068a88 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -3,72 +3,72 @@ :root { --is-dark-theme: true; - --color-primary: #87ab63; + --color-primary: #4183c4; --color-primary-contrast: #ffffff; - --color-primary-dark-1: #93b373; - --color-primary-dark-2: #9fbc82; - --color-primary-dark-3: #abc492; - --color-primary-dark-4: #b7cda1; - --color-primary-dark-5: #cfddc1; - --color-primary-dark-6: #e7eee0; - --color-primary-dark-7: #f8faf6; - --color-primary-light-1: #7a9e55; - --color-primary-light-2: #6c8c4c; - --color-primary-light-3: #5f7b42; - --color-primary-light-4: #516939; - --color-primary-light-5: #364626; - --color-primary-light-6: #1b2313; - --color-primary-light-7: #080b06; - --color-primary-alpha-10: #87ab6319; - --color-primary-alpha-20: #87ab6333; - --color-primary-alpha-30: #87ab634b; - --color-primary-alpha-40: #87ab6366; - --color-primary-alpha-50: #87ab6380; - --color-primary-alpha-60: #87ab6399; - --color-primary-alpha-70: #87ab63b3; - --color-primary-alpha-80: #87ab63cc; - --color-primary-alpha-90: #87ab63e1; + --color-primary-dark-1: #548fca; + --color-primary-dark-2: #679cd0; + --color-primary-dark-3: #7aa8d6; + --color-primary-dark-4: #8db5dc; + --color-primary-dark-5: #b3cde7; + --color-primary-dark-6: #d9e6f3; + --color-primary-dark-7: #f4f8fb; + --color-primary-light-1: #3876b3; + --color-primary-light-2: #31699f; + --color-primary-light-3: #2b5c8b; + --color-primary-light-4: #254f77; + --color-primary-light-5: #193450; + --color-primary-light-6: #0c1a28; + --color-primary-light-7: #04080c; + --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-light-1); --color-primary-active: var(--color-primary-light-2); - --color-secondary: #525767; - --color-secondary-dark-1: #5c6374; - --color-secondary-dark-2: #666e81; - --color-secondary-dark-3: #7c8497; - --color-secondary-dark-4: #8990a1; - --color-secondary-dark-5: #959cab; - --color-secondary-dark-6: #a2a8b5; - --color-secondary-dark-7: #afb4c0; - --color-secondary-dark-8: #bcc0ca; - --color-secondary-dark-9: #c9cbd4; - --color-secondary-dark-10: #d6d7de; - --color-secondary-dark-11: #e2e3e8; - --color-secondary-dark-12: #eeeff2; - --color-secondary-dark-13: #fbfbfc; - --color-secondary-light-1: #454a57; - --color-secondary-light-2: #383c47; - --color-secondary-light-3: #2c2f37; - --color-secondary-light-4: #1f2226; - --color-secondary-alpha-10: #52576719; - --color-secondary-alpha-20: #52576733; - --color-secondary-alpha-30: #5257674b; - --color-secondary-alpha-40: #52576766; - --color-secondary-alpha-50: #52576780; - --color-secondary-alpha-60: #52576799; - --color-secondary-alpha-70: #525767b3; - --color-secondary-alpha-80: #525767cc; - --color-secondary-alpha-90: #525767e1; + --color-secondary: #3a434b; + --color-secondary-dark-1: #414a52; + --color-secondary-dark-2: #4a535c; + --color-secondary-dark-3: #59636c; + --color-secondary-dark-4: #6c7680; + --color-secondary-dark-5: #79848e; + --color-secondary-dark-6: #87929d; + --color-secondary-dark-7: #939ea9; + --color-secondary-dark-8: #9fabb6; + --color-secondary-dark-9: #a7b3bf; + --color-secondary-dark-10: #b3bfcb; + --color-secondary-dark-11: #becbd7; + --color-secondary-dark-12: #c7d4e1; + --color-secondary-dark-13: #cad7e4; + --color-secondary-light-1: #2c353d; + --color-secondary-light-2: #222b33; + --color-secondary-light-3: #19222a; + --color-secondary-light-4: #131b23; + --color-secondary-alpha-10: #3a434b19; + --color-secondary-alpha-20: #3a434b33; + --color-secondary-alpha-30: #3a434b4b; + --color-secondary-alpha-40: #3a434b66; + --color-secondary-alpha-50: #3a434b80; + --color-secondary-alpha-60: #3a434b99; + --color-secondary-alpha-70: #3a434bb3; + --color-secondary-alpha-80: #3a434bcc; + --color-secondary-alpha-90: #3a434be1; --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: #eeeff2; - --color-console-fg-subtle: #959cab; - --color-console-bg: #262936; - --color-console-border: #383c47; + --color-console-fg: #c7d4e1; + --color-console-fg-subtle: #79848e; + --color-console-bg: #172028; + --color-console-border: #222b33; --color-console-hover-bg: #ffffff16; - --color-console-active-bg: #454a57; - --color-console-menu-bg: #383c47; - --color-console-menu-border: #5c6374; + --color-console-active-bg: #2c353d; + --color-console-menu-bg: #222b33; + --color-console-menu-border: #414a52; /* named colors */ --color-red: #cc4848; --color-orange: #cc580c; @@ -81,7 +81,7 @@ --color-purple: #b259d0; --color-pink: #d22e8b; --color-brown: #a47252; - --color-black: #2e323e; + --color-black: #1a232b; /* light variants - produced via Sass scale-color(color, $lightness: +10%) */ --color-red-light: #d15a5a; --color-orange-light: #f6a066; @@ -94,7 +94,7 @@ --color-purple-light: #ba6ad5; --color-pink-light: #d74397; --color-brown-light: #b08061; - --color-black-light: #3f4555; + --color-black-light: #414653; /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ --color-red-dark-1: #c23636; --color-orange-dark-1: #f38236; @@ -107,7 +107,7 @@ --color-purple-dark-1: #a742c9; --color-pink-dark-1: #be297d; --color-brown-dark-1: #94674a; - --color-black-dark-1: #292d38; + --color-black-dark-1: #2a2e37; /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ --color-red-dark-2: #ad3030; --color-orange-dark-2: #f16e17; @@ -120,7 +120,7 @@ --color-purple-dark-2: #9834b9; --color-pink-dark-2: #a9246f; --color-brown-dark-2: #835b42; - --color-black-dark-2: #252832; + --color-black-dark-2: #262931; /* ansi colors used for actions console and console files */ --color-ansi-black: var(--color-black); --color-ansi-red: var(--color-red); @@ -139,8 +139,8 @@ --color-ansi-bright-cyan: var(--color-teal-light); --color-ansi-bright-white: var(--color-console-fg); /* other colors */ - --color-grey: #505665; - --color-grey-light: #a1a6b7; + --color-grey: #374048; + --color-grey-light: #838e98; --color-gold: #b1983b; --color-white: #ffffff; --color-diff-removed-word-bg: #6f3333; @@ -151,7 +151,7 @@ --color-diff-removed-row-border: #634343; --color-diff-moved-row-border: #bcca6f; --color-diff-added-row-border: #314a37; - --color-diff-inactive: #353846; + --color-diff-inactive: #1f2830; --color-error-border: #a04141; --color-error-bg: #522; --color-error-bg-active: #744; @@ -180,40 +180,40 @@ --color-orange-badge-hover-bg: #f2711c4d; --color-git: #f05133; /* target-based colors */ - --color-body: #2e323e; - --color-box-header: #303340; - --color-box-body: #222733; - --color-box-body-highlight: #262b36; - --color-text-dark: #dbe0ea; - --color-text: #cbd0da; - --color-text-light: #bbbfca; - --color-text-light-1: #aaafb9; - --color-text-light-2: #9a9ea9; - --color-text-light-3: #8a8e99; - --color-footer: #232834; - --color-timeline: #4c525e; - --color-input-text: #dfe3ec; - --color-input-background: #1e252e; - --color-input-toggle-background: #454a57; + --color-body: #1a232b; + --color-box-header: #1b242c; + --color-box-body: #141d25; + --color-box-body-highlight: #182129; + --color-text-dark: #b8c5d1; + --color-text: #adb9c5; + --color-text-light: #99a5b0; + --color-text-light-1: #8d98a3; + --color-text-light-2: #7f8a94; + --color-text-light-3: #717b85; + --color-footer: #161f27; + --color-timeline: #333c44; + --color-input-text: #bbc8d4; + --color-input-background: #121a22; + --color-input-toggle-background: #2c353d; --color-input-border: var(--color-secondary); --color-input-border-hover: var(--color-secondary-dark-1); - --color-header-wrapper: #202430; + --color-header-wrapper: #141d25; --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; --color-hover: #ffffff19; --color-active: #ffffff24; - --color-menu: #1e252e; - --color-card: #1e252e; + --color-menu: #121a22; + --color-card: #121a22; --color-markup-table-row: #ffffff06; --color-markup-code-block: #ffffff16; - --color-button: #1e252e; - --color-code-bg: #222733; - --color-code-sidebar-bg: #232834; + --color-button: #121a22; + --color-code-bg: #141d25; + --color-code-sidebar-bg: #161f27; --color-shadow: #00000058; - --color-secondary-bg: #2a2e3a; - --color-expand-button: #3c404d; - --color-placeholder-text: #8a8e99; + --color-secondary-bg: #2b2f39; + --color-expand-button: #3d414c; + --color-placeholder-text: #717b85; --color-editor-line-highlight: var(--color-primary-light-5); --color-project-board-bg: var(--color-secondary-light-2); --color-project-board-dark-label: #111111; @@ -224,13 +224,13 @@ --color-reaction-active-bg: var(--color-primary-light-5); --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; - --color-nav-bg: #232834; - --color-nav-hover-bg: #383c47; + --color-nav-bg: #161f27; + --color-nav-hover-bg: #222b33; --color-nav-text: var(--color-text); - --color-label-text: #dfe3ec; - --color-label-bg: #7c84974b; - --color-label-hover-bg: #7c8497a0; - --color-label-active-bg: #7c8497ff; + --color-label-text: #bbc8d4; + --color-label-bg: #59636c4b; + --color-label-hover-bg: #59636ca0; + --color-label-active-bg: #59636cff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #534d1b; From ae62a8e3fe83e4f51cb1947a6a0a9b6daf83f824 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 27 Feb 2024 21:45:38 +0100 Subject: [PATCH 2/7] desaturate secondary colors by 40% --- web_src/css/themes/theme-gitea-dark.css | 140 ++++++++++++------------ 1 file changed, 70 insertions(+), 70 deletions(-) diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 6edaf67068a88..0a49bb1a99a73 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: #3a434b; - --color-secondary-dark-1: #414a52; - --color-secondary-dark-2: #4a535c; - --color-secondary-dark-3: #59636c; - --color-secondary-dark-4: #6c7680; - --color-secondary-dark-5: #79848e; - --color-secondary-dark-6: #87929d; - --color-secondary-dark-7: #939ea9; - --color-secondary-dark-8: #9fabb6; - --color-secondary-dark-9: #a7b3bf; - --color-secondary-dark-10: #b3bfcb; - --color-secondary-dark-11: #becbd7; - --color-secondary-dark-12: #c7d4e1; - --color-secondary-dark-13: #cad7e4; - --color-secondary-light-1: #2c353d; - --color-secondary-light-2: #222b33; - --color-secondary-light-3: #19222a; - --color-secondary-light-4: #131b23; - --color-secondary-alpha-10: #3a434b19; - --color-secondary-alpha-20: #3a434b33; - --color-secondary-alpha-30: #3a434b4b; - --color-secondary-alpha-40: #3a434b66; - --color-secondary-alpha-50: #3a434b80; - --color-secondary-alpha-60: #3a434b99; - --color-secondary-alpha-70: #3a434bb3; - --color-secondary-alpha-80: #3a434bcc; - --color-secondary-alpha-90: #3a434be1; + --color-secondary: #3d4348; + --color-secondary-dark-1: #444a4f; + --color-secondary-dark-2: #4e5358; + --color-secondary-dark-3: #5d6368; + --color-secondary-dark-4: #70767c; + --color-secondary-dark-5: #7d848a; + --color-secondary-dark-6: #8b9299; + --color-secondary-dark-7: #979ea5; + --color-secondary-dark-8: #a4abb1; + --color-secondary-dark-9: #acb3ba; + --color-secondary-dark-10: #acb3ba; + --color-secondary-dark-11: #c3cbd2; + --color-secondary-dark-12: #ccd4dc; + --color-secondary-dark-13: #cfd7df; + --color-secondary-light-1: #2f353a; + --color-secondary-light-2: #252b30; + --color-secondary-light-3: #252b30; + --color-secondary-light-4: #161b20; + --color-secondary-alpha-10: #3d434819; + --color-secondary-alpha-20: #3d434833; + --color-secondary-alpha-30: #3d43484b; + --color-secondary-alpha-40: #3d434866; + --color-secondary-alpha-50: #3d434880; + --color-secondary-alpha-60: #3d434899; + --color-secondary-alpha-70: #3d4348b3; + --color-secondary-alpha-80: #3d4348cc; + --color-secondary-alpha-90: #3d4348e1; --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: #c7d4e1; - --color-console-fg-subtle: #79848e; - --color-console-bg: #172028; - --color-console-border: #222b33; + --color-console-fg: #ccd4dc; + --color-console-fg-subtle: #7d848a; + --color-console-bg: #1a2025; + --color-console-border: #252b30; --color-console-hover-bg: #ffffff16; - --color-console-active-bg: #2c353d; - --color-console-menu-bg: #222b33; - --color-console-menu-border: #414a52; + --color-console-active-bg: #2f353a; + --color-console-menu-bg: #252b30; + --color-console-menu-border: #444a4f; /* named colors */ --color-red: #cc4848; --color-orange: #cc580c; @@ -81,7 +81,7 @@ --color-purple: #b259d0; --color-pink: #d22e8b; --color-brown: #a47252; - --color-black: #1a232b; + --color-black: #1d2328; /* light variants - produced via Sass scale-color(color, $lightness: +10%) */ --color-red-light: #d15a5a; --color-orange-light: #f6a066; @@ -94,7 +94,7 @@ --color-purple-light: #ba6ad5; --color-pink-light: #d74397; --color-brown-light: #b08061; - --color-black-light: #414653; + --color-black-light: #45484f; /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ --color-red-dark-1: #c23636; --color-orange-dark-1: #f38236; @@ -120,7 +120,7 @@ --color-purple-dark-2: #9834b9; --color-pink-dark-2: #a9246f; --color-brown-dark-2: #835b42; - --color-black-dark-2: #262931; + --color-black-dark-2: #282a2f; /* ansi colors used for actions console and console files */ --color-ansi-black: var(--color-black); --color-ansi-red: var(--color-red); @@ -139,8 +139,8 @@ --color-ansi-bright-cyan: var(--color-teal-light); --color-ansi-bright-white: var(--color-console-fg); /* other colors */ - --color-grey: #374048; - --color-grey-light: #838e98; + --color-grey: #3a4045; + --color-grey-light: #878e94; --color-gold: #b1983b; --color-white: #ffffff; --color-diff-removed-word-bg: #6f3333; @@ -151,7 +151,7 @@ --color-diff-removed-row-border: #634343; --color-diff-moved-row-border: #bcca6f; --color-diff-added-row-border: #314a37; - --color-diff-inactive: #1f2830; + --color-diff-inactive: #22282d; --color-error-border: #a04141; --color-error-bg: #522; --color-error-bg-active: #744; @@ -180,40 +180,40 @@ --color-orange-badge-hover-bg: #f2711c4d; --color-git: #f05133; /* target-based colors */ - --color-body: #1a232b; - --color-box-header: #1b242c; - --color-box-body: #141d25; - --color-box-body-highlight: #182129; - --color-text-dark: #b8c5d1; - --color-text: #adb9c5; - --color-text-light: #99a5b0; - --color-text-light-1: #8d98a3; - --color-text-light-2: #7f8a94; - --color-text-light-3: #717b85; - --color-footer: #161f27; - --color-timeline: #333c44; - --color-input-text: #bbc8d4; - --color-input-background: #121a22; - --color-input-toggle-background: #2c353d; + --color-body: #1d2328; + --color-box-header: #1e2429; + --color-box-body: #171d22; + --color-box-body-highlight: #1b2126; + --color-text-dark: #bdc5cc; + --color-text: #b2b9c0; + --color-text-light: #9ea5ab; + --color-text-light-1: #91989f; + --color-text-light-2: #838a90; + --color-text-light-3: #757b81; + --color-footer: #191f24; + --color-timeline: #363c41; + --color-input-text: #c0c8cf; + --color-input-background: #151a1f; + --color-input-toggle-background: #2f353a; --color-input-border: var(--color-secondary); --color-input-border-hover: var(--color-secondary-dark-1); - --color-header-wrapper: #141d25; + --color-header-wrapper: #171d22; --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; --color-hover: #ffffff19; --color-active: #ffffff24; - --color-menu: #121a22; - --color-card: #121a22; + --color-menu: #151a1f; + --color-card: #151a1f; --color-markup-table-row: #ffffff06; --color-markup-code-block: #ffffff16; - --color-button: #121a22; - --color-code-bg: #141d25; - --color-code-sidebar-bg: #161f27; + --color-button: #151a1f; + --color-code-bg: #171d22; + --color-code-sidebar-bg: #191f24; --color-shadow: #00000058; - --color-secondary-bg: #2b2f39; - --color-expand-button: #3d414c; - --color-placeholder-text: #717b85; + --color-secondary-bg: #2e3036; + --color-expand-button: #404249; + --color-placeholder-text: #757b81; --color-editor-line-highlight: var(--color-primary-light-5); --color-project-board-bg: var(--color-secondary-light-2); --color-project-board-dark-label: #111111; @@ -224,13 +224,13 @@ --color-reaction-active-bg: var(--color-primary-light-5); --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; - --color-nav-bg: #161f27; - --color-nav-hover-bg: #222b33; + --color-nav-bg: #191f24; + --color-nav-hover-bg: #252b30; --color-nav-text: var(--color-text); - --color-label-text: #bbc8d4; - --color-label-bg: #59636c4b; - --color-label-hover-bg: #59636ca0; - --color-label-active-bg: #59636cff; + --color-label-text: #c0c8cf; + --color-label-bg: #5d63684b; + --color-label-hover-bg: #5d6368a0; + --color-label-active-bg: #5d6368ff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #534d1b; From 379ea355585dc8a87ea6acc359483a2f4f3719f1 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 27 Feb 2024 22:02:18 +0100 Subject: [PATCH 3/7] fix --color-secondary-light-3 --- web_src/css/themes/theme-gitea-dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 0a49bb1a99a73..ec586848e79f4 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -46,7 +46,7 @@ --color-secondary-dark-13: #cfd7df; --color-secondary-light-1: #2f353a; --color-secondary-light-2: #252b30; - --color-secondary-light-3: #252b30; + --color-secondary-light-3: #1c2227; --color-secondary-light-4: #161b20; --color-secondary-alpha-10: #3d434819; --color-secondary-alpha-20: #3d434833; From dba8c69438b63a3ed2a333f082f22b3b8fe60638 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 27 Feb 2024 22:11:50 +0100 Subject: [PATCH 4/7] fix --color-secondary-dark-10 --- web_src/css/themes/theme-gitea-dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index ec586848e79f4..463c306c5492d 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -40,7 +40,7 @@ --color-secondary-dark-7: #979ea5; --color-secondary-dark-8: #a4abb1; --color-secondary-dark-9: #acb3ba; - --color-secondary-dark-10: #acb3ba; + --color-secondary-dark-10: #b8bfc6; --color-secondary-dark-11: #c3cbd2; --color-secondary-dark-12: #ccd4dc; --color-secondary-dark-13: #cfd7df; From 740309d10ffdb82ab3b057ff12ed2b670e4fe5f2 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 27 Feb 2024 22:21:12 +0100 Subject: [PATCH 5/7] desaturate secondary colors by 30% --- web_src/css/themes/theme-gitea-dark.css | 142 ++++++++++++------------ 1 file changed, 71 insertions(+), 71 deletions(-) diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 463c306c5492d..7b356342af77b 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: #3d4348; - --color-secondary-dark-1: #444a4f; - --color-secondary-dark-2: #4e5358; - --color-secondary-dark-3: #5d6368; - --color-secondary-dark-4: #70767c; - --color-secondary-dark-5: #7d848a; - --color-secondary-dark-6: #8b9299; - --color-secondary-dark-7: #979ea5; - --color-secondary-dark-8: #a4abb1; - --color-secondary-dark-9: #acb3ba; - --color-secondary-dark-10: #b8bfc6; - --color-secondary-dark-11: #c3cbd2; - --color-secondary-dark-12: #ccd4dc; - --color-secondary-dark-13: #cfd7df; - --color-secondary-light-1: #2f353a; - --color-secondary-light-2: #252b30; - --color-secondary-light-3: #1c2227; - --color-secondary-light-4: #161b20; - --color-secondary-alpha-10: #3d434819; - --color-secondary-alpha-20: #3d434833; - --color-secondary-alpha-30: #3d43484b; - --color-secondary-alpha-40: #3d434866; - --color-secondary-alpha-50: #3d434880; - --color-secondary-alpha-60: #3d434899; - --color-secondary-alpha-70: #3d4348b3; - --color-secondary-alpha-80: #3d4348cc; - --color-secondary-alpha-90: #3d4348e1; + --color-secondary: #3f4346; + --color-secondary-dark-1: #464a4d; + --color-secondary-dark-2: #4f5356; + --color-secondary-dark-3: #5f6366; + --color-secondary-dark-4: #72767a; + --color-secondary-dark-5: #7f8488; + --color-secondary-dark-6: #8d9297; + --color-secondary-dark-7: #999ea3; + --color-secondary-dark-8: #a6abaf; + --color-secondary-dark-9: #aeb3b8; + --color-secondary-dark-10: #babfc4; + --color-secondary-dark-11: #c5cbd0; + --color-secondary-dark-12: #ced4da; + --color-secondary-dark-13: #d1d7dd; + --color-secondary-light-1: #313538; + --color-secondary-light-2: #272b2e; + --color-secondary-light-3: #1e2225; + --color-secondary-light-4: #171b1e; + --color-secondary-alpha-10: #3f434619; + --color-secondary-alpha-20: #3f434633; + --color-secondary-alpha-30: #3f43464b; + --color-secondary-alpha-40: #3f434666; + --color-secondary-alpha-50: #3f434680; + --color-secondary-alpha-60: #3f434699; + --color-secondary-alpha-70: #3f4346b3; + --color-secondary-alpha-80: #3f4346cc; + --color-secondary-alpha-90: #3f4346e1; --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: #ccd4dc; - --color-console-fg-subtle: #7d848a; - --color-console-bg: #1a2025; - --color-console-border: #252b30; + --color-console-fg: #ced4da; + --color-console-fg-subtle: #7f8488; + --color-console-bg: #1c2023; + --color-console-border: #272b2e; --color-console-hover-bg: #ffffff16; - --color-console-active-bg: #2f353a; - --color-console-menu-bg: #252b30; - --color-console-menu-border: #444a4f; + --color-console-active-bg: #313538; + --color-console-menu-bg: #272b2e; + --color-console-menu-border: #464a4d; /* named colors */ --color-red: #cc4848; --color-orange: #cc580c; @@ -81,7 +81,7 @@ --color-purple: #b259d0; --color-pink: #d22e8b; --color-brown: #a47252; - --color-black: #1d2328; + --color-black: #1f2326; /* light variants - produced via Sass scale-color(color, $lightness: +10%) */ --color-red-light: #d15a5a; --color-orange-light: #f6a066; @@ -94,7 +94,7 @@ --color-purple-light: #ba6ad5; --color-pink-light: #d74397; --color-brown-light: #b08061; - --color-black-light: #45484f; + --color-black-light: #46494d; /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ --color-red-dark-1: #c23636; --color-orange-dark-1: #f38236; @@ -107,7 +107,7 @@ --color-purple-dark-1: #a742c9; --color-pink-dark-1: #be297d; --color-brown-dark-1: #94674a; - --color-black-dark-1: #2a2e37; + --color-black-dark-1: #2c2f35; /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ --color-red-dark-2: #ad3030; --color-orange-dark-2: #f16e17; @@ -120,7 +120,7 @@ --color-purple-dark-2: #9834b9; --color-pink-dark-2: #a9246f; --color-brown-dark-2: #835b42; - --color-black-dark-2: #282a2f; + --color-black-dark-2: #292a2e; /* ansi colors used for actions console and console files */ --color-ansi-black: var(--color-black); --color-ansi-red: var(--color-red); @@ -139,8 +139,8 @@ --color-ansi-bright-cyan: var(--color-teal-light); --color-ansi-bright-white: var(--color-console-fg); /* other colors */ - --color-grey: #3a4045; - --color-grey-light: #878e94; + --color-grey: #3c4043; + --color-grey-light: #898e92; --color-gold: #b1983b; --color-white: #ffffff; --color-diff-removed-word-bg: #6f3333; @@ -151,7 +151,7 @@ --color-diff-removed-row-border: #634343; --color-diff-moved-row-border: #bcca6f; --color-diff-added-row-border: #314a37; - --color-diff-inactive: #22282d; + --color-diff-inactive: #24282b; --color-error-border: #a04141; --color-error-bg: #522; --color-error-bg-active: #744; @@ -180,40 +180,40 @@ --color-orange-badge-hover-bg: #f2711c4d; --color-git: #f05133; /* target-based colors */ - --color-body: #1d2328; - --color-box-header: #1e2429; - --color-box-body: #171d22; - --color-box-body-highlight: #1b2126; - --color-text-dark: #bdc5cc; - --color-text: #b2b9c0; - --color-text-light: #9ea5ab; - --color-text-light-1: #91989f; - --color-text-light-2: #838a90; - --color-text-light-3: #757b81; - --color-footer: #191f24; - --color-timeline: #363c41; - --color-input-text: #c0c8cf; - --color-input-background: #151a1f; - --color-input-toggle-background: #2f353a; + --color-body: #1f2326; + --color-box-header: #202427; + --color-box-body: #191d20; + --color-box-body-highlight: #1d2124; + --color-text-dark: #bfc5ca; + --color-text: #b4b9be; + --color-text-light: #a0a5a9; + --color-text-light-1: #93989d; + --color-text-light-2: #858a8e; + --color-text-light-3: #777b7f; + --color-footer: #1b1f22; + --color-timeline: #383c3f; + --color-input-text: #c2c8cd; + --color-input-background: #161a1d; + --color-input-toggle-background: #313538; --color-input-border: var(--color-secondary); --color-input-border-hover: var(--color-secondary-dark-1); - --color-header-wrapper: #171d22; + --color-header-wrapper: #191d20; --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; --color-hover: #ffffff19; --color-active: #ffffff24; - --color-menu: #151a1f; - --color-card: #151a1f; + --color-menu: #161a1d; + --color-card: #161a1d; --color-markup-table-row: #ffffff06; --color-markup-code-block: #ffffff16; - --color-button: #151a1f; - --color-code-bg: #171d22; - --color-code-sidebar-bg: #191f24; + --color-button: #161a1d; + --color-code-bg: #191d20; + --color-code-sidebar-bg: #1b1f22; --color-shadow: #00000058; - --color-secondary-bg: #2e3036; - --color-expand-button: #404249; - --color-placeholder-text: #757b81; + --color-secondary-bg: #2f3135; + --color-expand-button: #414348; + --color-placeholder-text: #777b7f; --color-editor-line-highlight: var(--color-primary-light-5); --color-project-board-bg: var(--color-secondary-light-2); --color-project-board-dark-label: #111111; @@ -224,13 +224,13 @@ --color-reaction-active-bg: var(--color-primary-light-5); --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; - --color-nav-bg: #191f24; - --color-nav-hover-bg: #252b30; + --color-nav-bg: #1b1f22; + --color-nav-hover-bg: #272b2e; --color-nav-text: var(--color-text); - --color-label-text: #c0c8cf; - --color-label-bg: #5d63684b; - --color-label-hover-bg: #5d6368a0; - --color-label-active-bg: #5d6368ff; + --color-label-text: #c2c8cd; + --color-label-bg: #5f63664b; + --color-label-hover-bg: #5f6366a0; + --color-label-active-bg: #5f6366ff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #534d1b; From d426c0bcaaa87bd5af629d3e480b7c83a075781b Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 27 Feb 2024 22:59:25 +0100 Subject: [PATCH 6/7] lighten text colors by 8% --- web_src/css/themes/theme-gitea-dark.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 7b356342af77b..e9d56e8f4bdf6 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -184,15 +184,15 @@ --color-box-header: #202427; --color-box-body: #191d20; --color-box-body-highlight: #1d2124; - --color-text-dark: #bfc5ca; - --color-text: #b4b9be; - --color-text-light: #a0a5a9; - --color-text-light-1: #93989d; - --color-text-light-2: #858a8e; - --color-text-light-3: #777b7f; + --color-text-dark: #c4cace; + --color-text: #babfc3; + --color-text-light: #a8acb0; + --color-text-light-1: #9ca0a5; + --color-text-light-2: #8f9397; + --color-text-light-3: #828689; --color-footer: #1b1f22; --color-timeline: #383c3f; - --color-input-text: #c2c8cd; + --color-input-text: #c7ccd1; --color-input-background: #161a1d; --color-input-toggle-background: #313538; --color-input-border: var(--color-secondary); @@ -227,7 +227,7 @@ --color-nav-bg: #1b1f22; --color-nav-hover-bg: #272b2e; --color-nav-text: var(--color-text); - --color-label-text: #c2c8cd; + --color-label-text: #c7ccd1; --color-label-bg: #5f63664b; --color-label-hover-bg: #5f6366a0; --color-label-active-bg: #5f6366ff; From 2013141f3b989dee99f53dc769da768bd95323b5 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 27 Feb 2024 23:03:25 +0100 Subject: [PATCH 7/7] tweak labels specifically --- web_src/css/themes/theme-gitea-dark.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index e9d56e8f4bdf6..9cc2a656cb244 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -227,10 +227,10 @@ --color-nav-bg: #1b1f22; --color-nav-hover-bg: #272b2e; --color-nav-text: var(--color-text); - --color-label-text: #c7ccd1; - --color-label-bg: #5f63664b; - --color-label-hover-bg: #5f6366a0; - --color-label-active-bg: #5f6366ff; + --color-label-text: #ced2d7; + --color-label-bg: #7a7f834b; + --color-label-hover-bg: #7a7f83a0; + --color-label-active-bg: #7a7f83ff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #534d1b;