Automatic Mermaid Theming

New request (hopefully a real one this time)! :flushed:

The inline diagrams look great in light mode:

But are pretty unreadable in dark mode (my preferred setting):

Is there any possibility to make the lines and text white in dark mode (and shift the other colours to be darker to increase legibility)?

2 Likes

You can try to add this line above:

%%{init: {'theme':'dark'}}%% and there are more themes on Theme Configuration | Mermaid

3 Likes

Worked like a charm—thank you! :slightly_smiling_face:

1 Like

@Tobias Would it be possible to add some “magic” behind-the-scenes in Supernotes, so that adding %%{init: {'theme':'dark'}}%% isn’t necessary, and switching back and forth between light and dark mode just works?

Hi @JamesT, on it, we’ll see what we can do :slight_smile:

And thanks for mentioning that workaround in the meantime @isaiur, great idea!

1 Like

Finally got around to doing this in Supernotes 3.1.8. The solution we went with is a bit more hacky than using native Mermaid themes, in the interest of getting the best possible performance. Please let us know if you have any issues with dark mode diagrams and we can improve further.

@Connor It works flawlessly and looks incredible! :heart_eyes:

Thank you! :heart:

1 Like