Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Site dark mode: IMPORTANT callouts render as light text on a white box

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#202 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
88/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
css
Bereich
frontend

Rechercherichtung

Beginne mit src/site/resources/css/site.css und vergleiche dessen alternative Farbvariablen mit der im Issue gezeigten Regel für IMPORTANT-Callouts im Dark Mode. Füge die dort beschriebene gezielte body.dark .callout.callout-important-Überschreibung hinzu und überprüfe anschließend, ob IMPORTANT-Callouts im Dark Mode gut lesbare Text- und Hintergrundfarben haben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug documentation

Where: src/site/resources/css/site.css (MetricsHub colors), with Sentry Maven Skin 8.

What happens: in dark mode, an > [!IMPORTANT] callout renders as a white box with light text, which is unreadable.

The skin styles IMPORTANT callouts with the alternate colors, and swaps them in dark mode (published css/main-combined.css):

.callout.callout-important { --callout-bg: var(--alternate-bgcolor); --callout-fg: var(--alternate-fgcolor); }
body.dark .callout.callout-important { --callout-bg: var(--alternate-fgcolor); --callout-fg: var(--alternate-bgcolor); }

Our site.css sets --alternate-bgcolor: #266fd0 and --alternate-fgcolor: #fff and does not override them in body.dark, so in dark mode the callout background becomes #fff. The callout's body text keeps the dark-mode foreground (#e9ecef), so it is light text on white.

Impact today: none of the current pages uses an IMPORTANT callout, so the bug is latent. It shows up as soon as a page adds one. It was found in ipmi-java, which copied this site.css (MetricsHub/ipmi-java#113).

Suggested fix: the fix applied in ipmi-java, appended to site.css:

/* The skin inverts the alternate colors for IMPORTANT callouts in dark mode, which turns our white-on-blue
   palette into a white box with light text */
body.dark .callout.callout-important {
	--callout-bg: var(--main-bgcolor);
	--callout-fg: var(--link-color);
}

Overriding --alternate-fgcolor in body.dark instead would also darken the text that the skin draws on the blue alternate background (active menu item, ...), so the targeted rule is safer. The other MetricsHub projects that share this site.css probably have the same latent bug. The skin's dark rule could arguably handle a light --alternate-fgcolor itself.

Vorherrschende Sprache
Java
Sterne
15
Forks
4
Ø Merge
11 Std. 58 Min.
Gemergte PRs (30 T.)
20

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus MetricsHub/winrm-java

Alle Issues in MetricsHub/winrm-java

Ähnliche Issues

Weitere Issues zu Java

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.