image/gitea
1
0 Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-11-11 19:39:02 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
gitea/web_src/css/themes/theme-gitea-light.css
T
silverwindandLunny Xiao bd8fd71bc1 enhance(theme): derive theme colors with color-mix and unify shades (#40113) 
Derive theme colors from a few base colors with `color-mix(in srgb, …)`
and make the colorful palette coherent, so custom themes that import a
Gitea theme can override a base color and get matching shades.

- Every `-light`, `-dark-1` and `-dark-2` shade follows one rule for all
hues, fixing dark orange shades copied from the light theme, black
shades that barely moved and neon tints
- Base colors move at most 4 OKLab units toward a common lightness, the
median in dark and red in light, yellow stays unchanged
- Text, secondary, console, message, surface and alpha colors derive
from their own base, alpha variants now match their names
- Added and removed diff colors share one lightness per level in all
themes, including colorblind ones
- Chart.js and the external render iframe resolve `color-mix()` values
to hex through `getComputedStyle`
- Remove unused `secondary-dark-12`, `-13`, `shadow-opaque` and
`workflow-edge-hover`

Fixes: https://github.com/go-gitea/gitea/issues/30160

<img width="880" alt="Components with the largest color changes, dark
and light, before and after"
src="https://github.com/user-attachments/assets/a9d27636-e3bb-46fa-a3ac-3fec33fd9806"
/>
<img width="880" alt="All theme colors per family, before and after,
unchanged ones dimmed"
src="https://github.com/user-attachments/assets/9977dde3-0749-4926-b110-18c0dc31d632"
/>

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2026-11-07 23:39:15 +00:00

307 lines
17 KiB
CSS
Raw Permalink Blame History

gitea-theme-meta-info {
--theme-display-name: "Light";
--theme-color-scheme: "light";
}
:root {
--is-dark-theme: false;
--color-primary: #4183c4;
--color-primary-contrast: #ffffff;
--color-primary-dark-1: color-mix(in srgb, var(--color-primary) 90%, black);
--color-primary-dark-2: color-mix(in srgb, var(--color-primary) 80%, black);
--color-primary-dark-3: color-mix(in srgb, var(--color-primary) 70%, black);
--color-primary-dark-4: color-mix(in srgb, var(--color-primary) 60%, black);
--color-primary-dark-5: color-mix(in srgb, var(--color-primary) 40%, black);
--color-primary-dark-6: color-mix(in srgb, var(--color-primary) 20%, black);
--color-primary-dark-7: color-mix(in srgb, var(--color-primary) 6%, black);
--color-primary-light-1: color-mix(in srgb, var(--color-primary) 90%, white);
--color-primary-light-2: color-mix(in srgb, var(--color-primary) 80%, white);
--color-primary-light-3: color-mix(in srgb, var(--color-primary) 70%, white);
--color-primary-light-4: color-mix(in srgb, var(--color-primary) 60%, white);
--color-primary-light-5: color-mix(in srgb, var(--color-primary) 40%, white);
--color-primary-light-6: color-mix(in srgb, var(--color-primary) 20%, white);
--color-primary-light-7: color-mix(in srgb, var(--color-primary) 6%, white);
--color-primary-alpha-10: color-mix(in srgb, var(--color-primary) 10%, transparent);
--color-primary-alpha-20: color-mix(in srgb, var(--color-primary) 20%, transparent);
--color-primary-alpha-30: color-mix(in srgb, var(--color-primary) 30%, transparent);
--color-primary-alpha-40: color-mix(in srgb, var(--color-primary) 40%, transparent);
--color-primary-alpha-50: color-mix(in srgb, var(--color-primary) 50%, transparent);
--color-primary-alpha-60: color-mix(in srgb, var(--color-primary) 60%, transparent);
--color-primary-alpha-70: color-mix(in srgb, var(--color-primary) 70%, transparent);
--color-primary-alpha-80: color-mix(in srgb, var(--color-primary) 80%, transparent);
--color-primary-alpha-90: color-mix(in srgb, var(--color-primary) 90%, transparent);
--color-primary-hover: var(--color-primary-dark-1);
--color-primary-active: var(--color-primary-dark-2);
--color-secondary: #d0d7de;
--color-secondary-dark-1: color-mix(in srgb, var(--color-secondary) 96%, var(--color-text-dark));
--color-secondary-dark-2: color-mix(in srgb, var(--color-secondary) 89%, var(--color-text-dark));
--color-secondary-dark-3: color-mix(in srgb, var(--color-secondary) 74%, var(--color-text-dark));
--color-secondary-dark-4: color-mix(in srgb, var(--color-secondary) 66%, var(--color-text-dark));
--color-secondary-dark-5: color-mix(in srgb, var(--color-secondary) 59%, var(--color-text-dark));
--color-secondary-dark-6: color-mix(in srgb, var(--color-secondary) 51%, var(--color-text-dark));
--color-secondary-dark-7: color-mix(in srgb, var(--color-secondary) 44%, var(--color-text-dark));
--color-secondary-dark-8: color-mix(in srgb, var(--color-secondary) 36%, var(--color-text-dark));
--color-secondary-dark-9: color-mix(in srgb, var(--color-secondary) 29%, var(--color-text-dark));
--color-secondary-dark-10: color-mix(in srgb, var(--color-secondary) 22%, var(--color-text-dark));
--color-secondary-dark-11: color-mix(in srgb, var(--color-secondary) 15%, var(--color-text-dark));
--color-secondary-light-1: color-mix(in srgb, var(--color-secondary) 65%, white);
--color-secondary-light-2: color-mix(in srgb, var(--color-secondary) 53%, white);
--color-secondary-light-3: color-mix(in srgb, var(--color-secondary) 34%, white);
--color-secondary-light-4: color-mix(in srgb, var(--color-secondary) 19%, white);
--color-secondary-alpha-10: color-mix(in srgb, var(--color-secondary) 10%, transparent);
--color-secondary-alpha-20: color-mix(in srgb, var(--color-secondary) 20%, transparent);
--color-secondary-alpha-30: color-mix(in srgb, var(--color-secondary) 30%, transparent);
--color-secondary-alpha-40: color-mix(in srgb, var(--color-secondary) 40%, transparent);
--color-secondary-alpha-50: color-mix(in srgb, var(--color-secondary) 50%, transparent);
--color-secondary-alpha-60: color-mix(in srgb, var(--color-secondary) 60%, transparent);
--color-secondary-alpha-70: color-mix(in srgb, var(--color-secondary) 70%, transparent);
--color-secondary-alpha-80: color-mix(in srgb, var(--color-secondary) 80%, transparent);
--color-secondary-alpha-90: color-mix(in srgb, var(--color-secondary) 90%, transparent);
--color-secondary-button: var(--color-secondary-dark-4);
--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: #0d1117;
--color-console-fg-subtle: color-mix(in srgb, var(--color-console-fg) 78%, var(--color-console-bg));
--color-console-bg: #ffffff;
--color-console-hover-bg: color-mix(in srgb, var(--color-secondary) 30%, white);
--color-console-active-bg: color-mix(in srgb, var(--color-console-fg) 17%, var(--color-console-bg));
--color-console-link: color-mix(in srgb, var(--color-console-fg) 65%, var(--color-console-bg));
/* named colors */
--color-red: #db2828;
--color-orange: #e36501;
--color-yellow: #fbbd08;
--color-olive: #a9bf04;
--color-green: #01ad39;
--color-teal: #01a7a0;
--color-blue: #167ec9;
--color-violet: #6f43d7;
--color-purple: #ab3cd0;
--color-pink: #d2288b;
--color-brown: #a66840;
--color-black: #1d2328;
/* light variants - produced via Sass scale-color(color, $lightness: +25%) */
--color-red-light: color-mix(in srgb, var(--color-red) 71%, white);
--color-orange-light: color-mix(in srgb, var(--color-orange) 75%, white);
--color-yellow-light: color-mix(in srgb, var(--color-yellow) 75%, white);
--color-olive-light: color-mix(in srgb, var(--color-olive) 77%, white);
--color-green-light: color-mix(in srgb, var(--color-green) 74%, white);
--color-teal-light: color-mix(in srgb, var(--color-teal) 75%, white);
--color-blue-light: color-mix(in srgb, var(--color-blue) 77%, white);
--color-violet-light: color-mix(in srgb, var(--color-violet) 77%, white);
--color-purple-light: color-mix(in srgb, var(--color-purple) 76%, white);
--color-pink-light: color-mix(in srgb, var(--color-pink) 73%, white);
--color-brown-light: color-mix(in srgb, var(--color-brown) 79%, white);
--color-black-light: color-mix(in srgb, var(--color-black) 82%, white);
/* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
--color-red-dark-1: color-mix(in srgb, var(--color-red) 89%, black);
--color-orange-dark-1: color-mix(in srgb, var(--color-orange) 91%, black);
--color-yellow-dark-1: color-mix(in srgb, var(--color-yellow) 93%, black);
--color-olive-dark-1: color-mix(in srgb, var(--color-olive) 92%, black);
--color-green-dark-1: color-mix(in srgb, var(--color-green) 91%, black);
--color-teal-dark-1: color-mix(in srgb, var(--color-teal) 91%, black);
--color-blue-dark-1: color-mix(in srgb, var(--color-blue) 89%, black);
--color-violet-dark-1: color-mix(in srgb, var(--color-violet) 88%, black);
--color-purple-dark-1: color-mix(in srgb, var(--color-purple) 89%, black);
--color-pink-dark-1: color-mix(in srgb, var(--color-pink) 90%, black);
--color-brown-dark-1: color-mix(in srgb, var(--color-brown) 89%, black);
--color-black-dark-1: color-mix(in srgb, var(--color-black) 69%, black);
/* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
--color-red-dark-2: color-mix(in srgb, var(--color-red) 79%, black);
--color-orange-dark-2: color-mix(in srgb, var(--color-orange) 82%, black);
--color-yellow-dark-2: color-mix(in srgb, var(--color-yellow) 86%, black);
--color-olive-dark-2: color-mix(in srgb, var(--color-olive) 84%, black);
--color-green-dark-2: color-mix(in srgb, var(--color-green) 82%, black);
--color-teal-dark-2: color-mix(in srgb, var(--color-teal) 82%, black);
--color-blue-dark-2: color-mix(in srgb, var(--color-blue) 79%, black);
--color-violet-dark-2: color-mix(in srgb, var(--color-violet) 76%, black);
--color-purple-dark-2: color-mix(in srgb, var(--color-purple) 79%, black);
--color-pink-dark-2: color-mix(in srgb, var(--color-pink) 79%, black);
--color-brown-dark-2: color-mix(in srgb, var(--color-brown) 79%, black);
--color-black-dark-2: color-mix(in srgb, var(--color-black) 40%, black);
/* ansi colors used for actions console and console files */
--color-ansi-black: #1e2327;
--color-ansi-red: #cc4848;
--color-ansi-green: #87ab63;
--color-ansi-yellow: #cc9903;
--color-ansi-blue: #3a8ac6;
--color-ansi-magenta: #d22e8b;
--color-ansi-cyan: #00918a;
--color-ansi-white: var(--color-console-fg-subtle);
--color-ansi-bright-black: color-mix(in srgb, var(--color-ansi-black) 83%, white);
--color-ansi-bright-red: color-mix(in srgb, var(--color-ansi-red) 90%, white);
--color-ansi-bright-green: color-mix(in srgb, var(--color-ansi-green) 90%, white);
--color-ansi-bright-yellow: #eaaf03;
--color-ansi-bright-blue: color-mix(in srgb, var(--color-ansi-blue) 90%, white);
--color-ansi-bright-magenta: color-mix(in srgb, var(--color-ansi-magenta) 90%, white);
--color-ansi-bright-cyan: #00b6ad;
--color-ansi-bright-white: var(--color-console-fg);
/* 16-color series */
--color-series-16-0: #7db233;
--color-series-16-1: #499a37;
--color-series-16-2: #ce4751;
--color-series-16-3: #8f9121;
--color-series-16-4: #ac32a6;
--color-series-16-5: #7445e9;
--color-series-16-6: #c67d28;
--color-series-16-7: #4db392;
--color-series-16-8: #aa4d30;
--color-series-16-9: #2a6f84;
--color-series-16-10: #c45327;
--color-series-16-11: #3d965c;
--color-series-16-12: #792a93;
--color-series-16-13: #439d73;
--color-series-16-14: #103aad;
--color-series-16-15: #982e85;
/* other colors */
--color-grey: color-mix(in srgb, var(--color-secondary) 51%, var(--color-text-dark));
--color-grey-light: color-mix(in srgb, var(--color-secondary) 60%, var(--color-text-dark));
--color-gold: #a1882b;
--color-white: #ffffff;
--color-diff-added-fg: #217938;
--color-diff-added-linenum-bg: #aceebb;
--color-diff-added-row-bg: #dafbe1;
--color-diff-added-row-border: #e6ffed;
--color-diff-added-word-bg: #aceebb;
--color-diff-moved-row-bg: #f1f8d1;
--color-diff-moved-row-border: #d0e27f;
--color-diff-removed-fg: #be1124;
--color-diff-removed-linenum-bg: #ffcecb;
--color-diff-removed-row-bg: #ffebe9;
--color-diff-removed-row-border: #f1c0c0;
--color-diff-removed-word-bg: #ffcecb;
--color-diff-inactive: color-mix(in srgb, var(--color-secondary) 32%, white);
--color-error-border: #ff818266;
--color-error-bg: #ffebe9;
--color-error-bg-active: #ffcecb;
--color-error-bg-hover: #ffdcd7;
--color-error-text: #d1242f;
--color-success-border: #4ac26b66;
--color-success-bg: #dafbe1;
--color-success-text: #1a7f37;
--color-warning-border: #d4a72c66;
--color-warning-bg: #fff8c5;
--color-warning-text: #9a6700;
--color-info-border: #54aeff66;
--color-info-bg: #ddf4ff;
--color-info-text: #0969da;
--color-priority-border: #b9a1ff66;
--color-priority-bg: #f3e7ff;
--color-priority-text: #8250df;
--color-red-badge: #db2828;
--color-red-badge-bg: color-mix(in srgb, var(--color-red-badge) 10%, transparent);
--color-red-badge-hover-bg: color-mix(in srgb, var(--color-red-badge) 30%, transparent);
--color-green-badge: #21ba45;
--color-green-badge-bg: color-mix(in srgb, var(--color-green-badge) 10%, transparent);
--color-green-badge-hover-bg: color-mix(in srgb, var(--color-green-badge) 30%, transparent);
--color-yellow-badge: #fbbd08;
--color-yellow-badge-bg: color-mix(in srgb, var(--color-yellow-badge) 10%, transparent);
--color-yellow-badge-hover-bg: color-mix(in srgb, var(--color-yellow-badge) 30%, transparent);
--color-orange-badge: #f2711c;
--color-orange-badge-bg: color-mix(in srgb, var(--color-orange-badge) 10%, transparent);
--color-orange-badge-hover-bg: color-mix(in srgb, var(--color-orange-badge) 30%, transparent);
--color-git: #f05133;
--color-logo: #609926;
/* target-based colors */
--color-body: #ffffff;
--color-box-header: color-mix(in srgb, var(--color-secondary) 30%, white);
--color-box-body: #ffffff;
--color-box-body-highlight: color-mix(in srgb, var(--color-primary) 9%, var(--color-body));
--color-text-dark: #01050a;
--color-text: color-mix(in srgb, var(--color-text-dark) 89%, var(--color-secondary));
--color-text-light: color-mix(in srgb, var(--color-text-dark) 77%, var(--color-secondary));
--color-text-light-1: color-mix(in srgb, var(--color-text-dark) 69%, var(--color-secondary));
--color-text-light-2: color-mix(in srgb, var(--color-text-dark) 56%, var(--color-secondary));
--color-text-light-3: color-mix(in srgb, var(--color-text-dark) 44%, var(--color-secondary));
--color-footer: var(--color-nav-bg);
--color-timeline: #d0d7de;
--color-input-text: var(--color-text-dark);
--color-input-background: #fff;
--color-input-toggle-background: #d0d7de;
--color-input-border: var(--color-secondary-dark-1);
--color-light: #00001706;
--color-light-border: #0000171d;
--color-hover: #00001708;
--color-hover-opaque: color-mix(in srgb, var(--color-secondary) 30%, white);
--color-active: #00001714;
--color-menu: color-mix(in srgb, var(--color-secondary) 14%, white);
--color-card: color-mix(in srgb, var(--color-secondary) 14%, white);
--color-markup-table-row: #0030600a;
--color-markup-code-block: #00306010;
--color-markup-code-inline: #00306012;
--color-button: color-mix(in srgb, var(--color-secondary) 14%, white);
--color-code-bg: color-mix(in srgb, var(--color-secondary) 6%, var(--color-body));
--color-shadow: #00001726;
--color-secondary-bg: color-mix(in srgb, var(--color-secondary) 25%, white);
--color-expand-button: #cfe8fa;
--color-placeholder-text: var(--color-text-light-3);
--color-editor-line-highlight: var(--color-secondary-alpha-30);
--color-editor-selection: var(--color-primary-alpha-30);
--color-project-column-bg: var(--color-secondary-light-4);
--color-caret: var(--color-text-dark);
--color-reaction-bg: #0000170a;
--color-reaction-hover-bg: var(--color-primary-light-5);
--color-reaction-active-bg: var(--color-primary-light-6);
--color-tooltip-text: #fbfdff;
--color-tooltip-bg: color-mix(in srgb, var(--color-text-dark) 83%, var(--color-secondary));
--color-nav-bg: color-mix(in srgb, var(--color-secondary) 18%, white);
--color-nav-hover-bg: var(--color-secondary-light-1);
--color-nav-text: var(--color-text);
--color-secondary-nav-bg: color-mix(in srgb, var(--color-secondary) 13%, white);
--color-label-text: var(--color-text);
--color-label-bg: color-mix(in srgb, var(--color-label-active-bg) 30%, transparent);
--color-label-hover-bg: color-mix(in srgb, var(--color-label-active-bg) 63%, transparent);
--color-label-active-bg: #949da6ff;
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-6);
--color-highlight-fg: #eed200;
--color-highlight-bg: #f5efc5;
--color-overlay-backdrop: #080808c0;
--color-danger: var(--color-red);
--color-transparency-grid-light: #fafafa;
--color-transparency-grid-dark: #e2e2e2;
--color-syntax-keyword: #a73a00;
--color-syntax-bool: #076872;
--color-syntax-control: #7d5700;
--color-syntax-name: #785900;
--color-syntax-type: #ae2368;
--color-syntax-number: #105ead;
--color-syntax-operator: #a73a00;
--color-syntax-regexp: #773dc5;
--color-syntax-string: #456800;
--color-syntax-comment: #506070;
--color-syntax-invalid: #c00000;
--color-syntax-link: var(--color-primary);
--color-syntax-tag: #a73a00;
--color-syntax-attribute: #6f41c5;
--color-syntax-property: #2060a0;
--color-syntax-variable: #944a00;
--color-syntax-string-special: #7d5700;
--color-syntax-escape: #785900;
--color-syntax-entity: #6f41c5;
--color-syntax-preproc: #2d6a4b;
--color-syntax-preproc-file: #105ead;
--color-syntax-decorator: #2d6a4b;
--color-syntax-namespace: #555555;
--color-syntax-name-pseudo: #6f41c5;
--color-syntax-comment-special: #773dc5;
--color-syntax-text: inherit;
--color-syntax-text-alt: #47525b;
--color-syntax-punctuation: inherit;
--color-syntax-whitespace: color-mix(in srgb, var(--color-syntax-namespace) 40%, white);
--color-syntax-diff-fg: #000000;
--color-syntax-deleted-bg: #ffdddd;
--color-syntax-inserted-bg: #ddffdd;
--color-syntax-emph: #8b5000;
--color-syntax-strong: inherit;
--color-syntax-heading: #7d5700;
--color-syntax-subheading: #456800;
--color-syntax-output: #506070;
--color-syntax-prompt: #944a00;
--color-syntax-traceback: #c00000;
--color-syntax-matching-bracket-bg: color-mix(in srgb, var(--color-teal) 22%, transparent);
--color-syntax-nonmatching-bracket-bg: color-mix(in srgb, var(--color-red) 22%, transparent);
accent-color: var(--color-accent);
color-scheme: light;
}
Reference in new issue View Git Blame Copy Permalink