Fix guardrail card contrast in dark mode

[lahiruudayakumara]

Purpose

Fix insufficient text contrast in the Supported Guardrails cards when the documentation is displayed in dark mode.

The cards previously used a near-white background while inheriting the dark theme’s light foreground colors, making their titles and descriptions difficult to read.

Fixes #11639

Goals

Ensure the Supported Guardrails cards remain readable and accessible in both light and dark modes.

Approach

Updated the card background to use the existing theme-aware --md-surface-fg-color CSS variable. This preserves the white surface in light mode and provides a dark surface with readable light text in dark mode.

User stories

Documentation users can comfortably read guardrail names and descriptions regardless of the selected color scheme.

Release note

Improved the readability of Supported Guardrails cards in dark mode.

Documentation

Updated the AI Gateway → AI Guardrails → Overview page.

Training

N/A — no training-content impact.

Certification

N/A — this documentation styling fix does not affect certification exams.

Marketing

N/A — no marketing-content impact.

Automation tests

• Unit tests: N/A — documentation-only change.
• Integration tests: N/A — documentation-only change.
• Successfully built the documentation locally with MkDocs.
• Verified the page in light and dark modes.

Security checks

• Followed secure coding standards: Yes
• Ran FindSecurityBugs: N/A — documentation-only change
• Confirmed that this PR does not commit keys, passwords, tokens, usernames, or other secrets: Yes

Samples

N/A — no sample changes.

Related PRs

N/A

Migrations

N/A — no migration is required.

Test environment

• macOS
• Local MkDocs development server
• Light and dark documentation themes

Learning

The issue was caused by using a light-only background token with theme-dependent foreground colors. The fix uses the documentation theme’s existing surface-color variable so the card background adapts automatically to the selected color scheme.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 99c07ab6-918d-4fb0-add7-afe49eaf8d30

📥 Commits

Reviewing files that changed from the base of the PR and between 4b4d7e3 and cf48e3a.

📒 Files selected for processing (1)

• en/docs/ai-gateway/ai-guardrails/overview.md

---

📝 Walkthrough

Updated Supported Guardrails cards to use a theme-aware background color, improving text readability in both light and dark modes while preserving the existing card layout and links.

Walkthrough

The Supported Guardrails card links now use --md-surface-fg-color with a #fff fallback instead of --md-primary-fg-color--lightest. Card layouts, titles, descriptions, and link targets remain unchanged.

Suggested reviewers: chamilaadhi, tharikagithub

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: improving guardrail card contrast in dark mode.
Description check	✅ Passed	The description follows the template well and covers purpose, goals, approach, testing, and support sections.
Linked Issues check	✅ Passed	The PR addresses issue #11639 by updating the guardrail card styling to improve readability in dark mode.
Out of Scope Changes check	✅ Passed	The changes stay focused on the Supported Guardrails documentation styling fix and do not introduce unrelated scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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.}