How do I the add vocabulary name or the ID to the  CSS classes? For theming purpose, I would like to add in body class the vocabulary name (or ID) of the current taxonomy.
I know how to add a class based on the taxonomy term ID.

For example, I have the following vocabulary (Color).


red (term id = 1)
green (term id = 2)
yellow (term id = 3)


I know how to get &lt;body class="term-id-1"&gt;. I would like to get &lt;body class="vocabulary-id-1"&gt; or &lt;body class="vocabulary-name-color"&gt;.

I've tried the following code.

function mytheme_preprocess_html(&amp;$variables) {
  // Works
  if (\Drupal::routeMatch()-&gt;getRouteName() == 'entity.taxonomy_term.canonical') {
    $variables['term_id'] = \Drupal::routeMatch()-&gt;getRawParameter('taxonomy_term');
  }
  // doesn't work
  if (\Drupal::routeMatch()-&gt;getRouteName() == 'entity.taxonomy_vocabulary.canonical') {
    $variables['vocabulary_id'] = \Drupal::routeMatch()-&gt;getRawParameter('taxonomy_vocabulary');
  }
}


As said in the comments, it doesn't work, and I am not able to use the vocabulary name, or its ID as CSS class to add to the &lt;body&gt; tag.  

How can I achieve this?
The vocabulary id is not a route parameter, unless you have a route to view/edit a vocabulary, but these are all admin routes. So you need to get the information from the term:

function mytheme_preprocess_html(&amp;$variables) {
  if (\Drupal::routeMatch()-&gt;getRouteName() == 'entity.taxonomy_term.canonical') {
    // load the term entity and get the data from there
    $term = \Drupal::routeMatch()-&gt;getParameter('taxonomy_term');
    $variables['term_id'] = $term-&gt;id();
    $variables['vocabulary_id'] = $term-&gt;bundle();
  }
}


bundle() returns the vocabulary of the term. This is the same as a content type of a node. Or a block type of a custom block. All are fieldable bundles of entities.

So if you use bundle() on a node you'll get for example the machine name article.