Material 3 builder to Anvil color scheme converter & theme tester

Show and Tell
1

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
    image
    image1754Ă—993 153 KB
  4. Copy the contents of the downloaded material-theme.json file and paste them into theme_converter/m3_themes after the “=” sign
    image
    image1742Ă—900 192 KB
  5. Open the theme_selector form and click on the “CONVERT THEMES” button.
    image
    image1541Ă—664 130 KB

    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
    image
    image1155Ă—953 85.5 KB
  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)
4 Likes