Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make collector mermaid diagrams darkmode compatible #6013

Conversation

chalin
Copy link
Contributor

@chalin chalin commented Jan 21, 2025

Previews

Screenshots of darkmode fixes

Before After
image image
image image

The only caveat is that in light mode, the last two diagrams have a yellow background (all other diagrams are the same in light mode before and after), something like this:

image

Fixing this has proven tricky, and would require a change to Docsy, so that the non-dark theme chosen is base rather than default. But even then I couldn't get all of the colors for all of the diagrams to work. I'm submitting this PR because it is a good step forward, despite the yellow background.

Related:

@chalin chalin added the design/style Front-end site design / styling label Jan 21, 2025
@chalin chalin requested a review from a team as a code owner January 21, 2025 19:08
@opentelemetrybot opentelemetrybot requested review from a team and jpkrohling and removed request for a team January 21, 2025 19:08
Comment on lines -60 to -61
%% The stroke color matches the website header.
classDef default fill:#e3e8fc,stroke:#4f62ad
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/cc @tiffany76, since you chose these original color overrides if I'm not mistaken.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did - tried to match the branded colors. But I totally understand that dark mode is more important, so this change is good with me.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI, we're still quite close to brand colors for most of the diagrams. (I might have a solution to get rid of the yellow, but it'll take more work.)

@chalin
Copy link
Contributor Author

chalin commented Jan 21, 2025

Given that these are CSS and editorial changes, I'll merge now. Thanks for the review and approval @tiffany76 🙌🏻

@chalin chalin merged commit 8206ebb into open-telemetry:main Jan 21, 2025
17 checks passed
@chalin chalin deleted the chalin-im-dark-mode-for-collector-mermaid-diagrams-2025-01-21 branch January 21, 2025 19:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design/style Front-end site design / styling sig:collector
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Flowchart for collector pipeline architecture not displaying
2 participants