diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index dd71f9d2..3c6718eb 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -103,23 +103,25 @@
 }
 
 %forms-button {
-	background-color: $form-button-background-color;
-	color: $form-button-color;
-	cursor: pointer;
-	border: 2px solid $form-button-color;
-	border-radius: 2px;
-	padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
-	line-height: 1;
-  margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
-	&:enabled:hover {
-		border-color: $form-button-background-hover-color;
-		background-color: $form-button-background-hover-color;
-		color: $form-button-hover-color;
-	}
-	&:enabled:active {
-		border-color: $form-button-background-active-color;
-		background-color: $form-button-background-active-color;
-		color: $form-button-active-color;
+	@include themify() {
+		background-color: getThemifyVariable('form-button-background-color');
+		color: getThemifyVariable('form-button-color');
+		cursor: pointer;
+		border: 2px solid getThemifyVariable('form-button-color');
+		border-radius: 2px;
+		padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
+		line-height: 1;
+		margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
+		&:enabled:hover {
+			border-color: getThemifyVariable('form-button-background-hover-color');
+			background-color: getThemifyVariable('form-button-background-hover-color');
+			color: getThemifyVariable('form-button-hover-color');
+		}
+		&:enabled:active {
+			border-color: getThemifyVariable('form-button-background-active-color');
+			background-color: getThemifyVariable('form-button-background-active-color');
+			color: getThemifyVariable('form-button-active-color');
+		}
 	}
 }
 
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index c211123f..10a61d22 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -64,7 +64,19 @@ $themes: (
     error-color: $p5js-pink,
     table-row-stripe-color: #d6d6d6,
     codefold-icon-open: url(../images/down-arrow.svg),
-    codefold-icon-closed: url(../images/right-arrow.svg)
+    codefold-icon-closed: url(../images/right-arrow.svg),
+
+    form-title-color: rgba(51, 51, 51, 0.87),
+    form-secondary-title-color: #b5b5b5,
+    form-input-text-color: #b5b5b5,
+    form-border-color: #b5b5b5,
+    form-button-background-color: $white,
+    form-button-color: #f10046,
+    form-button-background-hover-color: $p5js-pink,
+    form-button-background-active-color: #f10046,
+    form-button-hover-color: $white,
+    form-button-active-color: $white,
+    form-navigation-options-color: #999999
   ),
   dark: (
     logo-color: $p5js-pink,
@@ -114,7 +126,18 @@ $themes: (
     error-color: $p5js-pink,
     table-row-stripe-color: #3f3f3f,
     codefold-icon-open: url(../images/down-arrow-white.svg),
-    codefold-icon-closed: url(../images/right-arrow-white.svg)
+    codefold-icon-closed: url(../images/right-arrow-white.svg),
+
+    form-title-color: $white,
+    form-secondary-title-color: #b5b5b5,
+    form-border-color: #b5b5b5,
+    form-button-background-color: $black,
+    form-button-color: #f10046,
+    form-button-background-hover-color: $p5js-pink,
+    form-button-background-active-color: #f10046,
+    form-button-hover-color: $white,
+    form-button-active-color: $white,
+    form-navigation-options-color: #999999
   ),
   contrast: (
     logo-color: $yellow,
@@ -163,7 +186,18 @@ $themes: (
     error-color: $p5-contrast-pink,
     table-row-stripe-color: #3f3f3f,
     codefold-icon-open: url(../images/down-arrow-white.svg),
-    codefold-icon-closed: url(../images/right-arrow-white.svg)
+    codefold-icon-closed: url(../images/right-arrow-white.svg),
+
+    form-title-color: $white,
+    form-secondary-title-color: #b5b5b5,
+    form-border-color: #b5b5b5,
+    form-button-background-color: $black,
+    form-button-color: #f10046,
+    form-button-background-hover-color: $p5-contrast-pink,
+    form-button-background-active-color: #f10046,
+    form-button-hover-color: $white,
+    form-button-active-color: $white,
+    form-navigation-options-color: #999999
   )
 );
 
@@ -173,15 +207,5 @@ $console-error-color: #ff5f52;
 $toast-background-color: #4A4A4A;
 $toast-text-color: $white;
 
-$form-title-color: rgba(51, 51, 51, 0.87);
-$secondary-form-title-color: #b5b5b5;
-$form-button-background-color: $white;
-$form-button-color: #f10046;
-$form-button-background-hover-color: $p5js-pink;
-$form-button-background-active-color: #f10046;
-$form-button-hover-color: $white;
-$form-button-active-color: $white;
-$form-navigation-options-color: #999999;
-
 $about-play-background-color: rgba(255, 255, 255, 0.7);
 $about-button-border-color: rgba(151, 151, 151, 0.7);
diff --git a/client/styles/components/_about.scss b/client/styles/components/_about.scss
index ef7265ed..54929f04 100644
--- a/client/styles/components/_about.scss
+++ b/client/styles/components/_about.scss
@@ -46,7 +46,9 @@
   padding-left: #{20 / $base-font-size}rem;
   width: #{720 / $base-font-size}rem;
   & a {
-    color: $form-navigation-options-color;
+    @include themify() {
+      color: getThemifyVariable('form-navigation-options-color');
+    }
   }
 }
 
diff --git a/client/styles/components/_form-container.scss b/client/styles/components/_form-container.scss
index 3514d4f6..a2e6726d 100644
--- a/client/styles/components/_form-container.scss
+++ b/client/styles/components/_form-container.scss
@@ -35,7 +35,9 @@
 
 .form-container__title {
 	font-weight: normal;
-	color: $form-title-color;
+	@include themify() {
+    color: getThemifyVariable('form-title-color')
+  }
 }
 
 .form-container__context {
@@ -49,9 +51,9 @@
 }
 
 .form-container__logo-button {
-  @extend %none-themify-icon;
+  @include icon();
 }
 
 .form-container__exit-button {
-  @extend %none-themify-icon-with-hover;
+	@include icon();
 }
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index 94ba4501..24853fb8 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -5,7 +5,7 @@
   font-size: #{9 / $base-font-size}rem;
   text-align: left;
   @include themify() {
-    color: getThemifyVariable('error-color')
+    color: getThemifyVariable('error-color');
   }
 }
 
@@ -22,7 +22,9 @@
 .form__navigation-options {
   margin-top: #{16 / $base-font-size}rem;
   font-size: #{12 / $base-font-size}rem;
-  color: $form-navigation-options-color;
+  @include themify() {
+    color: getThemifyVariable('form-navigation-options-color');
+  }
 }
 
 .form__legend{
@@ -31,11 +33,13 @@
 }
 
 .form__label {
-  color: $secondary-form-title-color;
   font-size: #{12 / $base-font-size}rem;
   margin-top: #{25 / $base-font-size}rem;
   margin-bottom: #{7 / $base-font-size}rem;
   display: block;
+  @include themify() {
+    color: getThemifyVariable('form-secondary-title-color');
+  }
 }
 
 .form__label--hidden {
@@ -45,8 +49,10 @@
 .form__input {
   width: #{360 / $base-font-size}rem;
   height: #{40 / $base-font-size}rem;
-  color: $icon-hover-color;
-  border-color: $secondary-form-title-color;
+  @include themify() {
+    color: getThemifyVariable('form-input-text-color');
+    border-color: getThemifyVariable('form-border-color');
+  }
 }
 
 .form__context {
@@ -55,7 +61,9 @@
 }
 
 .form__status {
-  color: $form-navigation-options-color;
+  @include themify() {
+    color: getThemifyVariable('form-navigation-options-color');
+  }
 }
 
 .form input[type="submit"] {
diff --git a/client/styles/components/_new-password.scss b/client/styles/components/_new-password.scss
index 8f81d48b..fcd3a839 100644
--- a/client/styles/components/_new-password.scss
+++ b/client/styles/components/_new-password.scss
@@ -10,6 +10,8 @@
     display: block;
     margin-top: #{40 / $base-font-size}rem;
     margin-bottom: #{80 / $base-font-size}rem;
-    color: $form-navigation-options-color;
+    @include themify() {
+      color: getThemifyVariable('form-navigation-options-color');
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/client/styles/components/_reset-password.scss b/client/styles/components/_reset-password.scss
index f0bb7608..47109a3a 100644
--- a/client/styles/components/_reset-password.scss
+++ b/client/styles/components/_reset-password.scss
@@ -4,7 +4,9 @@
   text-align: left;
   font-size: #{12 / $base-font-size}rem;
   margin-top: #{10 / $base-font-size}rem;
-  color: $form-navigation-options-color;
+  @include themify() {
+    color: getThemifyVariable('form-navigation-options-color');
+  }
   padding-right: #{30 / $base-font-size}rem;
   padding-left: #{39 / $base-font-size}rem;
   .reset-password--submitted & {