Prerequisites

Where to start?¶

So, you came here to read how to design your own theme. That's good!

There are two prerequisites to create a Material 3 theme and convert it to an Home Assistant dark / light theme.

• Google has made a Material Theme Builder plugin on its Figma platform. You can make a free account which is enough to create Material 3 themes.
• You need the Swiss Army Knife custom card installed, as this custom card is used to convert the Figma export.

Step 1: Create a free Figma Account¶

So head over to the site, and Sign up!

Step 2: Install the Material Theme Builder plugin¶

From the menu, go to "Plugins" and "Browse plugins in Community"

Now search for the material theme builder...

If you made no typos, you will see the Material Theme Builder selected. Click on this one to install the plugin.

Now click install and the plugin is installed, You made it!

You need the Swiss Army Knife custom card¶

This card is (ab)used to convert the resulting tokens file.