Overriding Symbol Styles⚡️

Webflow lets us override symbol content, but we're stuck with styling. Here is a workaround.
‍
Style overrides are only visible on live site 👀

Light mode ☀️
(default instance)

This is the default symbol style, but we can now override its styles.
Right
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
Light

Dark mode 😎
‍(overridden instance)

The class .dark has been added in override settings. The default scroll direction has also been overridden by adding .left.
Left
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
override
symbol styles
Dark

How it works?

A text block with class .override-parent can be linked to an override field then hidden.

‍

This hidden field can specify combo class names as "style overrides".

‍

Custom code will apply the specified combo class to the symbol.

‍

Each override style can be defined using a combo class — for example: create a combo class called .dark and then style the symbol to it's override style. Finally remove the .dark combo class to return the symbol to its original style.

Custom code

The code will look for the hidden override field using its class name (example .override-parent) then apply the specified combo class to its relative elements.

You can choose from three triggers:
‍
.override-parent will add the combo class to it's parent element
.override-next will add the combo class to the element next to it
.override-children will add the combo class to all children of its parent
Code can be found in Webflow designer
(paste before closing </body> tag)