fix(docs): visible admonition icons in dark mode

[raifdmueller]

Follow-up to #516 / #550.

Problem

After fixing the admonition body text in dark mode (#550), the admonition icons are still nearly invisible: the asciidoctor stylesheet hardcodes dark icon colours (note #19407c, tip #111, important #bf0000, warning/caution dark warm tones) that sit on the dark #1f2937 panel. Measured contrast 1.3–2.3:1, below the 3:1 WCAG threshold for non-text — the "i" note icon and the tip bulb in particular are barely there.

Fix

.dark-scoped overrides lifting each icon to a light, semantic colour:

Admonition	was	now	dark contrast
note ℹ	#19407c	#60a5fa blue	1.44 → 5.77
tip 💡	#111	#4ade80 green	1.29 → 8.42
important ❗	#bf0000	#f87171 red	2.25 → 5.31
warning ⚠	#bf6900	#fbbf24 amber	—
caution 🔥	#bf3400	#fb923c orange	—

Light mode unchanged (rules are .dark-scoped).

Note on Lighthouse

The site's dark mode is a class toggle (.dark + localStorage), not prefers-color-scheme. Lighthouse / the CI audit only ever sees the default light theme, so it reports Accessibility 100 while these dark-mode contrast failures go undetected. Verified here by computing WCAG contrast directly in dark mode.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Stil
  • Die Sichtbarkeit der Admonition-Symbole (Hinweis, Tipp, Warnung, Vorsicht, Wichtig) wurde im Dark-Mode verbessert, um eine bessere Lesbarkeit auf dunklem Hintergrund zu gewährleisten.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: 22749880-c3b0-4277-9459-0114a30d5b6b

📥 Commits

Reviewing files that changed from the base of the PR and between 457c183 and b1512ab.

📒 Files selected for processing (1)

• website/src/styles/main.css

---

Walkthrough

Dark-Mode-CSS-Übersteuerungen wurden für Asciidoctor-Admonition-Icons hinzugefügt. Die ::before-Pseudo-Elemente in td.icon erhalten nun semantisch passende Farben für die Icons note, tip, warning, caution und important auf dunklem Hintergrund.

Changes

Admonition-Icon-Sichtbarkeit im Dark Mode

Layer / File(s)	Summary
Admonition-Icon-Farb-Overrides website/src/styles/main.css	Dark-Mode-Regeln für td.icon ::before definieren helle, semantisch passende Farben für die fünf Admonition-Icon-Typen (note, tip, warning, caution, important), um die Sichtbarkeit der Icons auf dunklem Hintergrund zu verbessern.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 Minuten

Possibly related PRs

• LLM-Coding/Semantic-Anchors#550: Derselbe Dateibereich (website/src/styles/main.css Dark-Mode Overrides für .admonitionblock), jedoch mit Fokus auf Admonition-Body-Text und Trennlinien-Farbe statt Icon-Farben.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	Der Titel beschreibt präzise die Hauptänderung: Verbesserung der Sichtbarkeit von Admonition-Icons im Dark-Mode durch CSS-Anpassungen.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}