material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
416 stars 30 forks source link

Swap doesn't update Material 3 Design Kit components properly #351

Open OnkelTem opened 3 weeks ago

OnkelTem commented 3 weeks ago

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?

HZRDUS commented 3 weeks ago

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.