The colors of the marker clusters can be changed via CSS only. Please add the following CSS styles to the end of your theme´s style.css and adjust the colors accordingly.
A tool for getting the color values in rgba can be found at https://www.hexcolortool.com/ – please be aware that the last number is the transparency value, reaching from 0 to 1:
.marker-cluster-small {
background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 0.6);
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6);
}
.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6);
}
As an alternative you can also use hex color codes like #C0C0C0.
If on the other hand you want to add a custom icon below a cluster, see the following example as reference (use your own URLs to icons please):
.marker-cluster-small::after {
content: "";
display: inline-block;
height: 36px;
width: 36px;
background: url('https://www.mapsmarker.com/wp-content/uploads/maps-marker-pro/icons/hospital-building.png') no-repeat;
}
Example output:
