diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css
index 76a16471e151..c88f046e15b1 100644
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -397,8 +397,17 @@ iframe {
   }
 }
 
-.devtools-button:empty:not([aria-expanded="true"]):hover {
+.devtools-button:empty:not(
+  [aria-expanded="true"],
+  [aria-pressed="true"],
+  .checked
+):hover {
   background: var(--toolbarbutton-hover-background);
+  color: var(--toolbarbutton-hover-color);
+
+  &::before {
+    color: var(--theme-icon-hover-color);
+  }
 }
 
 /* Standalone buttons */
@@ -416,18 +425,16 @@ iframe {
 /* Selectable button which is unchecked. */
 
 .devtools-button:not(:empty, .checked, [aria-pressed="true"]):hover,
-.devtools-button:empty:is(:hover:active,.checked, [aria-pressed="true"]),
 .devtools-button[aria-haspopup="menu"][aria-expanded="true"] {
   background-color: var(--toolbarbutton-hover-background);
 }
 
-.devtools-button:not(:empty, .checked, [aria-pressed="true"]):hover:active {
-  background-color: var(--theme-selection-background-hover);
+.devtools-button:empty:is(.checked, [aria-pressed="true"]) {
+  background-color: var(--toolbarbutton-checked-background);
 }
 
-.devtools-button:not(:empty, .checked, [aria-pressed="true"]):focus {
-  background-color: var(--toolbarbutton-focus-background);
-  color: var(--toolbarbutton-focus-color);
+.devtools-button:not(:empty, .checked, [aria-pressed="true"]):hover:active {
+  background-color: var(--theme-selection-background-hover);
 }
 
 .devtools-togglebutton:not([aria-pressed="true"]) {
@@ -444,10 +451,6 @@ iframe {
 .devtools-button:not(:empty):is(.checked, [aria-pressed="true"]) {
   background: var(--toolbarbutton-checked-background);
   color: var(--toolbarbutton-checked-color);
-
-  &:focus {
-    background-color: var(--toolbarbutton-checked-focus-background);
-  }
 }
 
 .devtools-togglebutton[aria-pressed="true"] {
diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css
index 00a349a69391..cce66dc27ea2 100644
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -161,11 +161,9 @@
   /* Toolbar buttons */
   --toolbarbutton-background: light-dark(var(--grey-10), var(--grey-70));
   --toolbarbutton-hover-background: light-dark(var(--grey-20), var(--grey-70));
-  --toolbarbutton-focus-background: light-dark(var(--grey-20), var(--grey-60));
-  --toolbarbutton-focus-color: light-dark(var(--grey-70), var(--grey-30));
-  --toolbarbutton-checked-background: light-dark(var(--blue-55), #204e8a);
-  --toolbarbutton-checked-focus-background: var(--blue-60);
-  --toolbarbutton-checked-color: #ffffff;
+  --toolbarbutton-hover-color: inherit;
+  --toolbarbutton-checked-background: var(--toolbarbutton-hover-background);
+  --toolbarbutton-checked-color: var(--theme-icon-checked-color);
 
   /* Buttons */
   --theme-button-background: light-dark(rgba(12, 12, 13, 0.05), rgba(249, 249, 250, 0.1));
@@ -321,6 +319,13 @@
     --theme-accordion-header-hover-background: ButtonFace;
     --theme-accordion-header-hover-color: SelectedItem;
 
+    /* Toolbar buttons */
+    --toolbarbutton-background: ButtonFace;
+    --toolbarbutton-hover-background: ButtonFace;
+    --toolbarbutton-hover-color: SelectedItem;
+    --toolbarbutton-checked-background: SelectedItem;
+    --toolbarbutton-checked-color: SelectedItemText;
+
     /* Text color */
     --theme-selection-background: SelectedItem;
     --theme-selection-color: SelectedItemText;
@@ -344,6 +349,7 @@
     --theme-icon-disabled-color: GrayText;
     --theme-icon-error-color: ButtonText;
     --theme-icon-warning-color: ButtonText;
+    --theme-icon-checked-color: SelectedItemText;
 
     --theme-search-results-background: Mark;
     --theme-search-results-color: MarkText;