Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open Beginner friendly
  • Is something wrong?
#202 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css
Domain
frontend

Research direction

Start with src/site/resources/css/site.css and compare its alternate color variables with the dark-mode IMPORTANT callout rule shown in the issue. Add the targeted body.dark .callout.callout-important override described there, then verify that IMPORTANT callouts have readable text and background colors in dark mode.

Written by the indexing model from the issue text.

Description

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.

Dominant language
Java
Stars
13
Forks
4
Avg merge
1d 9h
Merged PRs (30d)
15

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from MetricsHub/winrm-java

All issues in MetricsHub/winrm-java

Similar issues

More Java issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.