diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts
index a2b27ee19..29c771b3f 100644
--- a/ts/themes/classicDark.ts
+++ b/ts/themes/classicDark.ts
@@ -42,9 +42,9 @@ const classicDark: ThemeColorVariables = {
   '--button-outline-background-hover-color': `rgba(${hexColorToRGB(
     THEMES.CLASSIC_DARK.COLOR6
   )}, 0.3)`,
-  '--button-outline-text-color': 'var(--text-primary-color)',
+  '--button-outline-text-color': 'var(--primary-color)',
   '--button-outline-text-hover-color': 'var(--text-primary-color)',
-  '--button-outline-border-color': 'var(--text-primary-color)',
+  '--button-outline-border-color': 'var(--primary-color)',
   '--button-outline-border-hover-color': 'var(--text-primary-color)',
   '--button-outline-disabled-color': 'var(--disabled-color)',
 
diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts
index 479c9b337..c51f83288 100644
--- a/ts/themes/oceanDark.ts
+++ b/ts/themes/oceanDark.ts
@@ -42,7 +42,7 @@ const oceanDark: ThemeColorVariables = {
   '--button-outline-background-hover-color': `rgba(${hexColorToRGB(
     THEMES.OCEAN_DARK.COLOR7!
   )}, 0.3)`,
-  '--button-outline-text-color': 'var(--text-primary-color)',
+  '--button-outline-text-color': 'var(--primary-color)',
   '--button-outline-text-hover-color': 'var(--text-primary-color)',
   '--button-outline-border-color': 'var(--primary-color)',
   '--button-outline-border-hover-color': 'var(--text-primary-color)',