Skip to content

Fix dark mode readability for mermaid diagram#20

Merged
horner merged 2 commits intomainfrom
copilot/fix-19
Sep 4, 2025
Merged

Fix dark mode readability for mermaid diagram#20
horner merged 2 commits intomainfrom
copilot/fix-19

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Sep 4, 2025

The mermaid diagram in the README was unreadable in GitHub's dark mode due to light background colors with default black text. The diagram nodes appeared with very poor contrast, making the infrastructure overview difficult to understand.

Before (problematic in dark mode):

classDef folder fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef system fill:#f1f8e9,stroke:#689f38,stroke-width:2px
classDef wazuh fill:#fffde7,stroke:#fbc02d,stroke-width:2px
classDef user fill:#fff3e0,stroke:#f57c00,stroke-width:2px
Loading

After (readable in both modes):

classDef folder fill:#1976d2,stroke:#e3f2fd,stroke-width:2px,color:#ffffff
classDef system fill:#689f38,stroke:#f1f8e9,stroke-width:2px,color:#ffffff
classDef wazuh fill:#fbc02d,stroke:#fffde7,stroke-width:2px,color:#000000
classDef user fill:#f57c00,stroke:#fff3e0,stroke-width:2px,color:#ffffff
Loading

The fix swaps the fill and stroke colors to use darker backgrounds with explicit text colors:

  • Uses the same color palette to maintain visual consistency
  • Provides excellent contrast in dark mode
  • Remains clearly readable in light mode
  • Maintains the original design hierarchy and branding

This ensures the cluster architecture diagram is accessible to all users regardless of their GitHub theme preference.

Color contrast comparison showing improved readability

Fixes #19.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • cdn.jsdelivr.net
    • Triggering command: curl -s REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

…ith explicit text colors

Co-authored-by: horner <6094599+horner@users.noreply.github.com>
Copilot AI changed the title [WIP] Dark mode for mermaid diagram is not readable Fix dark mode readability for mermaid diagram Sep 4, 2025
Copilot AI requested a review from horner September 4, 2025 02:02
@horner horner marked this pull request as ready for review September 4, 2025 02:04
@horner horner merged commit 3922459 into main Sep 4, 2025
@runleveldev runleveldev deleted the copilot/fix-19 branch October 14, 2025 18:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dark mode for mermaid diagram is not readable

2 participants