diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 425b901bd8..da7a214de5 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -11,10 +11,10 @@
   user-select: none;
 }
 .HoveredElement {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 .InactiveSelectedElement {
-  background-color: var(--color-inactive-background);
+  background-color: var(--color-background-inactive);
 }
 
 .ScrollAnchor {
@@ -23,13 +23,13 @@
 }
 
 .SelectedElement {
-  background-color: var(--color-selected-background);
-  color: var(--color-selected-foreground);
+  background-color: var(--color-background-selected);
+  color: var(--color-text-selected);
 
   /* Invert colors */
   --color-component-name: var(--color-component-name-inverted);
   --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
-  --color-attribute-name: var(--color-hover-background);
+  --color-attribute-name: var(--color-background-hover);
   --color-attribute-value: var(--color-component-name-inverted);
   --color-expand-collapse-toggle: var(--color-component-name-inverted);
 }
diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index 1cfcb64653..443eadf54e 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -17,8 +17,8 @@
 
 .Component[data-reach-menu-item][data-selected],
 .Component[data-reach-menu-item][data-selected]:hover {
-  color: var(--color-selected-foreground);
-  background: var(--color-selected-background);
+  color: var(--color-text-selected);
+  background: var(--color-background-selected);
 }
 .Component[data-reach-menu-item][data-selected]:focus {
   outline: none;
diff --git a/src/devtools/views/Profiler/InteractionListItem.css b/src/devtools/views/Profiler/InteractionListItem.css
index 1cdf323d55..6d354ca015 100644
--- a/src/devtools/views/Profiler/InteractionListItem.css
+++ b/src/devtools/views/Profiler/InteractionListItem.css
@@ -7,11 +7,11 @@
 }
 
 .Interaction:hover {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .SelectedInteraction {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .Name {
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index 276bbb5708..5c28ac3b4c 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -41,7 +41,7 @@
 .Interaction:focus,
 .Interaction:hover {
   outline: none;
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .Label {
diff --git a/src/devtools/views/Profiler/SidebarInteractions.css b/src/devtools/views/Profiler/SidebarInteractions.css
index 99327dbb9c..9b105db210 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.css
+++ b/src/devtools/views/Profiler/SidebarInteractions.css
@@ -44,7 +44,7 @@
   padding: 0.25rem 0.5rem;
 }
 .ListItem:hover {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .CommitBox {
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
index 6c4a0ca65c..30097488c7 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -46,12 +46,12 @@
 .Commit:focus,
 .Commit:hover {
   outline: none;
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .CurrentCommit {
-  background-color: var(--color-selected-background);
-  color: var(--color-selected-foreground);
+  background-color: var(--color-background-selected);
+  color: var(--color-text-selected);
 }
 .CurrentCommit:focus {
   outline: none;
diff --git a/src/devtools/views/Profiler/SnapshotCommitListItem.js b/src/devtools/views/Profiler/SnapshotCommitListItem.js
index bcca4494dc..4116d41f36 100644
--- a/src/devtools/views/Profiler/SnapshotCommitListItem.js
+++ b/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -52,7 +52,7 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
         ...style,
         width,
         borderBottom: isSelected
-          ? '3px solid var(--color-selected-border)'
+          ? '3px solid var(--color-tab-selected-border)'
           : undefined,
       }}
       title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(
diff --git a/src/devtools/views/Settings/Settings.css b/src/devtools/views/Settings/Settings.css
index c0f9f4a1db..581facc0e9 100644
--- a/src/devtools/views/Settings/Settings.css
+++ b/src/devtools/views/Settings/Settings.css
@@ -39,7 +39,7 @@
 }
 
 .Option:hover {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .Option:first-of-type {
@@ -54,7 +54,7 @@
 }
 
 .ScreenshotThrottling {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
 }
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index ef237f6dc0..0cc5dfb9a4 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -203,6 +203,9 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-attribute-value', documentElements);
   updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);
   updateStyleHelper(theme, 'color-background', documentElements);
+  updateStyleHelper(theme, 'color-background-hover', documentElements);
+  updateStyleHelper(theme, 'color-background-inactive', documentElements);
+  updateStyleHelper(theme, 'color-background-selected', documentElements);
   updateStyleHelper(theme, 'color-border', documentElements);
   updateStyleHelper(theme, 'color-button-background', documentElements);
   updateStyleHelper(theme, 'color-button-background-focus', documentElements);
@@ -229,8 +232,6 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
-  updateStyleHelper(theme, 'color-hover-background', documentElements);
-  updateStyleHelper(theme, 'color-inactive-background', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
   updateStyleHelper(
     theme,
@@ -241,12 +242,11 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-record-active', documentElements);
   updateStyleHelper(theme, 'color-record-hover', documentElements);
   updateStyleHelper(theme, 'color-record-inactive', documentElements);
-  updateStyleHelper(theme, 'color-selected-background', documentElements);
-  updateStyleHelper(theme, 'color-selected-border', documentElements);
-  updateStyleHelper(theme, 'color-selected-foreground', documentElements);
   updateStyleHelper(theme, 'color-search-match', documentElements);
   updateStyleHelper(theme, 'color-search-match-current', documentElements);
+  updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
   updateStyleHelper(theme, 'color-text', documentElements);
+  updateStyleHelper(theme, 'color-text-selected', documentElements);
   updateStyleHelper(theme, 'color-tooltip-background', documentElements);
   updateStyleHelper(theme, 'color-tooltip-text', documentElements);
 
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index 39dafa00c3..c1105c78d2 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -13,15 +13,15 @@
 }
 .Tab:hover,
 .TabCurrent:hover {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 .Tab:focus-within,
 .TabCurrent:focus-within {
-  background-color: var(--color-hover-background);
+  background-color: var(--color-background-hover);
 }
 
 .TabCurrent {
-  border-bottom: 3px solid var(--color-selected-border);
+  border-bottom: 3px solid var(--color-tab-selected-border);
 }
 
 .TabDisabled {
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 19832f7d23..ca0582a171 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -8,6 +8,9 @@
   --light-color-attribute-value: #1a1aa6;
   --light-color-attribute-editable-value: #1a1aa6;
   --light-color-background: #ffffff;
+  --light-color-background-hover: #ebf1fb;
+  --light-color-background-inactive: #e5e5e5;
+  --light-color-background-selected: #0088fa;
   --light-color-button-background: #ffffff;
   --light-color-button-background-focus: #ededed;
   --light-color-button: #5f6673;
@@ -34,8 +37,6 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-expand-collapse-toggle: #777d88;
-  --light-color-hover-background: #ebf1fb;
-  --light-color-inactive-background: #e5e5e5;
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -44,10 +45,9 @@
   --light-color-record-inactive: #0088fa;
   --light-color-search-match: yellow;
   --light-color-search-match-current: #f7923b;
-  --light-color-selected-background: #0088fa;
-  --light-color-selected-border: #0088fa;
-  --light-color-selected-foreground: #ffffff;
+  --light-color-tab-selected-border: #0088fa;
   --light-color-text: #000000;
+  --light-color-text-selected: #ffffff;
   --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
   --light-color-tooltip-text: #ffffff;
 
@@ -56,6 +56,9 @@
   --dark-color-attribute-value: #cedae0;
   --dark-color-attribute-editable-value: yellow;
   --dark-color-background: #282c34;
+  --dark-color-background-hover: #3d424a;
+  --dark-color-background-inactive: #3d424a;
+  --dark-color-background-selected: #178fb9;
   --dark-color-button-background: #282c34;
   --dark-color-button-background-focus: #3d424a;
   --dark-color-button: #afb3b9;
@@ -82,8 +85,6 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-expand-collapse-toggle: #8f949d;
-  --dark-color-hover-background: #3d424a;
-  --dark-color-inactive-background: #3d424a;
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);
@@ -92,10 +93,9 @@
   --dark-color-record-inactive: #61dafb;
   --dark-color-search-match: yellow;
   --dark-color-search-match-current: #f7923b;
-  --dark-color-selected-background: #178fb9;
-  --dark-color-selected-border: #178fb9;
-  --dark-color-selected-foreground: #ffffff;
+  --dark-color-tab-selected-border: #178fb9;
   --dark-color-text: #ffffff;
+  --dark-color-text-selected: #ffffff;
   --dark-color-tooltip-background: rgba(255, 255, 255, 0.9);
   --dark-color-tooltip-text: #000000;