Replacing Material Design 3 colors with the colors of Legacy Material Design

Anvil Q&A
1

Hello Friends:

I’m not a color design person (or HTML or CSS person either), so I worked with and complemented the stock colors included with Anvil’s previous Legacy Material Design.

I’m guessing Material Design 3 has visual improvements (and the look & feel of things are headed that way). So, how can I use Material Design 3 but – step-by-step (like cut & paste) – wholesale replace its colors with the colors of Legacy Material Design?

I’m fine with the Legacy Material Design color set, and don’t want to figure out colors and complementary colors all over again. :slight_smile:

Thank you!

1 Like
2

old material design app.theme_colors :

{'Primary 700': '#1976D2', 'Black': '#000000', 'Secondary 500': '#FF9800', 'Gray 900': '#212121', 'Gray 100': '#F5F5F5', 'Gray 300': '#E0E0E0', 'Gray 800': '#424242', 'White': '#FFFFFF', 'Gray 200': '#EEEEEE', 'Gray 600': '#757575', 'Primary 500': '#2196F3', 'Secondary 700': '#F57C00', 'Gray 50': '#FAFAFA'}

material design 3 app.theme_colors :

{'Secondary Container': '#E8DEF8', 'Tertiary Container': '#FFD8E4', 'On Background': '#1C1B1F', 'Disabled Container': 'rgba(28, 27, 31, 0.12)', 'On Tertiary': '#FFFFFF', 'Outline': '#79747E', 'On Primary Container': '#21005E', 'Dark Overlay 2': 'rgba(30, 25, 43, 0.12)', 'On Secondary': '#FFFFFF', 'On Secondary Container': '#1E192B', 'Primary Container': '#EADDFF', 'Secondary': '#625B71', 'On Surface Variant': '#49454E', 'Surface Variant': '#E7E0EC', 'Light Overlay 1': 'rgba(255, 255, 255, 0.08)', 'Tertiary': '#7D5260', 'Light Overlay 2': 'rgba(255, 255, 255, 0.12)', 'Primary Overlay 2': 'rgba(103, 80, 164, 0.08)', 'Primary': '#6750A4', 'On Tertiary Container': '#370B1E', 'Primary Overlay 3': 'rgba(103, 80, 164, 0.11)', 'Primary Overlay 1': 'rgba(103, 80, 164, 0.05)', 'On Surface': '#1C1B1F', 'On Disabled': 'rgba(28, 27, 31, 0.38)', 'Error': '#B3261E', 'Background': '#FFFBFE', 'Dark Overlay 1': 'rgba(30, 25, 43, 0.08)', 'Surface': '#FFFBFE', 'On Primary': '#FFFFFF'}

They don’t quite match up in terms of what the colors are called, so you’d have to pick and choose your own mapping with a one to many relationship of old to new.

This was a feature added so you can change the app colors dynamically with code, it’s accessible by changing the values of app.theme_colors which is a dictionary like object with keys as shown above.

You can also change complete color schemes by going to “Themes” → “Colour Scheme” and clicking on the dropdown there:

image
image298×588 23.2 KB

3 Likes
3

Hi again @ianb
I’m reading your reply diligently right now to make the needed changes. As always, thank you! :blush:

4

You also have me thinking now, you could easily capture all of the color schemes in code just using print(app.theme_colors) (as I did in the above post) , and create a dropdown allowing users to change the entire color scheme of your entire app at will to their own preferences, if one were inclined to do so…

2 Likes
5

This answer saved my life. :grinning_face_with_smiling_eyes:

I updated the theme manually for now (via your drop-down example), and will programmatically implement those changes when I have more time.

Do you happen to know which dict key and/or self.x attribute applies to the very top-horizontal bar color, which in the MD3 theme defaults to white (or maybe transparent), but was previously the primary-500 color of the Legacy MD theme (which was royal blue-ish)? I’m trying to determine the attribute this can be used to set that color (… or perhaps it’s set in the Theme or CSS file, because that was out-of-the-box in Legacy MD). Thank you!

1 Like
6

Ah, okay. Do you have a small snippet for that capture? I stepped away from Anvil for a bit, and am forgetting where the app attribute is derived from. I’ll come back to me soon. :slight_smile:

7

In the end, I’m going back to Legacy MD. @anvil really should have offered a drop-in replacement with the legacy coloring, because there’s more than meets the eye as you design your next app with MD3, (for us Python-only guys who don’t want to (or can’t) deal with too much styling – then the promise of “it’s just Python” is broken). :no_mouth:

8

They are not really compatible design philosophies, the “Old style” is what the wider internet referred to as a set of principles called “Material Design”
Use of shadows to define hierarchy**, fewer bold colors that don’t or can’t bleed together etc., “realistic” objects that abstract real world objects (if it looks like it can do X it might/should be able to do X etc.)

M3 or Material Design 3 was formerly called Material You.
It is supposed to have more colors, and have the optional ability to match the users operating system color themes if you want to so that nothing becomes to jarring in the transition to using your app. (The colors across your total experience using a device do not significantly change from your user preferences)

They also added tons of new features, like more hovering objects to replace some bar menus.

Anyway, there is no such thing as a one-to-one color scheme update, you would have to decide yourself to “copy” some color choices from Material Design over to M3, since the “lots of different colors” is part of the design principles of M3, you’d have to decide how you want to change that to make it more uniform.
I think what I am trying to say is that you are asking for someone to complete some very subjective work that in the end violates a bunch of new design standards. It could never be done in a way that makes everyone happy because it is so subjective, so its not really an easy ask.

Old Principals:

New M3 Principals:
https://www.designware.io/blog/material-design-3

** as opposed to older flat-centric design principles like metro, or old flat skeuomorphism etc.

5 Likes
9

Thank you for the explanation and tutorial brother. I understand and appreciate it. :slight_smile:

1 Like