Material 3 builder to Anvil color scheme converter & theme tester

I was trying out how different color themes would suit my app and I got tired of copy pasting all the values to the anvil editor and manually converting to RGBA to add opacity.

So I made a module that does this automatically and enables you to more easily and quickly test different m3 color themes on your app.

Clone link

How to use

  1. Copy the theme_tester package to your app and add the theme_selector form to your navigation
    image
  2. Go to Material Theme Builder and create an m3 theme by specifying a seed/primary color
  3. Download the theme as JSON from the export options
  4. Copy the contents of the downloaded material-theme.json file and paste them into theme_converter/m3_themes after the “=” sign
  5. Open the theme_selector form and click on the “CONVERT THEMES” button.

    This will convert all variations of the M3 theme variations (light, light-medium-contrast, light-high-contrast, dark, dark-medium-contrast, dark-high-contrast) to the format expected by Anvil. These six variations will now appear on the Select theme dropdown
  6. Try out the different variations from the Select theme dropdown and see how your app looks. The theme colors will also be displayed on the form
  7. Note that changes to the theme from the Select theme dropdown will only last for your session. If you want to permanently change your app’s theme - copy the displayed theme colors into your app’s color scheme.
    (Note: the values are already in the same order as the color scheme editor and the missing M3 colors that Anvil uses are already included in the output)
8 Likes

Cool this looks really useful! Is the clone link still up? Im on my phone so possible its not working due to that. Will try again tmrw!