How do I the add vocabulary name or the ID to the  CSS classes?
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.