De kleurenfilter van het Starter pakket ondersteunt standaard de volgende basiskleuren: blauw, bruin, geel, oranje, grijs, groen, paars, rood, roze, wit en zwart.

Het is mogelijk om extra kleuren toe te voegen aan Standard Site Search. Dit kan via de volgende stappen:

1. Voeg het kleuren script toe:

var customColors = {

  kleurnaam: "waarde",

};


(function (d, c) {

  const s = document.createElement("style");

  s.type = "text/css";

  Object.keys(c).forEach((n) => {

    s.innerHTML += `.twn__facet.is-color .twn-is-color__${n} .twn__glyph-inner { background-color: ${c[n]}; }`;

  });

  document.head.appendChild(s);

})(document, customColors);

2. Breid het customColors object in het script uit met de gewenste kleuren:

Het object customColors bevat de namen van de gewenste kleuren en de bijbehorende waardes. De naam moet hierbij gelijk zijn aan de naam van de optie in de filter.

Verschillende formaten worden als kleurwaarde ondersteund. Het is mogelijk om bijvoorbeeld een hexadecimale of rgb notatie te gebruiken.

Een voorbeeld van dit object zou er als volgt uit kunnen zien:

var customColors = {

  goud: "#FFD700", // Hexadecimale notatie

  zilver: "#C0C0C0",

  brons: "rgb(205, 127, 50)", // Rgb notatie

};