Make OBS SVG badges theme-aware using Gitea CSS variables #107

schrodinger · 2026-01-12T10:20:27+01:00

schrodinger commented

2026-01-12 10:20:27 +01:00

First-time contributor

This PR updates the OBS status SVG badges generated by obs-status-service to use Gitea CSS theme variables instead of hardcoded colors.

By switching to variables like --color-success, --color-danger, --color-warning and --color-info, the badges now automatically adapt to both light and dark Gitea themes and better match the surrounding UI.

This improves readability and consistency of build status badges across different user themes, and aligns with the goal of improving build result visualization in the git-workflow.

This PR updates the OBS status SVG badges generated by obs-status-service to use Gitea CSS theme variables instead of hardcoded colors. By switching to variables like --color-success, --color-danger, --color-warning and --color-info, the badges now automatically adapt to both light and dark Gitea themes and better match the surrounding UI. This improves readability and consistency of build status badges across different user themes, and aligns with the goal of improving build result visualization in the git-workflow.

schrodinger added 1 commit 2026-01-12 10:20:27 +01:00

obs-status-service: made SVG status colors theme-aware by using CSS variables

go-generate-check / go-generate-check (pull_request) Has been cancelled

Details

1826f0fe4d

dgarcia requested changes 2026-01-20 12:43:23 +01:00

dgarcia left a comment

First-time contributor

Where did you get this javascript variable names? I can't find these in gitea css styles.

In any case, this is not working, the embed svg image doesn't have access to the css variables, for example this is what I get when I try to embed autogits package:

![devel:Factory:git-workflow](https://br.opensuse.org/status/devel:Factory:git-workflow/autogits)

Where did you get this javascript variable names? I can't find these in gitea css styles. In any case, this is not working, the embed svg image doesn't have access to the css variables, for example this is what I get when I try to embed autogits package: ``` ![devel:Factory:git-workflow](https://br.opensuse.org/status/devel:Factory:git-workflow/autogits) ``` ![image.png](/attachments/8d59e3e9-ba26-456e-a454-1350b66ae9f2)

image.png

5.2 KiB

schrodinger added 1 commit 2026-01-20 14:16:00 +01:00

obs-status-service: add landing page at root endpoint

go-generate-check / go-generate-check (pull_request) Has been cancelled

Details

6b0fb4fadc

schrodinger added 1 commit 2026-01-20 14:17:41 +01:00

merge upstream

go-generate-check / go-generate-check (pull_request) Has been cancelled

Details

de351435bc

schrodinger commented

2026-01-20 16:53:53 +01:00

First-time contributor

Thanks for the clarification.

I realize my mistake here since the SVG is embedded as an external image, it doesn’t have access to Gitea’s CSS variables, so using var(--color-*) won’t work as expected.

I’ll rework the approach

Thanks for the clarification. I realize my mistake here since the SVG is embedded as an external image, it doesn’t have access to Gitea’s CSS variables, so using var(--color-*) won’t work as expected. I’ll rework the approach

schrodinger closed this pull request

2026-01-20 17:15:22 +01:00

go-generate-check / go-generate-check (pull_request) Has been cancelled

Details

Pull request closed

Please reopen this pull request to perform a merge.

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: git-workflow/autogits#107

Allow edits from maintainers