Les couleurs et dimensions du champ de recherche sont définies par des propriétés personnalisées CSS, avec des valeurs par défaut claires et sombres.

Mode sombre

Le mode sombre suit la préférence du système, sauf si l’élément racine porte un attribut data-theme, comme le fait le sélecteur de thème de cette démo : essayez-le avec le bouton à côté du champ de recherche.

Propriétés personnalisées

Surchargez les propriétés personnalisées dans votre propre feuille de style, par exemple pour utiliser la couleur d’accent de votre site :

:root {
  --flexsearch-accent: #163c56;
  --flexsearch-selected-bg: #f2d07f;
}

Tous les éléments ont une classe flexsearch-* : les styles peuvent aussi être entièrement remplacés.

Le champ de recherche est traduit en anglais et en français, et un index est généré pour chaque langue du site : passez en anglais avec le lien du pied de page, la recherche ne renvoie alors que les pages anglaises.

Ajouter une langue

Extrayez les chaînes à traduire dans une autre langue avec la commande suivante, puis traduisez le fichier généré :

cecil util:translations:extract --locale=<locale> --save --theme=flexsearch