Skip to content

Commit e94e2fb

Browse files
authored
Lighten text colors on dark theme for increased contrast (#29481)
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.
1 parent a6fd017 commit e94e2fb

File tree

2 files changed

+16
-16
lines changed

2 files changed

+16
-16
lines changed

web_src/css/themes/theme-gitea-dark.css

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@
6161
--color-secondary-hover: var(--color-secondary-dark-3);
6262
--color-secondary-active: var(--color-secondary-dark-2);
6363
/* console colors - used for actions console and console files */
64-
--color-console-fg: #ced4da;
65-
--color-console-fg-subtle: #7f8488;
64+
--color-console-fg: #d9dde2;
65+
--color-console-fg-subtle: #95989c;
6666
--color-console-bg: #1c2023;
6767
--color-console-border: #272b2e;
6868
--color-console-hover-bg: #ffffff16;
@@ -184,15 +184,15 @@
184184
--color-box-header: #202427;
185185
--color-box-body: #191d20;
186186
--color-box-body-highlight: #1d2124;
187-
--color-text-dark: #c4cace;
188-
--color-text: #babfc3;
189-
--color-text-light: #a8acb0;
190-
--color-text-light-1: #9ca0a5;
191-
--color-text-light-2: #8f9397;
192-
--color-text-light-3: #828689;
193-
--color-footer: #1b1f22;
187+
--color-text-dark: #f8f8f9;
188+
--color-text: #ced2d5;
189+
--color-text-light: #bec4c8;
190+
--color-text-light-1: #acb3b8;
191+
--color-text-light-2: #8d969c;
192+
--color-text-light-3: #747f87;
193+
--color-footer: var(--color-nav-bg);
194194
--color-timeline: #383c3f;
195-
--color-input-text: #c7ccd1;
195+
--color-input-text: var(--color-text-dark);
196196
--color-input-background: #161a1d;
197197
--color-input-toggle-background: #313538;
198198
--color-input-border: var(--color-secondary);
@@ -213,7 +213,7 @@
213213
--color-shadow: #00000058;
214214
--color-secondary-bg: #2f3135;
215215
--color-expand-button: #414348;
216-
--color-placeholder-text: #777b7f;
216+
--color-placeholder-text: var(--color-text-light-3);
217217
--color-editor-line-highlight: var(--color-primary-light-5);
218218
--color-project-board-bg: var(--color-secondary-light-2);
219219
--color-project-board-dark-label: #111111;
@@ -227,7 +227,7 @@
227227
--color-nav-bg: #1b1f22;
228228
--color-nav-hover-bg: #272b2e;
229229
--color-nav-text: var(--color-text);
230-
--color-label-text: #ced2d7;
230+
--color-label-text: var(--color-text);
231231
--color-label-bg: #7a7f834b;
232232
--color-label-hover-bg: #7a7f83a0;
233233
--color-label-active-bg: #7a7f83ff;

web_src/css/themes/theme-gitea-light.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -190,9 +190,9 @@
190190
--color-text-light-1: #6a6a6a;
191191
--color-text-light-2: #808080;
192192
--color-text-light-3: #a0a0a0;
193-
--color-footer: #ffffff;
193+
--color-footer: var(--color-nav-bg);
194194
--color-timeline: #ececec;
195-
--color-input-text: #212121;
195+
--color-input-text: var(--color-text-dark);
196196
--color-input-background: #fafafa;
197197
--color-input-toggle-background: #dedede;
198198
--color-input-border: var(--color-secondary);
@@ -213,7 +213,7 @@
213213
--color-shadow: #00000026;
214214
--color-secondary-bg: #f4f4f4;
215215
--color-expand-button: #d8efff;
216-
--color-placeholder-text: #aaa;
216+
--color-placeholder-text: var(--color-text-light-3);
217217
--color-editor-line-highlight: var(--color-primary-light-6);
218218
--color-project-board-bg: var(--color-secondary-light-4);
219219
--color-project-board-dark-label: #111111;
@@ -227,7 +227,7 @@
227227
--color-nav-bg: #ffffff;
228228
--color-nav-hover-bg: #ebebeb;
229229
--color-nav-text: var(--color-text);
230-
--color-label-text: #232323;
230+
--color-label-text: var(--color-text);
231231
--color-label-bg: #cacaca5b;
232232
--color-label-hover-bg: #cacacaa0;
233233
--color-label-active-bg: #cacacaff;

0 commit comments

Comments
 (0)