atra13
1
Mermaid Markdown Extension Dark Theme Tutorial
Problems
- As Mermaid themes itself their dark mode recognition does not work with DTs dark mode css.
- The css is embedded in the html node of every Mermaid node, so in the theming chain it comes at the very last and overwrites any changes done prior.
Solution
- Extract Mermaids css from html (I included it down below so you don’t have to).
- Put that css into your custom css theme and modify it to your wishes (you can edit the light styling too).
- In css terms this is not clean style but it gets the job done: add the
!important
property to all your changes like so: color: #fff !important;
- for dark mode use
@media (prefers-color-scheme: dark) { <your css here> }
- And you are done
.error-icon {
fill: #552222;
}
.error-text {
fill: #552222;
stroke: #552222;
}
.edge-thickness-normal {
stroke-width: 2px;
}
.edge-thickness-thick {
stroke-width: 3.5px;
}
.edge-pattern-solid {
stroke-dasharray: 0;
}
.edge-pattern-dashed {
stroke-dasharray: 3;
}
.edge-pattern-dotted {
stroke-dasharray: 2;
}
.marker {
fill: #333333;
stroke: #333333;
}
.marker.cross {
stroke: #333333;
}
svg {
font-family: "trebuchet ms", verdana, arial, sans-serif;
font-size: 16px;
}
.label {
font-family: "trebuchet ms", verdana, arial, sans-serif;
color: #333;
}
.cluster-label text {
fill: #333;
}
.cluster-label span {
color: #333;
}
.label text,
span {
fill: #333;
color: #333;
}
.node rect,
.node circle,
.node ellipse,
.node polygon,
.node path {
fill: #ECECFF;
stroke: #9370DB;
stroke-width: 1px;
}
.node .label {
text-align: center;
}
.node.clickable {
cursor: pointer;
}
.arrowheadPath {
fill: #333333;
}
.edgePath .path {
stroke: #333333;
stroke-width: 2.0px;
}
.flowchart-link {
stroke: #333333;
fill: none;
}
.edgeLabel {
background-color: #333;
text-align: center;
color: #000
}
.edgeLabel rect {
opacity: 0.5;
background-color: #e8e8e8;
fill: #e8e8e8;
}
.cluster rect {
fill: #ffffde;
stroke: #aaaa33;
stroke-width: 1px;
}
.cluster text {
fill: #333;
}
.cluster span {
color: #333;
}
div.mermaidTooltip {
position: absolute;
text-align: center;
max-width: 200px;
padding: 2px;
font-family: "trebuchet ms", verdana, arial, sans-serif;
font-size: 12px;
background: hsl(80, 100%, 96.2745098039%);
border: 1px solid #aaaa33;
border-radius: 2px;
pointer-events: none;
z-index: 100;
}
:root {
--mermaid-font-family: "trebuchet ms", verdana, arial, sans-serif;
}
1 Like
Thank you for the tutorial! A screenshot with/without this solution would be cool.
atra13
3
shure
Left is the Mermaid light theme not working with DT dark mode, right shows the styling after my overwrites.
My overwrites:
@media (prefers-color-scheme: dark) {
.edgeLabel {
background-color: #333 !important;
color: #fff !important;
}
.label {
background-color: #333 !important;
color: #fff !important;
}
.arrowheadPath {
fill: #ddd !important;
stroke: #ddd !important;
}
.path {
stroke: #ddd !important;
}
.cluster rect,
.node rect,
.node circle,
.node ellipse,
.node polygon,
.node path {
fill: #333 !important;
stroke: #aaa !important;
}
.marker {
fill: #ddd !important;
stroke: #ddd !important;
}
.marker.cross {
stroke: #ddd !important;
}
}
2 Likes
Thanks for sharing this. I’m sure it will be useful to people diagramming in Markdown in DEVONthink.