Dark theme problem

[wxiaoguang]

Woodpecker: {"source": "https://github.com/woodpecker-ci/woodpecker","version": "next-9feb6be9"}

Screenshot:

There might be 2 problems here:

1. The bottom UI is always using dark theme.
2. The texts are hard to read

[ivictbor]

Also some other colors contrast in the design are not WCAG - compatible, e.g.

Even large text on AA grade fails which is generally means a lot of issues with reading text on different monitors:

Just in case if you have design in Figma, it is prossible easily check WCAG criteria with this plugin https://www.figma.com/community/plugin/748533339900865323/Contrast , though currenlty it is easy to find such colors by human eye

[anbraten]

We currently do not have a Figma design, but I would absolutely love to have one. It would be very helpful IMO for developers to follow Figma and it would help designers without Vue, code knowledge to improve / suggest UI changes. I have used Figma a bit in the past, but I am really not an expert, so maybe someone else cloud help creating some components and some main views in there. For the colors we use the list of windicss colors from: https://windicss.org/utilities/general/colors.html

Problems related contrast and some design issues in general are somehow known, but I am not an expert on this, so help is absolutely appreciated.

[6543]

should be improved now :)

[6543]

#985