Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#202 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
88/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css
Área
frontend

Línea de trabajo

Empieza por src/site/resources/css/site.css y compara sus variables de color alternativas con la regla para los callouts IMPORTANT en modo oscuro que se muestra en el issue. Añade la sobrescritura específica body.dark .callout.callout-important descrita allí y, después, verifica que los callouts IMPORTANT tengan colores de texto y de fondo legibles en modo oscuro.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
Java
Estrellas
15
Forks
4
Merge medio
11 h 58 min
PR fusionados (30 d)
20

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de MetricsHub/winrm-java

Todos los issues de MetricsHub/winrm-java

Issues similares

Más issues de Java

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.