Update documentation about badge colors (#182)

example_app/templates/example_app/page_colors.html

@@ -88,6 +88,20 @@ <h2>
     {{ accent_color_form }}
   </form>
   <div class="example-use">
+    <h3>
+      Badge
+    </h3>
+    <p>
+      Personnalise la couleur du fond et du texte.
+    </p>
+    <p>
+      Il faut utiliser une classe de type <code>fr-badge--&lt;color-name&gt;</code> (par exemple, <code>fr-quote--green-archipel</code>.)
+    </p>
+
+    <p>
+      {% dsfr_badge components_data.badge.sample_data.0 %}
+    </p>
+
     <h3>
       Citation
     </h3>
@@ -125,7 +139,7 @@ <h3>
       Tag
     </h3>
     <p>
-      Personnalise la couleur de la bordure, du fond et de l’icône. Seuls les tags cliquables sont pris en compte.
+      Personnalise la couleur du fond, du texte et de l’icône. Seuls les tags cliquables sont pris en compte.
     </p>
     <p>
       Il faut utiliser une classe de type <code>fr-tag--&lt;color-name&gt;</code> (par exemple, <code>fr-tag--green-archipel</code>.)
@@ -184,6 +198,7 @@ <h3>
     }
 
     document.getElementById('id_color_accent').addEventListener('input', function (event) {
+      manageColorClasses("fr-badge", event.target.value);
       manageColorClasses("fr-quote", event.target.value);
       manageColorClasses("fr-callout", event.target.value);
       manageColorClasses("fr-highlight", event.target.value);