diff --git a/client/modules/About/About.styles.ts b/client/modules/About/About.styles.ts
index 0714e39608..62e58ebbf1 100644
--- a/client/modules/About/About.styles.ts
+++ b/client/modules/About/About.styles.ts
@@ -177,7 +177,7 @@ export const ContactHandles = styled.p`
   width: 50%;
 
   & a {
-    color: ${prop('logoColor')};
+    color: ${prop('linkTextColor')};
     text-decoration: underline;
 
     &:hover {
@@ -204,7 +204,7 @@ export const Footer = styled.div`
 
   & a {
     margin: ${remSize(20)} 9.5% 0 0;
-    color: ${prop('logoColor')};
+    color: ${prop('linkTextColor')};
     text-decoration: underline;
 
     &:hover {
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 2cb9230d7d..da8592b145 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -173,10 +173,10 @@
 %link {
 	@include themify() {
 		text-decoration: none;
-		color: getThemifyVariable('inactive-text-color');
+		color: getThemifyVariable('link-text-color');
 		cursor: pointer;
 		& g, & path {
-			fill: getThemifyVariable('inactive-text-color');
+			fill: getThemifyVariable('link-text-color');
 		}
 		&:hover {
 			text-decoration: none;
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 63fb34f678..eb0232cd35 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -9,6 +9,8 @@ $black: #000;
 $yellow: #f5dc23;
 $dodgerblue: #1e90ff;
 $p5-contrast-pink: #ffa9d9;
+$p5-contrast-light-pink: #ffa9d9;
+$p5-contrast-dark-pink: #b20046;
 
 $outline-color: #0f9dd7;
 
@@ -150,6 +152,7 @@ $themes: (
     input-selection-text-color: $dark,
     input-text-color: $dark,
     keyboard-shortcut-color: $middle-gray,
+    link-text-color: $p5-contrast-dark-pink,
     logo-background-color: $lightest,
     logo-color: $p5js-pink,
     modal-background-color: $light,
@@ -215,7 +218,7 @@ $themes: (
     console-header-color: $lightest,
     console-input-background-color: $darker,
     editor-gutter-color: $darker,
-    error-color: $p5js-pink,
+    error-color: $p5-contrast-light-pink,
     file-hover-color: $dark,
     file-selected-color: $medium-dark,
     form-input-placeholder-text-color: $middle-gray,
@@ -274,6 +277,7 @@ $themes: (
     input-selection-text-color: $darkest,
     input-text-color: $lightest,
     keyboard-shortcut-color: $middle-light,
+    link-text-color: $p5-contrast-light-pink,
     logo-background-color: $lightest,
     logo-color: $p5js-pink,
     modal-background-color: $dark,
@@ -339,7 +343,7 @@ $themes: (
     console-header-color: $lightest,
     console-input-background-color: $darker,
     editor-gutter-color: $darker,
-    error-color: $p5-contrast-pink,
+    error-color: $p5-contrast-light-pink,
     file-hover-color: $dark,
     file-selected-color: $medium-dark,
     form-navigation-options-color: $middle-light,
@@ -395,6 +399,7 @@ $themes: (
     input-selection-text-color: $darkest,
     input-text-color: $lightest,
     keyboard-shortcut-color: $middle-light,
+    link-text-color: $p5-contrast-light-pink,
     logo-background-color: $darker,
     logo-color: $yellow,
     modal-background-color: $dark,
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index e0830f3543..30df4dcdaa 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -73,7 +73,7 @@
   & a {
     text-decoration: underline;
     @include themify() {
-      color: getThemifyVariable('button-background-hover-color');
+      color: getThemifyVariable('link-text-color');
     }
   }
   & a:hover {
@@ -154,7 +154,7 @@
     display: contents;
     & a {
       text-decoration: underline;
-      color: getThemifyVariable('button-background-hover-color');
+      color: getThemifyVariable('link-text-color');
     }
     & a:hover {
       text-decoration: underline;
diff --git a/client/theme.js b/client/theme.js
index 7aa4f6ed0e..e3247f92ed 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -19,7 +19,8 @@ export const colors = {
   red: '#ff0000',
   lightsteelblue: '#B0C4DE',
   dodgerblue: '#1E90FF',
-  p5ContrastPink: ' #FFA9D9',
+  p5ContrastLightPink: '#FFA9D9',
+  p5ContrastDarkPink: '#B20046',
   p5ContrastYellow: '#fff001',
   borderColor: ' #B5B5B5',
   outlineColor: '#0F9DD7'
@@ -71,6 +72,7 @@ const baseThemes = {
   [Theme.light]: {
     colors,
     ...common,
+    linkTextColor: colors.p5ContrastDarkPink,
     primaryTextColor: grays.dark,
     inactiveTextColor: grays.middleDark,
     backgroundColor: grays.lighter,
@@ -166,6 +168,7 @@ const baseThemes = {
   [Theme.dark]: {
     colors,
     ...common,
+    linkTextColor: colors.p5ContrastLightPink,
     primaryTextColor: grays.lightest,
     inactiveTextColor: grays.middleLight,
     backgroundColor: grays.darker,
@@ -269,6 +272,7 @@ export default {
     toolbarTextColor: grays.dark,
     toolbarBackgroundColor: grays.light,
     toolbarTextHoverColor: grays.dark,
+    linkTextColor: colors.p5ContrastLightPink,
 
     Button: {
       primary: {