Skip to content

Introducing 22 Example themes

I've created several themes based on the Material 3 concepts and Material 3 implementation to give you an idea of ​​the looks & possibilities:

  • 10 themes are created with the 'Dynamic' feature of the Figma Material Theme Builder, which uses an image to determine the colors.
  • The other 12 themes are created using the 'Custom' function of the Figma Material Theme Builder, where I specified the primary color. I used the rainbow colors from the website CIElab.io: red, volcano, orange, gold, yellow, lime, green, cyan, blue, geek blue, purple, and magenta.

The steps to create these themes are described in "Design your Own".

You can install each example using HACS or manually.

At this moment not all examples are already available in GitHub, nor in HACS

You can see it on the example page where "No repository found" is displayed.

Examples in order of the color wheel

All examples show example view #12 of the Swiss Army Knife custom card:

  • Examples created with the 'Dynamic' theme builder feature have the prefix 'D'
  • Examples created with the 'Custom' theme builder feature have the prefix 'C'.

You may see some similarities between the examples below as a result of the Material 3 calculations 😄 The Material 3 color picker can create the same primary color, although different colors are picked by the user. I have shown some examples here

Light variant Dark variant
Example c01, Red Light: m3-example-c01-light-png Example c01, Red Dark: m3-example-c01-dark-png
Example d08, Red Light: m3-example-d08-light-png Example d08, Red Dark: m3-example-d08-dark-png
Example c02, Volcano Light: m3-example-c02-light-png Example c02, Volcano Dark: m3-example-c02-dark-png
Example d05, Brown Light: m3-example-d05-light-png Example d05, Brown Dark: m3-example-d05-dark-png
Example c03, Orange Light: m3-example-c03-light-png Example c03, Orange Dark: m3-example-c03-dark-png
Example c04, Gold Light: m3-example-c04-light-png Example c04, Gold Dark: m3-example-c04-dark-png
Example d03, Porcupine Light: m3-example-d03-light-png Example d03, Porcupine Dark: m3-example-d03-dark-png
Example c05, Yellow Light: m3-example-c05-light-png Example c05, Yellow Dark: m3-example-c05-dark-png
Example d07, Dark Olive Green Light: m3-example-d07-light-png Example d07, Dark Olive Green Dark: m3-example-d07-dark-png
Example c06, Lime Light: m3-example-c06-light-png Example c06, Lime Dark: m3-example-c06-dark-png
Example c07, Green Light: m3-example-c07-light-png Example c07, Green Dark: m3-example-c07-dark-png
Example d10, Green Light: m3-example-d10-light-png Example d10, Green Dark: m3-example-d10-dark-png
Example d02, Cadmium Green Light: m3-example-d02-light-png Example d02, Cadmium Green Dark: m3-example-d02-dark-png
Example c08, Cyan Light: m3-example-c08-light-png Example c08, Cyan Dark: m3-example-c08-dark-png
Example d06, Teal Blue Light: m3-example-d06-light-png Example d06, Teal Blue Dark: m3-example-d06-dark-png
Example c09, Blue Light: m3-example-c09-light-png Example c09, Blue Dark: m3-example-c09-dark-png
Example d09, Indigo Light: m3-example-d09-light-png Example d09, Indigo Dark: m3-example-d09-dark-png
Example c10, Geek Blue Light: m3-example-c10-light-png Example c10, Geek Blue Dark: m3-example-c10-dark-png
Example d01, Purple Light: m3-example-d01-light-png Example d01, Purple Dark: m3-example-d01-dark-png
Example c11, Purple Light: m3-example-c11-light-png Example c11, Purple Dark: m3-example-c11-dark-png
Example d04, Magenta Light: m3-example-d04-light-png Example d04, Magenta Dark: m3-example-d04-dark-png
Example c12, Magenta Light: m3-example-c12-light-png Example c12, Magenta Dark: m3-example-c12-dark-png
Back to top