Swap doesn't update Material 3 Design Kit components properly
Let's prepare our theme using Material Theme Builder:
this is my settings:
Now let's import the Navigation bar component:
Now let's swap its colors with our theme's ones. So I'm about to click the (1) button:
Result:
Now. Let's change to "Selected" property of the second button "Saved":
Notice that:
- The Selected property is now ON
- But the color is the old one, so it was not updated.
- And indeed, the "Selection colors" list shows that two colors were not swapped.
Is it by design? How to effectively swap colors or is it actually impossible and then... what is this all about then?
Unfortunately, if using the UI kit, you need to manually update the colors for each variant. Be careful with this route however as library updates will override your color selections or could override other local changes. You can instead duplicate the Material 3 Design Kit community file, and the plugin will update those components. You could also do what I did and copy certain components that I want from the duplicated file into my own file. That way you don't have a large file with a lot of components you may not need.
I found that manually setting an element's fill to any specific Material style allows it to properly be updated using the "Color mode swap" feature:
| Incorrect | Correct |
|---|---|
This could be documented a lot better :(