diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index c9b225dc..f4fc23c3 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -28,9 +28,12 @@ $themes: (
     shadow-color: rgba(0, 0, 0, 0.16),
     console-background-color: #eee,
     console-header-background-color: #d6d6d6,
+    console-header-color: #b1b1b1,
     ide-border-color: #f4f4f4,
     editor-gutter-color: #f7f7f7,
     file-selected-color: #f4f4f4,
+    input-text-color: #333,
+    input-border-color: #979797,
   ),
   dark: (
     primary-text-color: $white,
@@ -58,78 +61,14 @@ $themes: (
     ide-border-color: #949494,
     editor-gutter-color: #363636,
     file-selected-color: #404040,
+    input-text-color: #333,
+    input-border-color: #979797,
   )
 );
 
-$primary-text-color: #333;
-$secondary-text-color: #6b6b6b;
-$inactive-text-color: #b5b5b5;
-$background-color: #fdfdfd;
-$button-background-color: #f4f4f4;
-$button-color: $black;
-$button-border-color: #979797;
-$toolbar-button-color: $p5js-pink;
-$button-background-hover-color: $p5js-pink;
-$button-background-active-color: #f10046;
-$button-hover-color: $white;
-$button-active-color: $white;
-$modal-background-color: #f4f4f4;
-$modal-button-background-color: #e6e6e6;
-$modal-border-color: #B9D0E1;
-$icon-color: #8b8b8b;
-$icon-hover-color: #333;
-$shadow-color: rgba(0, 0, 0, 0.16);
-$console-background-color: #eee;
-$console-header-background-color: #d6d6d6;
-$ide-border-color: #f4f4f4;
-
-
-// other variables i may or may not need later
-$ide-border-color: #f4f4f4;
-$editor-selected-line-color: #f3f3f3;
-$input-border-color: #979797;
-
-$console-light-background-color: #eee;
-$console-header-background-color: #d6d6d6;
-$console-header-color: #b1b1b1;
 $console-warn-color: #ffbe05;
 $console-error-color: #ff5f52;
 
 $toast-background-color: #979797;
 $toast-text-color: $white;
 
-//light and dark colors
-
-$light-primary-text-color: #333;
-$light-secondary-text-color: #6b6b6b;
-$light-inactive-text-color: #b5b5b5;
-$light-background-color: #fdfdfd;
-
-$light-button-background-color: #f4f4f4;
-$light-button-color: $black;
-$light-button-border-color: #979797;
-$light-toolbar-button-color: $p5js-pink;
-$light-button-background-hover-color: $p5js-pink;
-$light-button-background-active-color: #f10046;
-$light-button-hover-color: $white;
-$light-button-active-color: $white;
-$light-modal-background-color: #f4f4f4;
-$light-modal-button-background-color: #e6e6e6;
-$light-modal-border-color: #B9D0E1;
-$light-icon-color: #8b8b8b;
-$light-icon-hover-color: $light-primary-text-color;
-$light-shadow-color: rgba(0, 0, 0, 0.16);
-
-$dark-primary-text-color: $white;
-$dark-secondary-text-color: #c2c2c2;
-$dark-inactive-color: #7d7d7d;
-$dark-background-color: #333;
-
-$dark-button-background-color: $white;
-$dark-button-color: $black;
-$dark-toolbar-button-color: $p5js-pink;
-$dark-button-background-hover-color: $p5js-pink;
-$dark-button-background-active-color: #f10046;
-$dark-button-hover-color: $white;
-$dark-button-active-color: $white;
-
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index 80c885ab..d96bfbf8 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -36,11 +36,11 @@ input, button {
 
 input {
 	padding: #{5 / $base-font-size}rem;
-	// border-radius: 2px;
-	border: 1px solid $input-border-color;
+	border: 1px solid;
 	padding: #{10 / $base-font-size}rem;
 	@include themify() {
-		color: $primary-text-color;
+		color: getThemifyVariable('input-text-color');
+		border-color: getThemifyVariable('input-border-color');
 	}
 }
 
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index df17fd1d..0f382c77 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.scss
@@ -39,8 +39,8 @@
 .preview-console__header {
 	@include themify() {
 		background-color: getThemifyVariable('console-header-background-color');
+		color: getThemifyVariable('console-header-color');
 	}
-	color: $console-header-color;
 	padding: #{5 / $base-font-size}rem;
 	display: flex;
 	justify-content: space-between;
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index c539a757..408fd2fb 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -51,17 +51,19 @@
 }
 
 .preference__subtitle {
+	@include themify() {
+		color: getThemifyVariable('inactive-text-color');
+	}
 	width: 100%;
 	margin-bottom: #{10 / $base-font-size}rem;
 	margin-top: 0;
-	color: $light-inactive-text-color;
 }
 
 .preference__value {
 	@include themify() {
 		border: 2px solid getThemifyVariable('button-border-color');
 		background-color: getThemifyVariable('button-background-color');
-		color: $light-primary-text-color;
+		color: getThemifyVariable('input-text-color');
 	}
 	text-align: center;
 	border-radius: 0%;
@@ -72,13 +74,15 @@
 }
 
 .preference__label {
+	@include themify() {
+		color: getThemifyColor('inactive-text-color');
+		&:hover {
+			color: getThemifyColor('inactive-text-color');
+		}
+	}
 	margin: 0;
 	line-height: #{20 / $base-font-size}rem;
-	color: $light-inactive-text-color;
 	font-size: #{9 / $base-font-size}rem;
-	&:hover {
-		color: $light-inactive-text-color;
-	}
 }
 
 .preference__vertical-list {
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index abd47b72..e9142ef0 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -29,7 +29,10 @@
 }
 
 .sidebar__file-list {
-  border-top: 1px solid $ide-border-color;
+  @include themify() {
+    border-color: getThemifyVariable('ide-border-color')
+  }
+  border-top: 1px solid;
   .sidebar--contracted & {
     display: none;
   }
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index f66ef02a..cee5f6ad 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -49,8 +49,9 @@
 
 .toolbar__project-name-container {
 	@include themify() {
-		border-left: 2px dashed map-get($theme-map, 'inactive-text-color');
+		border-color: getThemifyVariable('inactive-text-color');
 	}
+	border-left: 2px dashed;
 	margin-left: #{10 / $base-font-size}rem;
 	padding-left: #{10 / $base-font-size}rem;
 	height: 70%;
@@ -59,14 +60,13 @@
 }
 
 .toolbar__project-name {
-	color: $light-inactive-text-color;
+	@include themify() {
+		color: getThemifyVariable('inactive-text-color');
+		&:hover {
+		color: getThemifyVariable('primary-text-color');
+		}
+	}
 	cursor: pointer;
-	&:hover {
-		color: $light-primary-text-color;
-	}
-	&:focus {
-		color: $light-inactive-text-color;
-	}
 
 	.toolbar__project-name-container--editing & {
 		display: none;