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
- Copy the theme_tester package to your app and add the theme_selector form to your navigation
- Go to Material Theme Builder and create an m3 theme by specifying a seed/primary color
- Download the theme as JSON from the export options
- Copy the contents of the downloaded material-theme.json file and paste them into
theme_converter/m3_themes
after the “=” sign
- 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 theSelect theme
dropdown - 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
- 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)