search

nocode-js / sequential-workflow-designer

Customizable no-code component for building flow-based programming applications or workflow automation. 0 external dependencies.
https://nocode-js.com/
MIT License
1.08k stars 111 forks source link

Invert SVC icon color #124

Closed tskomudek closed 8 months ago

tskomudek commented 8 months ago

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 8 months ago

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 8 months ago

Hi Bart,

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

Best

Tilo