Share your CSS

Lounge
149

Had an idea to check GitHub for Mermaid for theme files

I hacked about at the css file for flowcharts and came up with:

div.mermaid {
    background-color: #1D2024 !important;
    /* sets full background colour to Joplin Dark Theme colour */
    }
:root {
    --mermaid-font-family: "Bahnschrift SemiCondensed" !important;
    /* sets mermaid font variable */
    }
.label {
  font-family: var(--mermaid-font-family);
  color: black !important;
}

.label text {
  fill: black !important;
}

.node rect,
.node circle,
.node ellipse,
.node polygon,
.node path {
  fill: white !important;
  stroke: white !important;
  stroke-width: 1px;
}

.node .label {
  text-align: center;
}
.node.clickable {
  cursor: pointer;
}

.arrowheadPath {
  fill: white !important;
}

.edgePath .path {
  stroke: white !important;
  stroke-width: 1.5px;
}

.flowchart-link {
  stroke: white !important;
  fill: none;
}

.edgeLabel {
  background-color: #1D2024 !important;
  rect {
    opacity: 0.5;
  }
  text-align: center;
  color: white !important;
}

This means that flowcharts that currently look like this:

current
current1414×331 12.9 KB

Change to this:

modified
modified1414×331 13.3 KB

If someone mentions that this has been posted elsewhere on the forum I will scream. Also I do not know why I persisted with this because I do not even use a dark theme!

Hope it is a useful starter for someone out there…

8 Likes