Low visibility of sequence diagram when using with dark UI theme

Issues
1

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.

Example

image
image.png1017×422 14 KB

Info

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

Hi Peilun,

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

1 Like
3

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!

4

Hi Takuya,

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

Looks clean and neat.

image
image.png1035×412 9.46 KB

1 Like
5

Hi Takuya,

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

6

Yeah sure!

7

landed in v3.6.0:tada: