Low visibility of sequence diagram when using with dark UI theme

Sharing a workaround

When drawing sequence diagram with dark UI theme, it’s really difficult to see the words and lines in black.
So I made a quick workaround by adding settings in styles.less.

.editor {
  // Set sequence-diagram background color for dark UI theme
  .mde-preview .sequence-diagram svg {
	background: #FEE;

For those who don’t acquaint oneself with CSS, please just change this HEX value and save styles.css. Inkdrop will change the background color of sequence diagram immediately and you could see if it’s your preferred color.



  • Platform: (Windows)
  • Platform version: (10)
  • App Version: (4.5.2)
  • Plugin: (2.0.1)
1 Like

Hi Peilun,

That’s a nice hack! I’d like to port it into the plugin :slight_smile:

1 Like

Landed in v2.0.2 :tada:
Added a CSS like so:

body[class*="dark-ui"] {
  .mde-preview .sequence-diagram svg {
    background: rgba(255, 255, 255, 0.7);

Thanks again for the report!

Hi Takuya,

It’s my honor that you adopted my idea!!!

Looks clean and neat.

1 Like

Hi Takuya,

I noticed that mobile apps have the same issue.
It will be good to have mobile apps revised next time.

Yeah sure!

landed in v3.6.0:tada: