material-theme-builder icon indicating copy to clipboard operation
material-theme-builder copied to clipboard

Swap doesn't update Material 3 Design Kit components properly

Open OnkelTem opened this issue 1 year ago • 2 comments

Let's prepare our theme using Material Theme Builder:

image

this is my settings:

image

Now let's import the Navigation bar component:

image

Now let's swap its colors with our theme's ones. So I'm about to click the (1) button:

image

Result:

image

Now. Let's change to "Selected" property of the second button "Saved":

image

Notice that:

  1. The Selected property is now ON
  2. But the color is the old one, so it was not updated.
  3. 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?

OnkelTem avatar Oct 26 '24 13:10 OnkelTem

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.

HZRDUS avatar Oct 31 '24 14:10 HZRDUS

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
Screenshot 2025-01-01 at 12 14 25 PM Screenshot 2025-01-01 at 12 13 55 PM

This could be documented a lot better :(

etlhsu avatar Jan 01 '25 20:01 etlhsu