New Member

Support for blend modes with variables

Forum|Forum|2 years ago
December 6, 2023
22 replies
1647 views

Our design system leverages mix blend modes for hover states so our icon buttons appear on any background color and remain accessible, without needing separate hover–on-primary, hover–on-secondary, etc tokens. We use multiply for light theme, and screen for dark theme. It would be really awesome if we could apply blend modes directly to the color variables, OR support blend modes as variables in general.

Our current work around is to apply the blend mode directly on each component variant, but this requires us to define separate light and dark theme variants. would be great if we could use variables here to have it automatically switch between light/dark.

Share an idea

Show previous replies

Greg_Wolff

New Member

+1 to blend modes in variables, can’t do light / dark modes without being able to switch the blend mode.

ckeramidas

New Participant

This is incredibly important for theming dark/light modes, which feels like a basic use case for variables.

eleanzhukova

@dvaliao This topic “Support for blend modes with variables” was created a half a year ago, but nothing has been changed. It’s a bug, because when you create a color with a blend mode, then define it as a variable, this variable loses the blend mode. At that moment you have two different values of this variable. First one, a frame with color from which you put it in Variables. Second one, all new frames with the same name of the color, but with different value, because it had lost the blend mode

Please do something with this issue! 🙏

a5df3ae8c6d95a8cac864e6ddd489b2e98da78f4.zip

Dan_Peterson

New Participant

I actually noticed that the built-in iOS components seem to have different blend modes in their light mode vs dark mode. No idea how this is accomplished unless they just have access to features that normal folks do not.

For example if you place the Sheet - iPhone component and have it’s variable mode set to light and then break the instance, you’ll see the top fill color uses a Color Dodge blend mode, but if you set it to dark mode, the top fill color is set to Overlay. Although neither are actually using variables when broken. Very odd, but would love to be able to do this as well.

m.zelis

New Member

Figma could allow us(me) to input the CSS code into the color picker modal when creating the variable. Also, being able to use variable in that would be helpful. Right now the behavior is to overwrite the input with an rgba value.

eg. my input would be: color-mix(in srgb, var(–core-color1) 92.857%, var(–core-color2))

Also, also, it is important to use the colormix function for color instead of gradient. one cannot use gradients for text in the wild and Dev is left to interpret or I give them a hex which defeats the purpose.

Morgana_D_Almeida_Ribeiro

New Member

Also needed for us, for Dark and Light mode version of hover and active states on Buttons.
And also, I checked, the workaround of assigning a blend mode to a color before creating a variable doesn't work.

Jeremy_Paul1

New Member

I actually noticed that the built-in iOS components seem to have different blend modes in their light mode vs dark mode. No idea how this is accomplished unless they just have access to features that normal folks do not.

For example if you place the Sheet - iPhone component and have it’s variable mode set to light and then break the instance, you’ll see the top fill color uses a Color Dodge blend mode, but if you set it to dark mode, the top fill color is set to Overlay. Although neither are actually using variables when broken. Very odd, but would love to be able to do this as well.

Can confirm, this is even more true these days with iOS 26, Apple changes their blending modes on the fly (from ‘Plus darker’ to ‘Plus lighter’ for example). Need a fix to make native components work!