[BRANDING] Add Forgejo light, dark, and auto themes

(cherry picked from commit faab0c670e22588bc643d71b650560c2ccca2c8e)
(cherry picked from commit b6d59493c7fa0bfa62095abb99c5c5a29bcf1659)
(cherry picked from commit 837da0c1f41b40853eb4aebc40af16433cf7a9c2)
(cherry picked from commit 71ad245e1d6f7f5b002c1c5e9831e872d157f906)
(cherry picked from commit 85a7032f1b1c0d80e3d3960e9d902e9e66e687a5)

Conflicts:
	web_src/css/themes/theme-forgejo-auto.less
	web_src/css/themes/theme-forgejo-dark.less
	web_src/css/themes/theme-forgejo-light.less
	web_src/less/_home.less
        see https://codeberg.org/forgejo/forgejo/pulls/552
(cherry picked from commit 0c2c131bb06024fca7d5c8ef6a2696d5f6aa4a1b)

[BRANDING] Add Forgejo light, dark, and auto themes: fix import

Closes: https://codeberg.org/forgejo/forgejo/issues/562
(cherry picked from commit 2b0dc1f80ff18d1c94df74c77a80e3651e7cb2ed)
(cherry picked from commit 494ad6a3b7cd3328c835e6c7c76a55a77d47a60d)
(cherry picked from commit 6940fc22c4917e86b25cf3c6c2ead9057ae726d4)
(cherry picked from commit bd6f00656c457339ef3d08612911594358a15f14)
(cherry picked from commit ebb506a1247751b1182348b281089dc00a65c741)
(cherry picked from commit 43d72d37811c8b9d00b1d046341401643f66b289)
(cherry picked from commit 1a87adca018545f6d2db0dad9e5d7cb59f6a97b8)
(cherry picked from commit 0704c410b4e8a0b610e82f6ebe9209fb485ee722)
(cherry picked from commit 9039b47c160e7fce2bd75167a0358eb7e7458e2d)
(cherry picked from commit e32bb7892481a80156163dbf5063da0c8ead27d4)
(cherry picked from commit 053ad84f91f994f96f4d9d037ff37e25b468c424)
(cherry picked from commit a35f1b6da7a061a3d0717548d8f4e0972e7bb0ec)
(cherry picked from commit 7709d6a67b51c19e154cd229e64e07ac2a2cb3c4)
(cherry picked from commit 76aec99cdd35ea2bb07d08b80f6c7447a35cfc5b)
(cherry picked from commit 76089f3482181b5878815019ce9ac0538bbf58f7)
(cherry picked from commit bac925c76bcd3ce5a9c23991f942667c50840c62)
(cherry picked from commit 8fcf1c608ed028a6dc02feb8b2292d9c80fd0463)
This commit is contained in:
Caesar Schinas 2022-12-25 01:44:04 -10:00 committed by Earl Warren
parent 908bd558c3
commit c114933045
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
5 changed files with 536 additions and 4 deletions

View file

@ -76,8 +76,8 @@ var UI = struct {
CodeCommentLines: 4,
ReactionMaxUserNum: 10,
MaxDisplayFileSize: 8388608,
DefaultTheme: `auto`,
Themes: []string{`auto`, `gitea`, `arc-green`},
DefaultTheme: `forgejo-auto`,
Themes: []string{`forgejo-auto`, `forgejo-light`, `forgejo-dark`, `auto`, `gitea`, `arc-green`},
Reactions: []string{`+1`, `-1`, `laugh`, `hooray`, `confused`, `heart`, `rocket`, `eyes`},
CustomEmojis: []string{`git`, `gitea`, `codeberg`, `gitlab`, `github`, `gogs`, `forgejo`},
CustomEmojisMap: map[string]string{"git": ":git:", "gitea": ":gitea:", "codeberg": ":codeberg:", "gitlab": ":gitlab:", "github": ":github:", "gogs": ":gogs:", "forgejo": ":forgejo:"},

View file

@ -21,7 +21,7 @@
}
.home .hero .svg {
color: var(--color-green);
color: var(--color-primary);
height: 40px;
width: 50px;
vertical-align: bottom;
@ -40,7 +40,7 @@
}
.home a {
color: var(--color-green);
color: var(--color-primary);
}
.page-footer {

View file

@ -0,0 +1,2 @@
@import "theme-forgejo-light.css";
@import "theme-forgejo-dark.css" (prefers-color-scheme: dark);

View file

@ -0,0 +1,279 @@
@import "../chroma/dark.css";
@import "../codemirror/dark.css";
:root {
--steel-900: #10161D;
--steel-850: #131A21;
--steel-800: #171E26;
--steel-750: #1D262F;
--steel-700: #242D38;
--steel-650: #2B3642;
--steel-600: #374351;
--steel-550: #445161;
--steel-500: #515F70;
--steel-450: #5F6E80;
--steel-400: #6D7D8F;
--steel-350: #7C8C9F;
--steel-300: #8C9CAF;
--steel-250: #9DADC0;
--steel-200: #AEBED0;
--steel-150: #C0CFE0;
--steel-100: #D2E0F0;
--is-dark-theme: true;
--color-primary: #fb923c;
--color-primary-contrast: #000;
--color-primary-dark-1: #fdba74;
--color-primary-dark-2: #fdba74;
--color-primary-dark-3: #fed7aa;
--color-primary-dark-4: #fed7aa;
--color-primary-dark-5: #ffedd5;
--color-primary-dark-6: #ffedd5;
--color-primary-dark-7: #fff7ed;
--color-primary-light-1: #f97316;
--color-primary-light-2: #ea580c;
--color-primary-light-3: #c2410c;
--color-primary-light-4: #9a3412;
--color-primary-light-5: #9a3412;
--color-primary-light-6: #7c2d12;
--color-primary-light-7: #7c2d12;
--color-primary-alpha-10: #ea580c19;
--color-primary-alpha-20: #ea580c33;
--color-primary-alpha-30: #ea580c4b;
--color-primary-alpha-40: #ea580c66;
--color-primary-alpha-50: #ea580c80;
--color-primary-alpha-60: #ea580c99;
--color-primary-alpha-70: #ea580cb3;
--color-primary-alpha-80: #ea580ccc;
--color-primary-alpha-90: #ea580ce1;
--color-secondary: var(--steel-700);
--color-secondary-dark-1: var(--steel-550);
--color-secondary-dark-2: var(--steel-500);
--color-secondary-dark-3: var(--steel-450);
--color-secondary-dark-4: var(--steel-400);
--color-secondary-dark-5: var(--steel-350);
--color-secondary-dark-6: var(--steel-300);
--color-secondary-dark-7: var(--steel-250);
--color-secondary-dark-8: var(--steel-200);
--color-secondary-dark-9: var(--steel-150);
--color-secondary-dark-10: var(--steel-100);
--color-secondary-dark-11: var(--steel-100);
--color-secondary-dark-12: var(--steel-100);
--color-secondary-dark-13: var(--steel-100);
--color-secondary-light-1: var(--steel-650);
--color-secondary-light-2: var(--steel-700);
--color-secondary-light-3: var(--steel-750);
--color-secondary-light-4: var(--steel-800);
--color-secondary-alpha-10: #2B364219;
--color-secondary-alpha-20: #2B364233;
--color-secondary-alpha-30: #2B36424b;
--color-secondary-alpha-40: #2B364266;
--color-secondary-alpha-50: #2B364280;
--color-secondary-alpha-60: #2B364299;
--color-secondary-alpha-70: #2B3642b3;
--color-secondary-alpha-80: #2B3642cc;
--color-secondary-alpha-90: #2B3642e1;
/* colors */
--color-red: #b91c1c;
--color-orange: #ea580c;
--color-yellow: #ca8a04;
--color-olive: #91a313;
--color-green: #15803d;
--color-teal: #0d9488;
--color-blue: #2563eb;
--color-violet: #7c3aed;
--color-purple: #9333ea;
--color-pink: #db2777;
--color-brown: #a47252;
--color-grey: var(--steel-500);
--color-black: #111827;
/* light variants */
--color-red-light: #dc2626;
--color-orange-light: #f97316;
--color-yellow-light: #eab308;
--color-olive-light: #839311;
--color-green-light: #16a34a;
--color-teal-light: #14b8a6;
--color-blue-light: #3b82f6;
--color-violet-light: #8b5cf6;
--color-purple-light: #a855f7;
--color-pink-light: #ec4899;
--color-brown-light: #94674a;
--color-grey-light: var(--steel-300);
--color-black-light: #1f2937;
/* other colors */
--color-gold: #b1983b;
--color-white: #ffffff;
--color-diff-removed-word-bg: #783030;
--color-diff-added-word-bg: #255C39;
--color-diff-removed-row-bg: #432121;
--color-diff-moved-row-bg: #825718;
--color-diff-added-row-bg: #1B3625;
--color-diff-removed-row-border: #783030;
--color-diff-moved-row-border: #A67A1D;
--color-diff-added-row-border: #255C39;
--color-diff-inactive: var(--steel-650);
--color-error-border: #783030;
--color-error-bg: #5F2525;
--color-error-bg-active: #783030;
--color-error-bg-hover: #783030;
--color-error-text: #fef2f2;
--color-success-border: #1F6E3C;
--color-success-bg: #1D462C;
--color-success-text: #f0fdf4;
--color-warning-border: #A67A1D;
--color-warning-bg: #644821;
--color-warning-text: #fefce8;
--color-info-border: #2E50B0;
--color-info-bg: #2A396B;
--color-info-text: var(--steel-100);
--color-red-badge: #B91C1C;
--color-red-badge-bg: #B91C1C22;
--color-red-badge-hover-bg: #B91C1C44;
--color-green-badge: #16a34a;
--color-green-badge-bg: #16a34a22;
--color-green-badge-hover-bg: #16a34a44;
--color-yellow-badge: #ca8a04;
--color-yellow-badge-bg: #ca8a0422;
--color-yellow-badge-hover-bg: #ca8a0444;
--color-orange-badge: #ea580c;
--color-orange-badge-bg: #ea580c22;
--color-orange-badge-hover-bg: #ea580c44;
--color-git: #f05133;
/* target-based colors */
--color-body: var(--steel-800);
--color-box-header: var(--steel-700);
--color-box-body: var(--steel-750);
--color-box-body-highlight: var(--steel-650);
--color-text-dark: #fff;
--color-text: var(--steel-100);
--color-text-light: var(--steel-150);
--color-text-light-1: var(--steel-150);
--color-text-light-2: var(--steel-200);
--color-text-light-3: var(--steel-200);
--color-footer: var(--steel-900);
--color-timeline: var(--steel-650);
--color-input-text: var(--steel-100);
--color-input-background: var(--steel-650);
--color-input-toggle-background: var(--steel-650);
--color-input-border: var(--steel-550);
--color-input-border-hover: var(--steel-450);
--color-navbar: var(--steel-850);
--color-navbar-transparent: #242D3800;
--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: var(--steel-600);
--color-active: var(--steel-650);
--color-menu: var(--steel-700);
--color-card: var(--steel-700);
--color-markup-table-row: #ffffff06;
--color-markup-code-block: var(--steel-800);
--color-button: var(--steel-600);
--color-code-bg: var(--steel-750);
--color-code-sidebar-bg: var(--steel-600);
--color-shadow: #00000060;
--color-secondary-bg: var(--steel-700);
--color-text-focus: #fff;
--color-expand-button: #3c404d;
--color-placeholder-text: var(--steel-450);
--color-editor-line-highlight: var(--steel-700);
--color-project-board-bg: var(--color-secondary-light-3);
--color-project-board-dark-label: var(--color-text-light-3);
--color-caret: var(--color-text);
/* should ideally be --color-text-dark, see #15651 */
--color-reaction-bg: #ffffff12;
--color-reaction-active-bg: var(--color-primary-alpha-30);
--color-header-bar: var(--steel-900);
--color-label-active-bg: #4c525e;
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5);
--color-active-line: #534d1b;
accent-color: var(--color-accent);
color-scheme: dark;
}
/* invert emojis that are hard to read otherwise */
.emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"],
.emoji[aria-label="TOP arrow"],
.emoji[aria-label="END arrow"],
.emoji[aria-label="ON! arrow"],
.emoji[aria-label="SOON arrow"],
.emoji[aria-label="heavy dollar sign"],
.emoji[aria-label="copyright"],
.emoji[aria-label="registered"],
.emoji[aria-label="trade mark"],
.emoji[aria-label="multiply"],
.emoji[aria-label="plus"],
.emoji[aria-label="minus"],
.emoji[aria-label="divide"],
.emoji[aria-label="curly loop"],
.emoji[aria-label="double curly loop"],
.emoji[aria-label="wavy dash"],
.emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"] {
filter: invert(100%) hue-rotate(180deg);
}
.following.bar.light {
border-bottom-color: #ffffff11 !important;
}
.text.green.svg {
color: #16a34a !important;
}
i.grey.icon.icon.icon.icon {
color: var(--steel-350) !important;
}
.ui.red.button,
.ui.negative.button {
background-color: #7f1d1d !important;
color: #fff !important;
border-color: var(--color-light-border) !important;
}
.ui.red.button:hover,
.ui.negative.button:hover {
background-color: #991b1b !important;
}
.ui.secondary.vertical.menu {
border-radius: 0.28571429rem !important;
overflow: hidden;
}
.ui.secondary.vertical.menu > .item {
border-radius: 0 !important;
}
.ui.basic.primary.button.item {
background-color: var(--color-active) !important;
color: var(--color-text) !important;
box-shadow: none !important;
}
.ui.red.label.notification_count,
.ui.primary.label,
.ui.primary.labels .label {
background-color: var(--color-primary-light-3) !important;
}
.repository.view.issue .comment-list .code-comment + .code-comment {
margin: 1.25rem 0 !important;
padding-top: 1.25rem !important;
border-top-color: var(--steel-650) !important;
}
.ui.labeled.icon.buttons > .button > .icon,
.ui.labeled.icon.button > .icon {
background-color: rgba(0, 0, 0, 0.05) !important;
}
#review-box .review-comments-counter {
background-color: #00000088 !important;
color: #fff !important;
margin-left: 0.5em;
}
.ui.tabs .ui.primary.label,
.ui.menu .ui.primary.label {
background-color: rgba(192, 192, 255, 0.2) !important;
color: var(--color-text-dark) !important;
}
.ui.basic.yellow.label.pending-label {
background: var(--color-light) !important;
}
.ui.tertiary.button {
color: #fff9;
}
.ui.tertiary.button:hover {
color: #ccc;
}

View file

@ -0,0 +1,251 @@
:root {
--steel-900: #10161D;
--steel-850: #131A21;
--steel-800: #171E26;
--steel-750: #1D262F;
--steel-700: #242D38;
--steel-650: #2B3642;
--steel-600: #374351;
--steel-550: #445161;
--steel-500: #515F70;
--steel-450: #5F6E80;
--steel-400: #6D7D8F;
--steel-350: #7C8C9F;
--steel-300: #8C9CAF;
--steel-250: #9DADC0;
--steel-200: #AEBED0;
--steel-150: #C0CFE0;
--steel-100: #D2E0F0;
--zinc-50: #FAFAFA;
--zinc-100: #F4F4F5;
--zinc-150: #ECECEE;
--zinc-200: #E4E4E7;
--zinc-250: #DCDCE0;
--zinc-300: #D4D4D8;
--zinc-350: #BABAC1;
--zinc-400: #A1A1AA;
--zinc-450: #898992;
--zinc-500: #71717A;
--zinc-550: #61616A;
--zinc-600: #52525B;
--zinc-650: #484850;
--zinc-700: #3F3F46;
--zinc-750: #333338;
--zinc-800: #27272A;
--zinc-850: #1F1F23;
--zinc-900: #18181B;
--color-primary: #c2410c;
--color-primary-contrast: #ffffff;
--color-primary-dark-1: #c2410c;
--color-primary-dark-2: #9a3412;
--color-primary-dark-3: #9a3412;
--color-primary-dark-4: #7c2d12;
--color-primary-dark-5: #7c2d12;
--color-primary-dark-6: #7c2d12;
--color-primary-dark-7: #7c2d12;
--color-primary-light-1: #ea580c;
--color-primary-light-2: #f97316;
--color-primary-light-3: #fb923c;
--color-primary-light-4: #fdba74;
--color-primary-light-5: #fed7aa;
--color-primary-light-6: #ffedd5;
--color-primary-light-7: #fff7ed;
--color-primary-alpha-10: #c2410c19;
--color-primary-alpha-20: #c2410c33;
--color-primary-alpha-30: #c2410c4b;
--color-primary-alpha-40: #c2410c66;
--color-primary-alpha-50: #c2410c80;
--color-primary-alpha-60: #c2410c99;
--color-primary-alpha-70: #c2410cb3;
--color-primary-alpha-80: #c2410ccc;
--color-primary-alpha-90: #c2410ce1;
--color-secondary: var(--zinc-200);
--color-secondary-dark-1: var(--zinc-200);
--color-secondary-dark-2: var(--zinc-300);
--color-secondary-dark-3: var(--zinc-300);
--color-secondary-dark-4: var(--zinc-400);
--color-secondary-dark-5: var(--zinc-400);
--color-secondary-dark-6: var(--zinc-500);
--color-secondary-dark-7: var(--zinc-500);
--color-secondary-dark-8: var(--zinc-600);
--color-secondary-dark-9: var(--zinc-600);
--color-secondary-dark-10: var(--zinc-700);
--color-secondary-dark-11: var(--zinc-700);
--color-secondary-dark-12: var(--zinc-800);
--color-secondary-dark-13: var(--zinc-800);
--color-secondary-light-1: var(--zinc-200);
--color-secondary-light-2: var(--zinc-100);
--color-secondary-light-3: var(--zinc-100);
--color-secondary-light-4: var(--zinc-50);
--color-secondary-alpha-10: #d4d4d819;
--color-secondary-alpha-20: #d4d4d833;
--color-secondary-alpha-30: #d4d4d84b;
--color-secondary-alpha-40: #d4d4d866;
--color-secondary-alpha-50: #d4d4d880;
--color-secondary-alpha-60: #d4d4d899;
--color-secondary-alpha-70: #d4d4d8b3;
--color-secondary-alpha-80: #d4d4d8cc;
--color-secondary-alpha-90: #d4d4d8e1;
/* colors */
--color-red: #dc2626;
--color-orange: #ea580c;
--color-yellow: #ca8a04;
--color-olive: #91a313;
--color-green: #15803d;
--color-teal: #0d9488;
--color-blue: #2563eb;
--color-violet: #7c3aed;
--color-purple: #9333ea;
--color-pink: #db2777;
--color-brown: #a47252;
--color-grey: #4b5563;
--color-black: #000000;
/* light variants */
--color-red-light: #ef4444;
--color-orange-light: #f97316;
--color-yellow-light: #eab308;
--color-olive-light: #839311;
--color-green-light: #16a34a;
--color-teal-light: #14b8a6;
--color-blue-light: #3b82f6;
--color-violet-light: #8b5cf6;
--color-purple-light: #a855f7;
--color-pink-light: #ec4899;
--color-brown-light: #94674a;
--color-grey-light: #6b7280;
--color-black-light: #181818;
/* other colors */
--color-gold: #b1983b;
--color-white: #ffffff;
--color-diff-removed-word-bg: #fca5a5;
--color-diff-added-word-bg: #86efac;
--color-diff-removed-row-bg: #fee2e2;
--color-diff-moved-row-bg: #fef9c3;
--color-diff-added-row-bg: #dcfce7;
--color-diff-removed-row-border: #fca5a5;
--color-diff-moved-row-border: #fde047;
--color-diff-added-row-border: #86efac;
--color-diff-inactive: var(--zinc-100);
--color-error-border: #fecaca;
--color-error-bg: #fee2e2;
--color-error-bg-active: #fca5a5;
--color-error-bg-hover: #fecaca;
--color-error-text: #7f1d1d;
--color-success-border: #bbf7d0;
--color-success-bg: #dcfce7;
--color-success-text: #14532d;
--color-warning-border: #fde047;
--color-warning-bg: #fef3c7;
--color-warning-text: #78350f;
--color-info-border: #bae6fd;
--color-info-bg: #e0f2fe;
--color-info-text: #0c4a6e;
--color-red-badge: #B91C1C;
--color-red-badge-bg: #B91C1C22;
--color-red-badge-hover-bg: #B91C1C44;
--color-green-badge: #16a34a;
--color-green-badge-bg: #16a34a22;
--color-green-badge-hover-bg: #16a34a44;
--color-yellow-badge: #ca8a04;
--color-yellow-badge-bg: #ca8a0422;
--color-yellow-badge-hover-bg: #ca8a0444;
--color-orange-badge: #ea580c;
--color-orange-badge-bg: #ea580c22;
--color-orange-badge-hover-bg: #ea580c44;
--color-git: #f05133;
/* target-based colors */
--color-body: #fff;
--color-box-header: var(--zinc-100);
--color-box-body: var(--zinc-50);
--color-box-body-highlight: var(--zinc-200);
--color-text-dark: #000;
--color-text: var(--zinc-900);
--color-text-light: var(--zinc-700);
--color-text-light-1: var(--zinc-650);
--color-text-light-2: var(--zinc-600);
--color-text-light-3: var(--zinc-550);
--color-footer: var(--zinc-100);
--color-timeline: var(--zinc-200);
--color-input-text: var(--zinc-800);
--color-input-background: #fff;
--color-input-toggle-background: #fff;
--color-input-border: var(--zinc-300);
--color-input-border-hover: var(--zinc-400);
--color-navbar: var(--zinc-50);
--color-navbar-transparent: #D2E0F000;
--color-light: #ffffffcc;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #0000001d;
--color-hover: #e4e4e4aa;
--color-active: #d4d4d8aa;
--color-menu: var(--zinc-100);
--color-card: var(--zinc-50);
--color-markup-table-row: #ffffff06;
--color-markup-code-block: var(--zinc-150);
--color-button: var(--zinc-150);
--color-code-bg: var(--zinc-50);
--color-code-sidebar-bg: var(--zinc-100);
--color-shadow: #00000060;
--color-secondary-bg: var(--zinc-100);
--color-text-focus: #fff;
--color-expand-button: var(--zinc-200);
--color-placeholder-text: var(--zinc-400);
--color-editor-line-highlight: var(--zinc-100);
--color-project-board-bg: var(--color-secondary-light-2);
--color-project-board-dark-label: var(--color-text-light-3);
--color-caret: var(--color-text);
/* should ideally be --color-text-dark, see #15651 */
--color-reaction-bg: #0000000a;
--color-reaction-active-bg: var(--color-primary-alpha-20);
--color-header-bar: var(--zinc-100);
--color-label-active-bg: #4c525e;
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5);
--color-active-line: #534d1b;
accent-color: var(--color-accent);
color-scheme: light;
}
.text.green.svg {
color: #16a34a !important;
}
.ui.secondary.vertical.menu {
border-radius: 0.28571429rem !important;
overflow: hidden;
}
.ui.secondary.vertical.menu > .item {
border-radius: 0 !important;
}
.ui.basic.primary.button.item {
background-color: var(--color-active) !important;
color: var(--color-text) !important;
box-shadow: none !important;
}
.ui.red.label.notification_count,
.ui.primary.label,
.ui.primary.labels .label {
background-color: var(--color-primary-dark-1) !important;
}
.repository.view.issue .comment-list .code-comment + .code-comment {
margin: 1.25rem 0 !important;
padding-top: 1.25rem !important;
border-top-color: var(--zinc-250) !important;
}
.ui.labeled.icon.buttons > .button > .icon,
.ui.labeled.icon.button > .icon {
background-color: rgba(0, 0, 0, 0.05) !important;
}
#review-box .review-comments-counter {
background-color: #ffffffaa !important;
color: #000 !important;
margin-left: 0.5em;
}
.ui.tabs .ui.primary.label,
.ui.menu .ui.primary.label {
background-color: rgba(0, 0, 0, 0.15) !important;
color: var(--color-text-dark) !important;
}
.ui.basic.yellow.label.pending-label {
background: var(--color-warning-bg) !important;
color: var(--color-warning-text) !important;
border-color: #eab308 !important;
}