Pseudo-Darkmode für Mermaid-Diagramme

Mermaid ist eine Javascript-Bibliothek zur Erstellung von Diagrammen und Visualisierungen aus Text in einem ähnlichen Format wie Markdown. Das Schöne an Mermaid ist die Tatsache, dass die Diagramme als Textdateien gespeichert werden können und somit leicht versioniert und bearbeitet werden können. Zur Visualisierung meiner League of Legends Spielstatistiken habe ich Mermaid eingebunden. In diesem Beitrag zeige ich, wie ich Mermaid in einen Pseudo-Dunkelmodus versetzt habe.

Warum ich einen Blogpost dazu verfasse? Mermaid unterstützt von Haus aus einen Darkmode, leider ist der etwas fehleranfällig und ist vor allem in Diagramm im Beta-Stadium nur mangelhaft umgesetzt. Insbesondere MobileSafari war eine große Herausforderung.

Das Ergebnis von mehreren Stunden Recherche und Wutausbrüchen:

@media (prefers-color-scheme: dark) {
  .mermaid svg {
    -webkit-filter: invert(1);
            filter: invert(1);
        /* Funktioniert leider nicht in Safari */
        /* path, text, rect, circle {
            -webkit-filter: invert(1);
            filter: invert(1); 
        } */
  }
}

Da die Mermaid Default-Theme auf hellen Grund optimiert ist, reicht es aus, das gesamte SVG-Element zu invertieren. Dadurch werden alle Farben umgekehrt, was in einem dunklen Modus zu besseren Kontrasten führt.

Ideal wäre es, nicht das gesamte SVG zu invertieren, sondern nur die spezifischen Elemente wie Pfade, Texte, Rechtecke und Kreise. Allerdings funktionierte dies in meinem Fall nicht in Safari (macOS / iOS), weshalb ich mich für die einfachere Lösung entschieden habe.

Veröffentlicht am: 08.12.2025