--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -2,21 +2,16 @@
  * 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/. */
 
 @import "resource://devtools/client/themes/variables.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/App.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/Sidebar.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/SidebarItem.css";
 
-:root {
-  --sidebar-item-icon-color: var(--grey-30);
-  --sidebar-item-selected-color: var(--blue-55);
-}
-
 html, body {
   margin: 0;
   padding: 0;
 }
 
 ul {
   list-style: none;
   margin: 0;

--- a/devtools/client/aboutdebugging-new/src/components/SidebarItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/SidebarItem.css
@@ -1,13 +1,18 @@
 /* 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/. */
 
 .sidebar-item {
+  --sidebar-item-icon-color: var(--grey-30);
+  --sidebar-item-selected-color: var(--blue-55);
+}
+
+.sidebar-item {
   align-items: center;
   display: flex;
   font-size: 20px;
   margin-inline-start: 24px;
 }
 
 .sidebar-item__icon {
   fill: var(--sidebar-item-icon-color);