Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#202 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
88/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu với src/site/resources/css/site.css và so sánh các biến màu thay thế của tệp này với quy tắc cho callout IMPORTANT ở chế độ tối được hiển thị trong issue. Thêm phần ghi đè nhắm mục tiêu body.dark .callout.callout-important được mô tả ở đó, sau đó xác minh rằng callout IMPORTANT có màu chữ và màu nền dễ đọc ở chế độ tối.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
Java
Star
13
Fork
4
Merge trung bình
7 giờ 38 phút
Pull request đã merge (30 ngày)
14

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của MetricsHub/winrm-java

Tất cả issue của MetricsHub/winrm-java

Issue tương tự

Thêm issue về Java

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.