[PR #2034] [MERGED] fix: improve Mermaid edge label contrast #2070

Closed
opened 2026-02-17 17:23:02 -05:00 by yindo · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/langchain-ai/docs/pull/2034
Author: @bwhiting2356
Created: 12/27/2025
Status: Merged
Merged: 1/6/2026
Merged by: @lnhsingh

Base: mainHead: fix/mermaid-edge-label-contrast


📝 Commits (2)

  • e65af22 fix: improve Mermaid edge label contrast for light and dark modes
  • 14a5d2a Merge branch 'main' into fix/mermaid-edge-label-contrast

📊 Changes

1 file changed (+20 additions, -0 deletions)

View changed files

📝 src/style.css (+20 -0)

📄 Description

Summary

  • Fixes low contrast edge labels in Mermaid diagrams (e.g., "action", "observation", "finish" on the agents page)
  • Adds CSS styling for .labelBkg using theme colors for consistency
  • Supports both light mode and dark mode

Contrast Analysis

Before: #333333 text on #7f7f7f background

Before

Screenshot 2025-12-27 at 12 41 36 PM Screenshot 2025-12-27 at 12 41 32 PM

After

Screenshot 2025-12-27 at 12 45 47 PM Screenshot 2025-12-27 at 12 45 54 PM

Test plan

  • Check /oss/python/langchain/agents in light mode
  • Check /oss/python/langchain/agents in dark mode

🤖 Generated with Claude Code


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/langchain-ai/docs/pull/2034 **Author:** [@bwhiting2356](https://github.com/bwhiting2356) **Created:** 12/27/2025 **Status:** ✅ Merged **Merged:** 1/6/2026 **Merged by:** [@lnhsingh](https://github.com/lnhsingh) **Base:** `main` ← **Head:** `fix/mermaid-edge-label-contrast` --- ### 📝 Commits (2) - [`e65af22`](https://github.com/langchain-ai/docs/commit/e65af223ea26e468a6b0e5100292661114a61a02) fix: improve Mermaid edge label contrast for light and dark modes - [`14a5d2a`](https://github.com/langchain-ai/docs/commit/14a5d2ad8c8d890ba5e01e8de504613154accb5e) Merge branch 'main' into fix/mermaid-edge-label-contrast ### 📊 Changes **1 file changed** (+20 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `src/style.css` (+20 -0) </details> ### 📄 Description ## Summary - Fixes low contrast edge labels in Mermaid diagrams (e.g., "action", "observation", "finish" on the agents page) - Adds CSS styling for `.labelBkg` using theme colors for consistency - Supports both light mode and dark mode ### Contrast Analysis **Before:** `#333333` text on `#7f7f7f` background - Contrast ratio: 3.15 ❌ [Fails WCAG AA](https://contrast-ratio.com/#%23333333-on-%237f7f7f) ## Before <img width="344" height="347" alt="Screenshot 2025-12-27 at 12 41 36 PM" src="https://github.com/user-attachments/assets/7a2d6043-0893-4339-8c71-e0fbf58f5073" /> <img width="368" height="354" alt="Screenshot 2025-12-27 at 12 41 32 PM" src="https://github.com/user-attachments/assets/1bc77a5a-0d41-4548-bbde-de6256705b1b" /> ## After <img width="343" height="356" alt="Screenshot 2025-12-27 at 12 45 47 PM" src="https://github.com/user-attachments/assets/59c4a03d-5958-4eaf-99ed-46ac844728a7" /> <img width="331" height="347" alt="Screenshot 2025-12-27 at 12 45 54 PM" src="https://github.com/user-attachments/assets/8844b519-3436-4c76-bd49-9201ef845d70" /> ## Test plan - [x] Check `/oss/python/langchain/agents` in light mode - [x] Check `/oss/python/langchain/agents` in dark mode 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-02-17 17:23:02 -05:00
yindo closed this issue 2026-02-17 17:23:02 -05:00
yindo changed title from [PR #2034] fix: improve Mermaid edge label contrast to [PR #2034] [MERGED] fix: improve Mermaid edge label contrast 2026-06-05 18:16:30 -04:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langchain-ai/docs#2070