I want to set up 2 different Mermaid xy chart back ground by light mode and dark mode

I want to set up 2 different Mermaid xy chart back ground by light mode and dark mode.
How cand I do it?

I used below code but it doens’t work

/* Styles for Mermaid in Light Mode */
.theme-light .mermaid {
    /* Example: Set a light background for diagrams in light mode */
    background-color: #FFFFFF;

}

/* Styles for Mermaid in Dark Mode */
.theme-dark .mermaid {
    /* Example: Set a dark background for diagrams in dark mode */
    background-color: #0D1117;

}

Please help

Can you share the xychart (in a code block) so folks have something to try that matches what you are looking to style?

Also, have a look at the topic below. There may be something you can use in there.

1 Like