Colors

Using custom colours

Google Material design uses colours to express and make it's design a lot more "funky" so does the Material Components library.

Using: https://m3.material.io/theme-builder, you can generate your own set of colours, please note that when downloading the CSS from the material theme builder it will be different than the Material Components Colour Generator.

Colour Generator	Material Theme Builder
--md-sys-color-on-tertiary-container: #c3e8fe;	--md-sys-color-on-tertiary-container-dark: #c3e8fe;

Please make sure when using custom colours, that your CSS will look exactly as the one used by the Colour Generator.

Generating Colours with the generator

Google Material design uses colours to express and make it's design a lot more "funky" so does the Material Components library.

The Material Components Library has a Generator that creates these colours automatically for you, taking the colour from the Theme Meta-Tag and turning that into Material Design Colours.

All you need to do for this is add the generator to your HTML file set a Theme Meta-Tag and that's it.

Below you can see on how to import the Colour Gen:

<script type='module' src="Material_Components/MaterialColorGen.js></script>

The colour generator also creates a variable called '--md-sys-color-source'.

This is the colour used in the init function to set the themeColor.