--- a/devtools/client/themes/breadcrumbs.css
+++ b/devtools/client/themes/breadcrumbs.css
@@ -1,13 +1,21 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+ :root {
+  --breadcrumb-id-class-color: #909090;
+ }
+
+ .theme-dark:root {
+  --breadcrumb-id-class-color: var(--theme-content-color1);
+ }
+
 /* Inspector HTMLBreadcrumbs */
 
 .breadcrumbs-widget-container {
   margin-inline-end: 3px;
   max-height: 24px; /* Set max-height for proper sizing on linux */
   height: 24px; /* Set height to prevent starting small waiting for content */
 }
 
@@ -150,22 +158,19 @@
 .theme-dark .breadcrumbs-widget-item {
   color: var(--theme-selection-color);
 }
 
 .theme-light .breadcrumbs-widget-item {
   color: var(--theme-body-color);
 }
 
-.breadcrumbs-widget-item-id {
-  color: var(--theme-body-color-alt);
-}
-
+.breadcrumbs-widget-item-id,
 .breadcrumbs-widget-item-classes {
-  color: var(--theme-content-color1);
+  color: var(--breadcrumb-id-class-color);
 }
 
 .breadcrumbs-widget-item-pseudo-classes {
   color: var(--theme-highlight-lightorange);
 }
 
 /* Firebug theme support for breadcrumbs widget. */