Les puces par défaut d'une liste numérotée sont bleues (#00528c dans l'habillage Hydradark). Ceci est contrôlé par le sélecteur ul. Le CSS Hydradark par défaut pour les puces dans les listes non numérotées est le suivant :
ul {
list-style-type: disc;
list-style-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22%2300528c%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}
Une inspection plus approfondie de ce dataURL révèle le code de couleur intégré dans cette chaîne :
data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22%2300528c%22%2F%3E%0A%3C%2Fsvg%3E%0A
Pour modifier la couleur de vos puces, il vous suffit de substituer le code hexadécimal de la couleur que vous préférez. Par exemple :
data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22%23F37F20%22%2F%3E%0A%3C%2Fsvg%3E%0A
vous donnera une puce orange.
Le CSS Hydra de base utilise un fichier image, mais le même CSS peut être utilisé pour spécifier une puce de couleur différente.
