Create Material 3 Theme

Step 1: Open the plugin¶

Open the Material Theme Builder plugin from the menu

You will be welcomed with the plugin popup. Click on "Get started"

Step 2: Create theme based on image¶

The builder defaults to the Dynamic mode where you can use an image to create a theme. Remember that only ONE (1) source color will be derived from the image.

In this case, I used another theme to create this dynamic theme...

Dynamic example

Step 3: Look at the result¶

The Material Theme Builder will show the result on the background. This may take some time depending on your PC, as this is all done in the browser!

First, the full result:

And from left to right some details, starting with the Tonal Palettes.

Then the Light and Dark themes.

And finally the surfaces. The typography is NOT used for Home Assistant.

Step 4 (Final): Export the DSP file¶

Once you are ready, go to the "Custom" tab of the Material Theme Builder, and click the "Export" button on the bottom, and select "Export Material Tokes (DSP)", and save the resulting ZIP file on your computer.