Change text color in symbol?

Hi Everyone

Is it possible to change the text color in a symbol?

Originally the symbol was meant for a white background(see image). Now I want to use that same symbol but on a dark background - however, the text doesn’t show anymore, because it needs to be white. Is there a way to change the text color in a symbol?

Examples below:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Unfortunately I don’t believe Symbol overrides support this feature currently, however Webflow recently announced big changes coming to Symbols that include these types of changes and more in future updates.

As far as your issue, without seeing how the two instances are being used my first thought is that you could use a somewhat “hacky” mix-blend-mode: difference on your text. As of now it’s got ~93% browser support however keep in mind that doesn’t include IE11 (which most developers aren’t really supporting now anyways).

If you need something with more support (and you don’t mind modifying your card design slightly) you could always add a white background to the text area which would only display when it’s shown on non-white backgrounds.

I didn’t think it was possible, because I tried e everything, but wanted to make sure. I really appreciate the feedback and providing the instances. I’ll give the mix-blend a try. I don’t want to add a white background, it would look odd I think.

Really appreciate it :slight_smile:

1 Like