diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 08c1d917..50e43640 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -12,6 +12,7 @@ $dodgerblue: #1E90FF;
 $primary-text-color: #333;
 $icon-color: #8b8b8b;
 $icon-hover-color: #333;
+$p5-contrast-pink: #FFA9D9;
 
 $themes: (
   light: (
@@ -60,6 +61,7 @@ $themes: (
     dropdown-color: #414141,
     keyboard-shortcut-color: #757575,
     nav-hover-color: $p5js-pink,
+    error-color: $p5js-pink,
     codefold-icon-open: url(../images/down-arrow.svg),
     codefold-icon-closed: url(../images/right-arrow.svg)
   ),
@@ -108,6 +110,7 @@ $themes: (
     dropdown-color: #dadada,
     keyboard-shortcut-color: #B5B5B5,
     nav-hover-color: $p5js-pink,
+    error-color: $p5js-pink,
     codefold-icon-open: url(../images/down-arrow-white.svg),
     codefold-icon-closed: url(../images/right-arrow-white.svg)
   ),
@@ -155,6 +158,7 @@ $themes: (
     dropdown-color: #e1e1e1,
     keyboard-shortcut-color: #e1e1e1,
     nav-hover-color: $yellow,
+    error-color: $p5-contrast-pink,
     codefold-icon-open: url(../images/down-arrow-white.svg),
     codefold-icon-closed: url(../images/right-arrow-white.svg)
   )
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index 213c3d3f..342a8c80 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -1,10 +1,12 @@
 .form-error {
   display: block;
   padding-top: #{4 / $base-font-size}rem;
-  color: $p5js-pink;
   width: #{300 / $base-font-size}rem;
   font-size: #{9 / $base-font-size}rem;
   text-align: left;
+  @include themify() {
+    color: getThemifyVariable('error-color')
+  }
 }
 
 .form__cancel-button {