Skip to content

Fix Mermaid diagrams illegibility in dark mode on User Journeys page #1066

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.

Sign up for GitHub

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

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
+112 −0
Draft

Fix Mermaid diagrams illegibility in dark mode on User Journeys page #1066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
caf84c6
Initial plan
Copilot Jul 13, 2025
b41e502
Fix Mermaid diagrams dark mode visibility issue
Copilot Jul 13, 2025
acf0f44
Refine Mermaid dark mode CSS fixes and add comprehensive text visibil…
Copilot Jul 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions docs/content/explanation/journeys.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
Re: "do workflows need to know NMDC specifics", I've drafted a set of user journey diagrams with
"Workflow" and "NMDC" as actors.

!!! tip "Viewing diagrams in dark mode"
If you're having trouble viewing the diagrams below in dark mode, you can switch to light mode using the theme toggle in the top navigation bar.


The first, "Keep NMDC in the know", is the current intended Workflow executioner journey, and is
implemented by the NMDC Runtime:
Expand Down
108 changes: 108 additions & 0 deletions docs/content/stylesheets/extra.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,4 +54,112 @@
from the words surrounding them. */
span.term {
font-variant: small-caps ;
}

/* Fix Mermaid diagrams in dark mode */
[data-md-color-scheme="slate"] .mermaid {
background-color: var(--md-default-bg-color);
border-radius: 0.1rem;
padding: 1rem;
}

[data-md-color-scheme="slate"] .mermaid svg {
background-color: var(--md-default-bg-color);
}

/* General text visibility fixes for dark mode */
[data-md-color-scheme="slate"] .mermaid text {
fill: var(--md-default-fg-color) !important;
}

[data-md-color-scheme="slate"] .mermaid .actor {
fill: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .mermaid .actor-line {
stroke: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .mermaid .messageLine0,
[data-md-color-scheme="slate"] .mermaid .messageLine1 {
stroke: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .mermaid .messageText {
fill: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .mermaid .labelText {
fill: var(--md-default-fg-color);
}

/* Journey diagram specific fixes */
[data-md-color-scheme="slate"] .mermaid .section0,
[data-md-color-scheme="slate"] .mermaid .section1,
[data-md-color-scheme="slate"] .mermaid .section2,
[data-md-color-scheme="slate"] .mermaid .section3 {
fill: var(--md-default-bg-color);
stroke: var(--md-default-fg-color);
stroke-width: 1px;
opacity: 0.8;
}

[data-md-color-scheme="slate"] .mermaid .task0,
[data-md-color-scheme="slate"] .mermaid .task1,
[data-md-color-scheme="slate"] .mermaid .task2,
[data-md-color-scheme="slate"] .mermaid .task3 {
fill: var(--md-accent-fg-color);
stroke: var(--md-accent-fg-color);
stroke-width: 1px;
opacity: 0.8;
}

[data-md-color-scheme="slate"] .mermaid .taskText0,
[data-md-color-scheme="slate"] .mermaid .taskText1,
[data-md-color-scheme="slate"] .mermaid .taskText2,
[data-md-color-scheme="slate"] .mermaid .taskText3 {
fill: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .mermaid .active0,
[data-md-color-scheme="slate"] .mermaid .active1,
[data-md-color-scheme="slate"] .mermaid .active2,
[data-md-color-scheme="slate"] .mermaid .active3 {
fill: var(--md-primary-fg-color);
stroke: var(--md-primary-fg-color);
stroke-width: 1px;
opacity: 0.8;
}

[data-md-color-scheme="slate"] .mermaid .activeText0,
[data-md-color-scheme="slate"] .mermaid .activeText1,
[data-md-color-scheme="slate"] .mermaid .activeText2,
[data-md-color-scheme="slate"] .mermaid .activeText3 {
fill: var(--md-primary-bg-color);
}

[data-md-color-scheme="slate"] .mermaid .done0,
[data-md-color-scheme="slate"] .mermaid .done1,
[data-md-color-scheme="slate"] .mermaid .done2,
[data-md-color-scheme="slate"] .mermaid .done3 {
fill: var(--md-default-fg-color);
stroke: var(--md-default-fg-color);
stroke-width: 1px;
opacity: 0.6;
}

[data-md-color-scheme="slate"] .mermaid .doneText0,
[data-md-color-scheme="slate"] .mermaid .doneText1,
[data-md-color-scheme="slate"] .mermaid .doneText2,
[data-md-color-scheme="slate"] .mermaid .doneText3 {
fill: var(--md-default-bg-color);
}

/* Additional text elements that might need fixing */
[data-md-color-scheme="slate"] .mermaid .titleText {
fill: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .mermaid .sectionTitle {
fill: var(--md-default-fg-color);
}
1 change: 1 addition & 0 deletions docs/mkdocs.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,4 +122,5 @@ plugins:
- mermaid2:
arguments:
securityLevel: 'loose'
theme: neutral
Copy link
Collaborator

@eecavanna eecavanna Jul 13, 2025

Choose a reason for hiding this comment

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

As a reminder, this configuration parameter may be overridden in the docs repository (that is where this documentation content gets built into a web page and published to GitHub Pages).

- mkdocs-jupyter