Mix blend mode on top of multiple elements

Support
#1

Hi there. I wish to obtain a color of my toggle in the header menu that will change subject to the background so it remains visible at darker background colors. I have tried to apply mix-blend-mode difference to the text element as well as the underlying container and bar. But it doesn’t work. As a matter of fact, when applying mix-blend-mode: difference to the bar, the toggle icon is hidden. Would you have any hints? Thanks.

#2

Hello @nblund,

Please use the Backdrop filter instead:

Screen Shot 2021-12-20 at 11.00.12 AM
Screen Shot 2021-12-20 at 11.00.12 AM620×800 47.2 KB

Hope this helps.

#3

Thanks, but the best backdrop effect I can achieve with black burger icon on black background is not that good - then I might as well just add a background-color. So, if possible I would like to apply the mix-blend instead. I can see here: Mix-blend-mode that it should be possible by setting mix-blend difference on the parent element as well, but it doesn’t work. Any suggestions?

#5

Hi @nblund,

By withdrawing the post, I believe you already have resolved the issue. If the issue still existed, you can let us know.

Thanks.

#6

Hi again. I am not sure how that happened… I didn’t want to withdraw the post and would still like to hear your suggestions as to how to solve the issue. Thanks.

#7

Hello @nblund,

Did you apply the Mix-Blend-Mode to the Bar element? It must have a background color before it can take effect. When the background color is transparent, nothing will work because there are no colors to blend.

Hope this helps.

#8

Hi again. Yes - as a matter of fact (as you may recall) I tried multiple combinations of adding Mix-Blend-Mode to the element and 1 respectively 2 parent elements. This should work according to a Themeco answer in another post in this forum. I am assuming it should work when a parent element background changes to say black upon scroll.

#9

Hey @nblund,

There’s currently a known case regarding Mix Blend Mode that is currently being investigated. For now, please follow the solution suggested here Pro 5.0.8 Bug? - Text - Color Dodge reverting to not active

Thanks.

#10

Okay. Thanks. Anywhere I can follow progress on the Mix Blend Mode case?

#11

Hi @nblund,

Unfortunately, there is no option for tracking the progress on that. I would suggest you stay tuned for the succeeding theme versions.

Thanks

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.