Skip to content

Commit 6d930a4

Browse files
feat(theme): enhance dark theme implementation
- Generate avatars with transparent background - Update avatar display consistency across themes
1 parent 3a6f02b commit 6d930a4

File tree

8 files changed

+46
-32
lines changed

8 files changed

+46
-32
lines changed

modules/avatar/avatar.go

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,27 @@ import (
1111
"image/color"
1212
"image/png"
1313

14-
_ "image/gif" // for processing gif images
15-
_ "image/jpeg" // for processing jpeg images
14+
"golang.org/x/image/draw"
1615

1716
"code.gitea.io/gitea/modules/avatar/identicon"
1817
"code.gitea.io/gitea/modules/setting"
1918

20-
"golang.org/x/image/draw"
19+
_ "image/gif" // for processing gif images
20+
_ "image/jpeg" // for processing jpeg images
2121

2222
_ "golang.org/x/image/webp" // for processing webp images
2323
)
2424

2525
// DefaultAvatarSize is the target CSS pixel size for avatar generation. It is
26-
// multiplied by setting.Avatar.RenderedSizeFactor and the resulting size is the
2726
// usual size of avatar image saved on server, unless the original file is smaller
2827
// than the size after resizing.
2928
const DefaultAvatarSize = 256
3029

3130
// RandomImageSize generates and returns a random avatar image unique to input data
3231
// in custom size (height and width).
3332
func RandomImageSize(size int, data []byte) (image.Image, error) {
34-
// we use white as background, and use dark colors to draw blocks
35-
imgMaker, err := identicon.New(size, color.White, identicon.DarkColors...)
33+
// Use transparent background instead of white
34+
imgMaker, err := identicon.New(size, color.Transparent, identicon.DarkColors...)
3635
if err != nil {
3736
return nil, fmt.Errorf("identicon.New: %w", err)
3837
}
@@ -85,18 +84,19 @@ func processAvatarImage(data []byte, maxOriginSize int64) ([]byte, error) {
8584
targetSize := DefaultAvatarSize * setting.Avatar.RenderedSizeFactor
8685
img = scale(img, targetSize, targetSize, draw.BiLinear)
8786

88-
// try to encode the cropped/resized image to png
87+
// Create a new RGBA image to preserve transparency
88+
dst := image.NewRGBA(image.Rect(0, 0, img.Bounds().Dx(), img.Bounds().Dy()))
89+
draw.Draw(dst, dst.Bounds(), image.Transparent, image.Point{}, draw.Src)
90+
draw.Draw(dst, img.Bounds(), img, img.Bounds().Min, draw.Over)
91+
92+
// Encode the image to PNG with transparency
8993
bs := bytes.Buffer{}
90-
if err = png.Encode(&bs, img); err != nil {
94+
if err = png.Encode(&bs, dst); err != nil {
9195
return nil, err
9296
}
9397
resized := bs.Bytes()
9498

95-
// usually the png compression is not good enough, use the original image (no cropping/resizing) if the origin is smaller
96-
if len(data) <= len(resized) {
97-
return data, nil
98-
}
99-
99+
// Always use the processed image to ensure transparency
100100
return resized, nil
101101
}
102102

web_src/css/markup/content.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ In markup content, we always use bottom margin for all elements */
169169
}
170170

171171
.markup .task-list-item input[type="checkbox"] {
172-
margin: 0 .3em .25em -1.4em;
172+
margin: 0 0.3em 0.25em -1.4em;
173173
vertical-align: middle;
174174
padding: 0;
175175
}

web_src/css/modules/button.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@
163163
.ui.basic.buttons .button,
164164
.ui.basic.button {
165165
border-radius: var(--border-radius);
166+
margin-top: 5px;
166167
background: none;
167168
}
168169
.ui.basic.buttons {

web_src/css/modules/input.css

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -170,26 +170,36 @@
170170
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
171171
min-width: 10em;
172172
}
173-
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
173+
.ui.action.input:not([class*="left action"])
174+
> .ui.dropdown.selection:not(:focus) {
174175
border-right: none;
175176
}
176-
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover {
177+
.ui.action.input:not([class*="left action"])
178+
> .ui.dropdown.selection:not(.active):hover {
177179
border-color: var(--color-input-border);
178180
}
179-
.ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible {
181+
.ui.action.input:not([class*="left action"])
182+
.ui.dropdown.selection.upward.visible {
180183
border-bottom-left-radius: 0 !important;
181184
border-bottom-right-radius: 0 !important;
182185
}
183186
.ui.action.input:not([class*="left action"]) > input,
184187
.ui.action.input:not([class*="left action"]) > input:hover {
185188
border-right: none;
186189
}
187-
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection,
188-
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
190+
.ui.action.input:not([class*="left action"])
191+
> input:focus
192+
+ .ui.dropdown.selection,
193+
.ui.action.input:not([class*="left action"])
194+
> input:focus
195+
+ .ui.dropdown.selection:hover,
189196
.ui.action.input:not([class*="left action"]) > input:focus + .button,
190197
.ui.action.input:not([class*="left action"]) > input:focus + .button:hover,
191198
.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button,
192-
.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button:hover {
199+
.ui.action.input:not([class*="left action"])
200+
> input:focus
201+
+ i.icon
202+
+ .button:hover {
193203
border-left-color: var(--color-primary);
194204
}
195205
.ui.action.input:not([class*="left action"]) > input:focus {

web_src/css/modules/label.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222

2323
a.ui.label {
2424
cursor: pointer;
25+
margin-top: 5px;
2526
}
2627

2728
.ui.label > a {

web_src/css/repo.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -674,10 +674,11 @@ td .commit-summary {
674674
}
675675

676676
.merge-section-info code {
677-
border: 1px solid var(--color-light-border);
677+
border: 1px solid var(--color-primary);
678678
border-radius: var(--border-radius);
679+
color: var(--color-milk-text);
679680
padding: 2px 4px;
680-
background: var(--color-light);
681+
background: var(--color-primary-2);
681682
}
682683

683684
.repository.view.issue .comment-list .comment .no-content {

web_src/css/shared/flex-list.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
}
7474

7575
.flex-item .flex-item-body a {
76-
color: inherit;
76+
/* color: inherit; */
7777
overflow-wrap: anywhere;
7878
}
7979

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

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -69,14 +69,14 @@ gitea-theme-meta-info {
6969
--color-secondary-hover: var(--color-secondary-dark-3);
7070
--color-secondary-active: var(--color-secondary-dark-2);
7171
/* console colors - used for actions console and console files */
72-
--color-console-fg: #f7f8f9;
72+
--color-console-fg: #abb1d3;
7373
--color-console-fg-subtle: #bdc4cc;
74-
--color-console-bg: #e2447180;
75-
--color-console-border: #2e353b;
76-
--color-console-hover-bg: #272d33;
77-
--color-console-active-bg: #2e353b;
78-
--color-console-menu-bg: #262b31;
79-
--color-console-menu-border: #414b55;
74+
--color-console-bg: var(--color-nav-bg);
75+
--color-console-border: var(--color-primary-2);
76+
--color-console-hover-bg: #6464ff1a;
77+
--color-console-active-bg: #6464ff1a;
78+
--color-console-menu-bg: var(--color-nav-bg);
79+
--color-console-menu-border: var(--color-primary-2);
8080
/* named colors */
8181
--color-red: #e24471cc; /* #cc4848 */
8282
--color-orange: #cc580c;
@@ -232,8 +232,9 @@ gitea-theme-meta-info {
232232
--color-menu: #1f212a;
233233
--color-card: #1f212a;
234234
--color-markup-table-row: #e2447180;
235-
--color-markup-code-block: #e2447180;
236-
--color-markup-code-inline: #e2447180;
235+
--color-markup-code-block: #292c39;
236+
--color-markup-code-inline: #384c78b3;
237+
--color-milk-text: #abb1d3;
237238
--color-button: #292c39;
238239
--color-code-bg: #1f212a;
239240
--color-shadow: #6464ff4d;

0 commit comments

Comments
 (0)