Dark mode support for widget

I was wondering, is there is a way (like events) to support dark mode for figma widgets!

You need to write your own widget theme function.

Yeah! for plugins I could use the CSS variables to auto adopt to the user’s theme.

But when building a widget, how could I know if the user is in light or dark mode. One workaround I think is opening a iframe window and checking if figma-light or figma-dark class present in it.

But what happens when the user switches to other theme? How could the widget knows about this event?

Am I making sense? :smile:

Yes, to find out which theme is selected, you need to check the class name of the html tag in the iframe and send it to code.js. But I don’t think you will or can keep the iframe always open.

So I suggest you add your own theme switching function. For example, you can add a setting to the property menu or to your widget’s interface so that users can choose the theme themselves.

1 Like