nocode-js/sequential-workflow-designer

Invert SVC icon color

Closed this issue · 2 comments

tskomudek commented

Hi Bart,

i'm currently into styling and while i've found many things that can be customized,
i may have overlooked this one: Is there a way to set the stroke color for the svg-icons ?

image

Thank you

Tilo

b4rtaz commented

Hello @tskomudek!

The designer renders icons as <image> on the canvas and <img> in the HTML. Therefore, we cannot change colors as easily as we can for other elements. Especially since icons may be raster graphics. That what you can do is prepare your images adjusted to your theme. If you are using multiple themes, then you need to create the same icon in multiple variants.

function iconUrlProvider(step) {
  if (step.type === 'sendEmail') {
    if (theme === 'light') return './icon-send-email-light.svg';
    if (theme === 'dark') return './icon-send-email-dark.svg';
  }
  // ...
}

Another possibility is to use CSS to invert colors of image by using filters. But this feature works only in modern browsers.

.sqd-theme-dark .sqd-toolbox-item-icon-image,
.sqd-theme-dark .sqd-workspace-canvas image {-webkit-filter: invert(100%); filter: invert(100%);}
tskomudek commented

Hi Bart,

thank's once more, i'll go with the filter approach for now.

Best

Tilo

  • 👍1