Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Lighten text colors on dark theme for increased contrast (#29481)

Browse source 
Improve contrast by lightening the text colors in dark theme by around
35%. Additionally, share some variables that had the same or similar
color, which will ease future theme creation.

(cherry picked from commit e94e2fb6c5484070d56977644213d735df9e0c10)
This commit is contained in:
silverwind 2024-02-29 06:11:11 +01:00 committed by Earl Warren
parent 9fc93e61f9
commit 4127fcd608
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
2 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
web_src/css/themes/theme-gitea-dark.css
View file

@ -61,8 +61,8 @@
--color-secondary-hover: var(--color-secondary-dark-3); --color-secondary-hover: var(--color-secondary-dark-3);
--color-secondary-active: var(--color-secondary-dark-2); --color-secondary-active: var(--color-secondary-dark-2);
/* console colors - used for actions console and console files */ /* console colors - used for actions console and console files */
--color-console-fg: #ced4da; --color-console-fg: #d9dde2;
--color-console-fg-subtle: #7f8488; --color-console-fg-subtle: #95989c;
--color-console-bg: #1c2023; --color-console-bg: #1c2023;
--color-console-border: #272b2e; --color-console-border: #272b2e;
--color-console-hover-bg: #ffffff16; --color-console-hover-bg: #ffffff16;
@ -184,15 +184,15 @@
--color-box-header: #202427; --color-box-header: #202427;
--color-box-body: #191d20; --color-box-body: #191d20;
--color-box-body-highlight: #1d2124; --color-box-body-highlight: #1d2124;
--color-text-dark: #c4cace; --color-text-dark: #f8f8f9;
--color-text: #babfc3; --color-text: #ced2d5;
--color-text-light: #a8acb0; --color-text-light: #bec4c8;
--color-text-light-1: #9ca0a5; --color-text-light-1: #acb3b8;
--color-text-light-2: #8f9397; --color-text-light-2: #8d969c;
--color-text-light-3: #828689; --color-text-light-3: #747f87;
--color-footer: #1b1f22; --color-footer: var(--color-nav-bg);
--color-timeline: #383c3f; --color-timeline: #383c3f;
--color-input-text: #c7ccd1; --color-input-text: var(--color-text-dark);
--color-input-background: #161a1d; --color-input-background: #161a1d;
--color-input-toggle-background: #313538; --color-input-toggle-background: #313538;
--color-input-border: var(--color-secondary); --color-input-border: var(--color-secondary);
@ -213,7 +213,7 @@
--color-shadow: #00000058; --color-shadow: #00000058;
--color-secondary-bg: #2f3135; --color-secondary-bg: #2f3135;
--color-expand-button: #414348; --color-expand-button: #414348;
--color-placeholder-text: #777b7f; --color-placeholder-text: var(--color-text-light-3);
--color-editor-line-highlight: var(--color-primary-light-5); --color-editor-line-highlight: var(--color-primary-light-5);
--color-project-board-bg: var(--color-secondary-light-2); --color-project-board-bg: var(--color-secondary-light-2);
--color-project-board-dark-label: #111111; --color-project-board-dark-label: #111111;
@ -227,7 +227,7 @@
--color-nav-bg: #1b1f22; --color-nav-bg: #1b1f22;
--color-nav-hover-bg: #272b2e; --color-nav-hover-bg: #272b2e;
--color-nav-text: var(--color-text); --color-nav-text: var(--color-text);
--color-label-text: #ced2d7; --color-label-text: var(--color-text);
--color-label-bg: #7a7f834b; --color-label-bg: #7a7f834b;
--color-label-hover-bg: #7a7f83a0; --color-label-hover-bg: #7a7f83a0;
--color-label-active-bg: #7a7f83ff; --color-label-active-bg: #7a7f83ff;

8
web_src/css/themes/theme-gitea-light.css
View file

@ -190,9 +190,9 @@
--color-text-light-1: #6a6a6a; --color-text-light-1: #6a6a6a;
--color-text-light-2: #808080; --color-text-light-2: #808080;
--color-text-light-3: #a0a0a0; --color-text-light-3: #a0a0a0;
--color-footer: #ffffff; --color-footer: var(--color-nav-bg);
--color-timeline: #ececec; --color-timeline: #ececec;
--color-input-text: #212121; --color-input-text: var(--color-text-dark);
--color-input-background: #fafafa; --color-input-background: #fafafa;
--color-input-toggle-background: #dedede; --color-input-toggle-background: #dedede;
--color-input-border: var(--color-secondary); --color-input-border: var(--color-secondary);
@ -213,7 +213,7 @@
--color-shadow: #00000026; --color-shadow: #00000026;
--color-secondary-bg: #f4f4f4; --color-secondary-bg: #f4f4f4;
--color-expand-button: #d8efff; --color-expand-button: #d8efff;
--color-placeholder-text: #aaa; --color-placeholder-text: var(--color-text-light-3);
--color-editor-line-highlight: var(--color-primary-light-6); --color-editor-line-highlight: var(--color-primary-light-6);
--color-project-board-bg: var(--color-secondary-light-4); --color-project-board-bg: var(--color-secondary-light-4);
--color-project-board-dark-label: #111111; --color-project-board-dark-label: #111111;
@ -227,7 +227,7 @@
--color-nav-bg: #ffffff; --color-nav-bg: #ffffff;
--color-nav-hover-bg: #ebebeb; --color-nav-hover-bg: #ebebeb;
--color-nav-text: var(--color-text); --color-nav-text: var(--color-text);
--color-label-text: #232323; --color-label-text: var(--color-text);
--color-label-bg: #cacaca5b; --color-label-bg: #cacaca5b;
--color-label-hover-bg: #cacacaa0; --color-label-hover-bg: #cacacaa0;
--color-label-active-bg: #cacacaff; --color-label-active-bg: #cacacaff;