diff --git a/src/devtools/views/Components/Components.css b/src/devtools/views/Components/Components.css
index 172abb5c9e..6523b5e515 100644
--- a/src/devtools/views/Components/Components.css
+++ b/src/devtools/views/Components/Components.css
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: row;
   background-color: var(--color-background);
-  color: var(--color-text-color);
+  color: var(--color-text);
   font-family: var(--font-family-sans);
 }
 
diff --git a/src/devtools/views/Components/HooksTree.css b/src/devtools/views/Components/HooksTree.css
index 819c556d36..d82764c479 100644
--- a/src/devtools/views/Components/HooksTree.css
+++ b/src/devtools/views/Components/HooksTree.css
@@ -36,7 +36,7 @@
 }
 .EditableName:after,
 .Name:after {
-  color: var(--color-text-color);
+  color: var(--color-text);
   content: ': ';
   margin-right: 0.5rem;
 }
diff --git a/src/devtools/views/Components/InspectedElementTree.css b/src/devtools/views/Components/InspectedElementTree.css
index 49b6186659..620fbf412d 100644
--- a/src/devtools/views/Components/InspectedElementTree.css
+++ b/src/devtools/views/Components/InspectedElementTree.css
@@ -26,7 +26,7 @@
 }
 .Name:after {
   content: ': ';
-  color: var(--color-text-color);
+  color: var(--color-text);
   margin-right: 0.5rem;
 }
 
diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 08230f57ac..9fb868e909 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -15,7 +15,7 @@
 .EditableName:after,
 .Name:after {
   content: ': ';
-  color: var(--color-text-color);
+  color: var(--color-text);
   margin-right: 0.5rem;
 }
 
diff --git a/src/devtools/views/Components/SearchInput.css b/src/devtools/views/Components/SearchInput.css
index 89048c643e..ddd1e70825 100644
--- a/src/devtools/views/Components/SearchInput.css
+++ b/src/devtools/views/Components/SearchInput.css
@@ -10,7 +10,7 @@
   outline: none;
   border: none;
   background-color: var(--color-background);
-  color: var(--color-text-color);
+  color: var(--color-text);
   padding-left: 1.5rem;
   margin-left: -1rem;
 }
diff --git a/src/devtools/views/DevTools.css b/src/devtools/views/DevTools.css
index 4001db68eb..34a530b16b 100644
--- a/src/devtools/views/DevTools.css
+++ b/src/devtools/views/DevTools.css
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   background-color: var(--color-background);
-  color: var(--color-text-color);
+  color: var(--color-text);
 }
 
 .TabBar {
diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index 346257bc5e..5ab888906d 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -7,7 +7,7 @@
   font-family: var(--font-family-sans);
   font-size: var(--font-size-sans-normal);
   background-color: var(--color-background);
-  color: var(--color-text-color);
+  color: var(--color-text);
 }
 
 .LeftColumn {
diff --git a/src/devtools/views/Settings/Settings.css b/src/devtools/views/Settings/Settings.css
index 7dc9755ca2..c0f9f4a1db 100644
--- a/src/devtools/views/Settings/Settings.css
+++ b/src/devtools/views/Settings/Settings.css
@@ -9,7 +9,7 @@
   font-family: var(--font-family-sans);
   font-size: var(--font-size-sans-normal);
   background-color: var(--color-background);
-  color: var(--color-text-color);
+  color: var(--color-text);
 }
 
 .Section {
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index df4cd01fec..ef237f6dc0 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -246,7 +246,7 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-selected-foreground', documentElements);
   updateStyleHelper(theme, 'color-search-match', documentElements);
   updateStyleHelper(theme, 'color-search-match-current', documentElements);
-  updateStyleHelper(theme, 'color-text-color', documentElements);
+  updateStyleHelper(theme, 'color-text', 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 c73b42e828..39dafa00c3 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -9,7 +9,7 @@
   border-bottom: 3px solid transparent;
   cursor: pointer;
   user-select: none;
-  color: var(--color-text-color);
+  color: var(--color-text);
 }
 .Tab:hover,
 .TabCurrent:hover {
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 48b8254a8c..19832f7d23 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -47,7 +47,7 @@
   --light-color-selected-background: #0088fa;
   --light-color-selected-border: #0088fa;
   --light-color-selected-foreground: #ffffff;
-  --light-color-text-color: #000000;
+  --light-color-text: #000000;
   --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
   --light-color-tooltip-text: #ffffff;
 
@@ -95,7 +95,7 @@
   --dark-color-selected-background: #178fb9;
   --dark-color-selected-border: #178fb9;
   --dark-color-selected-foreground: #ffffff;
-  --dark-color-text-color: #ffffff;
+  --dark-color-text: #ffffff;
   --dark-color-tooltip-background: rgba(255, 255, 255, 0.9);
   --dark-color-tooltip-text: #000000;