Skip to content

Commit 82ed3cb

Browse files
fnetXCodeberg Admins @ build
fnetX
authored and
Codeberg Admins @ build
committed
CB/design: Add custom codeberg & codeberg-dark theme
+ fix tertiary button (codeberg-dark) (!54) makes the "Regenerate Secret" button on the OAuth2 application edit page more legible Reviewed-on: https://codeberg.org/Codeberg/forgejo/pulls/54 Co-authored-by: crystal <[email protected]> Co-committed-by: crystal <[email protected]> CB/design: Update colors of codeberg-dark for better readability and less strain (!42) Fixes https://codeberg.org/Codeberg/Community/issues/751 I attached before and after images to show how it's supposed to look like. I edited the comments in the `.less` file to try to document my motivations. **I didn't test this commit on a running Gitea**. However, I opened the "Inspect" browser tab to test-edit the actual CSS var definitions (not as singled out element overrides), and double-checked the old values match those in the file I edited. Therefore, I'm hoping there's a chance I did this correctly anyway. Co-authored-by: Ellie <[email protected]> Reviewed-on: https://codeberg.org/Codeberg/gitea/pulls/42 Co-authored-by: ell1e <[email protected]> Co-committed-by: ell1e <[email protected]> CB/ui: Adjust primary colour
1 parent feb3db1 commit 82ed3cb

File tree

6 files changed

+207
-1
lines changed

6 files changed

+207
-1
lines changed

‎web_src/less/_base.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
--opacity-disabled: .55;
1212
--height-loading: 12rem;
1313
/* base colors */
14-
--color-primary: #4183c4;
14+
--color-primary: #2185D0;
1515
--color-primary-contrast: #ffffff;
1616
--color-primary-dark-1: #3876b3;
1717
--color-primary-dark-2: #31699f;

‎web_src/less/themes/codeberg/base-brand.less

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.following.bar, #navbar {
2+
/* Change navbar color scheme to match Codeberg's brand */
3+
background-color: var(--color-primary);
4+
border-bottom: none !important;
5+
}
6+
7+
.following.bar .menu.stackable>.item, .following.bar .ui.container>.item {
8+
/* Use white text for navbar buttons */
9+
color: #fff !important;
10+
}
11+
#navbar-expand-toggle {
12+
/* Fix contrast for the mobile menu button */
13+
--color-light-border: rgba(255,255,255,0.5);
14+
--color-text-light: #fff;
15+
}
16+
* {
17+
/* Revert changes to browser scrollbar */
18+
scrollbar-width: initial;
19+
scrollbar-color: initial;
20+
}
21+

‎web_src/less/themes/codeberg/dark-variables.less

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
:root {
2+
--color-primary: #4793cc; /* from brand palette, brightened for readability */
3+
--color-primary-alpha-10: #2185d019;
4+
--color-primary-alpha-20: #2185d033;
5+
--color-primary-alpha-30: #2185d04b;
6+
--color-primary-alpha-40: #2185d066;
7+
--color-primary-alpha-50: #2185d080;
8+
--color-primary-alpha-60: #2185d099;
9+
--color-primary-alpha-70: #2185d0b3;
10+
--color-primary-alpha-80: #2185d0cc;
11+
--color-primary-alpha-90: #2185d0e1;
12+
13+
--color-primary-light-1: #1e78bb; /* 10% shade steps, AA contrast with white text */
14+
--color-primary-light-2: #1a6aa6;
15+
--color-primary-light-3: #175d92;
16+
--color-primary-light-4: #14507d;
17+
--color-primary-light-5: #114368;
18+
--color-primary-light-6: #0d3553;
19+
--color-primary-light-7: #0a283e;
20+
21+
--color-primary-dark-1: #3d94d6; /* 12.5% tint steps */
22+
--color-primary-dark-2: #59a4dc;
23+
--color-primary-dark-3: #74b3e2;
24+
--color-primary-dark-4: #90c2e8;
25+
--color-primary-dark-5: #acd1ed;
26+
--color-primary-dark-6: #c8e1f3;
27+
--color-primary-dark-7: #e3f0f9;
28+
29+
--color-secondary: #082437; /* 25% shade steps from dark-1 */
30+
--color-secondary-alpha-10: #08243719;
31+
--color-secondary-alpha-20: #08243733;
32+
--color-secondary-alpha-30: #0824374b;
33+
--color-secondary-alpha-40: #08243766;
34+
--color-secondary-alpha-50: #08243780;
35+
--color-secondary-alpha-60: #08243799;
36+
--color-secondary-alpha-70: #082437b3;
37+
--color-secondary-alpha-80: #082437cc;
38+
--color-secondary-alpha-90: #082437e1;
39+
40+
--color-secondary-light-1: #061825; /* 50% shade from dark-1, AA contrast with brand color for text */
41+
--color-secondary-light-2: #04121b; /* 62.5% shade from dark-1 */
42+
--color-secondary-light-3: #0c1a24; /* 75% shade from dark-1, then brightened for less eye strain */
43+
--color-secondary-light-4: #010609; /* 87.5% shade from dark-1 */
44+
45+
--color-secondary-dark-1: #0b3049; /* from brand palette */
46+
--color-secondary-dark-2: #1d4057; /* 7.5% tint steps */
47+
--color-secondary-dark-3: #304f64;
48+
--color-secondary-dark-4: #425f72;
49+
--color-secondary-dark-5: #546e80;
50+
--color-secondary-dark-6: #677e8d;
51+
--color-secondary-dark-7: #798d9b;
52+
--color-secondary-dark-8: #8b9da9;
53+
--color-secondary-dark-9: #9dacb6;
54+
--color-secondary-dark-10: #b0bcc4;
55+
--color-secondary-dark-11: #c2cbd2;
56+
--color-secondary-dark-12: #d4dbdf;
57+
--color-secondary-dark-13: #e7eaed;
58+
59+
--color-diff-inactive: #353846; /* TODO */
60+
--color-body: var(--color-secondary-light-3);
61+
--color-box-header: var(--color-secondary-light-1);
62+
--color-box-body: var(--color-secondary-light-2);
63+
--color-text-dark: #fff;
64+
--color-text: var(--color-secondary-dark-12);
65+
--color-text-light: var(--color-secondary-dark-9);
66+
--color-text-light-2: var(--color-secondary-dark-6);
67+
--color-text-light-3: var(--color-secondary-dark-3);
68+
--color-footer: var(--color-secondary-light-4);
69+
--color-timeline: var(--color-secondary);
70+
--color-input-text: var(--color-text-dark);
71+
--color-input-background: var(--color-secondary);
72+
--color-input-border: var(--color-secondary-dark-2);
73+
--color-input-border-hover: var(--color-primary);
74+
--color-navbar: #1b2c40; /* not the main navbar, but for e.g. repo header. brightened from --color-secondary for tab contrast. */
75+
--color-menu: var(--color-secondary-light-1);
76+
--color-card: var(--color-secondary-light-1);
77+
--color-markup-code-block: var(--color-secondary);
78+
--color-light: var(--color-secondary-dark-2);
79+
--color-light-border: var(--color-secondary-dark-4);
80+
--color-hover: var(--color-secondary-dark-3);
81+
--color-active: var(--color-secondary);
82+
--color-button: var(--color-secondary-dark-2);
83+
--color-code-bg: var(--color-secondary-light-2);
84+
--color-code-sidebar-bg: var(--color-secondary-light-3);
85+
--color-secondary-bg: var(--color-secondary-light-2);
86+
--color-expand-button: var(--color-secondary-dark-3);
87+
--color-placeholder-text: var(--color-text-light-2);
88+
}
89+
90+
.ui.horizontal.segments > .segment {
91+
background-color: var(--color-secondary-light-3);
92+
}
93+
[data-tooltip]:before, [data-tooltip]:after {
94+
background: #1b1c1d !important;
95+
border-color: #1b1c1d !important;
96+
color: #dbdbdb !important;
97+
}
98+
[data-tooltip]:before {
99+
box-shadow: 1px 1px #1b1c1d !important;
100+
}
101+
.feeds .list ul li.private {
102+
background: var(--color-secondary-dark-2)
103+
}
104+
.form .help {
105+
color: #7f8699
106+
}
107+
.ui .text.light.grey {
108+
color: #7f8699 !important
109+
}
110+
.ui.search > .results {
111+
background: var(--color-secondary-dark-3);
112+
}
113+
.repository.file.list #repo-files-table tr {
114+
background: var(--color-secondary-light-1);
115+
}
116+
.repository.file.list #repo-files-table tr:hover {
117+
background-color: var(--color-secondary-dark-1) !important
118+
}
119+
.repository.file.editor.edit .editor-preview, .repository.wiki.new .CodeMirror .editor-preview, .repository.file.editor.edit .editor-preview-side, .repository.wiki.new .CodeMirror .editor-preview-side, .repository.file.editor.edit + .editor-preview-side, .repository.wiki.new .CodeMirror + .editor-preview-side {
120+
background: var(--color-secondary-dark-2)
121+
}
122+
.ui.green.button, .ui.green.buttons .button {
123+
background-color: #21ba45;
124+
}
125+
.ui.green.button:hover, .ui.green.buttons .button:hover {
126+
background-color: #16ab39
127+
}
128+
.ui.tertiary.button {
129+
color: #fff9;
130+
&:hover {
131+
color: #ccc;
132+
}
133+
}
134+
135+
/** TODO: ??? **/
136+
.tag-code, .tag-code td {
137+
background: var(--color-secondary-dark-2) !important
138+
}
139+
.tag-code td.lines-num {
140+
background-color: var(--color-secondary-dark-3) !important
141+
}
142+
.ui.attached.info.message, .ui.info.message {
143+
box-shadow: 0 0 0 1px #4b5e71 inset, 0 0 transparent
144+
}
145+
.ui.active.label {
146+
background: #393d4a;
147+
border-color: #393d4a;
148+
color: #dbdbdb
149+
}
150+
.ui.modal > .content {
151+
background: var(--color-secondary-dark-3);
152+
}
153+
.minicolors-panel {
154+
border-color: #6a737d !important
155+
}
156+
.repository.release #release-list > li .detail .dot {
157+
background-color: #505667;
158+
border-color: #383c4a
159+
}
160+
#git-graph-container .ui.buttons button#flow-color-monochrome.ui.button {
161+
/* TODO: a button there is white for some reason?! */
162+
border-left-color: #4c505c;
163+
}
164+
.is-loading:after {
165+
border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da
166+
}

‎web_src/less/themes/theme-codeberg-auto.less

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* Basic styles for Codeberg */
2+
@import "codeberg/base-brand.less";
3+
4+
@media (prefers-color-scheme: dark) {
5+
/* Arc-Green based dark theme */
6+
@import "theme-arc-green.less";
7+
@import "codeberg/dark-variables.less";
8+
}
9+

‎web_src/less/themes/theme-codeberg-dark.less

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* Basic styles for Codeberg */
2+
@import "codeberg/base-brand.less";
3+
4+
/* Arc-Green based dark theme */
5+
@import "theme-arc-green.less";
6+
@import "codeberg/dark-variables.less";
7+

‎web_src/less/themes/theme-codeberg-light.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/* Basic styles for Codeberg */
2+
@import "codeberg/base-brand.less";
3+

0 commit comments

Comments
 (0)