Change background when triggering an interactive component

If you want to use interactive components for this, you need to place a background layer on each component variant. That is, in order to change the properties of an object when interacting with an interactive component, you need that object to be part of that interactive component.

You can also consider creating this behavior using the “Navigate to” action to navigate to another frame. Thus you will have:

1. A frame with a white background;
2. A frame with a black background.

Between these frames there will be an interaction with an “On click” trigger and a “Navigate to” action to navigate to a frame with a white/black background.

Not sure what you mean by ‘place a background layer on each component variant’.

If a background screen is part of the interactive component, means the entire screen becomes a component?..

2. Regarding your section, I considered that, but it’s not as smooth somehow.

This means that you need to add a new layer (background) inside the variant in order to be able to change its properties through interaction. The width and height of this layer should match the screen size.
For example:

Switch (component set)
    Off (variant)
        Switch layers
        Black background layer (W and H match screen size)

    On (variant)
        Switch layers
        White background layer (W and H match screen size)

But that doesn’t mean your screen will become a component. You only need to create an entire screen component when you want to change not only the color of the background layer, but other objects as well.

I don’t quite understand what could be the snags with the navigation between frames are. This way is much simpler and better (for this case) than using interactive components.