diff --git a/client/images/play.svg b/client/images/play.svg
index 98d2ae1d..aff6d461 100644
--- a/client/images/play.svg
+++ b/client/images/play.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16px" height="16px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
     <title>play</title>
     <!-- <desc>Created with Sketch.</desc> -->
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index dadf6267..46877c20 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -1,48 +1,52 @@
 %toolbar-button {
-	display: inline-block;
-	height: #{44 / $base-font-size}rem;
-	width: #{44 / $base-font-size}rem;
-	text-align: center;
-	border-radius: 100%;
-	line-height: #{46 / $base-font-size}rem;
-	cursor: pointer;
-	border: none;
-	outline: none;
-	background-color: $light-button-background-color;
-	color: $light-button-color;
-	& g {
-		fill: $light-toolbar-button-color;
-	}
-	&:hover {
-		background-color: $light-button-background-hover-color;
-		color: $light-button-hover-color;
-
+	@include themify() {
+		display: inline-block;
+		height: #{44 / $base-font-size}rem;
+		width: #{44 / $base-font-size}rem;
+		text-align: center;
+		border-radius: 100%;
+		line-height: #{46 / $base-font-size}rem;
+		cursor: pointer;
+		border: none;
+		outline: none;
+		background-color: getThemifyVariable('toolbar-button-background-color');
+		color: getThemifyVariable('toolbar-button-color');
 		& g {
-			fill: $light-button-hover-color;
+			fill: getThemifyVariable('toolbar-button-color');
 		}
+		&:hover {
+			background-color: getThemifyVariable('button-background-hover-color');
+			color: getThemifyVariable('button-hover-color');
+
+			& g {
+				fill: getThemifyVariable('button-hover-color');
+			}
+		}
+		&--selected {
+	    background-color: getThemifyVariable('button-background-hover-color');
+	    & g {
+	        fill: getThemifyVariable('button-hover-color');
+	    }
+	  }
 	}
-	&--selected {
-    background-color: $light-button-background-hover-color;
-    & g {
-        fill: $light-button-hover-color;
-    }
-  }
 }
 
 %icon {
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	padding: 0;
-	color: $light-icon-color;
-	& g {
-		fill: $light-icon-color;
-	}
-	&:hover {
-		color: $light-icon-hover-color;
+	@include themify() {
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+		padding: 0;
+		color: getThemifyVariable('icon-color');
 		& g {
-			opacity: 1;
-			fill: $light-icon-hover-color;
+			fill: getThemifyVariable('icon-color');
+		}
+		&:hover {
+			color: getThemifyVariable('icon-hover-color');
+			& g {
+				opacity: 1;
+				fill: getThemifyVariable('icon-hover-color');
+			}
 		}
 	}
 }
@@ -68,19 +72,21 @@
 
 %preferences-button {
 	@extend %toolbar-button;
-	color: $light-primary-text-color;
-	background-color: $light-modal-button-background-color;
-	padding: 0;
-	margin-bottom: #{28 / $base-font-size}rem;
-	line-height: #{50 / $base-font-size}rem;
-	& g {
-		fill: $light-primary-text-color;
-	}
-	&:hover {
-		background-color: $light-button-background-hover-color;
-		color: $light-button-hover-color;
+	@include themify() {
+		color: getThemifyVariable('primary-text-color');
+		background-color: getThemifyVariable('modal-button-background-color');
+		padding: 0;
+		margin-bottom: #{28 / $base-font-size}rem;
+		line-height: #{50 / $base-font-size}rem;
 		& g {
-			fill: $light-button-hover-color;
+			fill: getThemifyVariable('primary-text-color');
+		}
+		&:hover {
+			background-color: getThemifyVariable('button-background-hover-color');
+			color: getThemifyVariable('button-hover-color');
+			& g {
+				fill: getThemifyVariable('button-hover-color');
+			}
 		}
 	}
 }
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 45d1b3b2..512c2fa8 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -15,6 +15,7 @@ $themes: (
     button-color: $black,
     button-border-color: #979797,
     toolbar-button-color: $p5js-pink,
+    toolbar-button-background-color: #f4f4f4,
     button-background-hover-color: $p5js-pink,
     button-background-active-color: #f10046,
     button-hover-color: $white,
@@ -38,6 +39,7 @@ $themes: (
     button-color: $black,
     button-border-color: #979797,
     toolbar-button-color: $p5js-pink,
+    toolbar-button-background-color: #424242,
     button-background-hover-color: $p5js-pink,
     button-background-active-color: #f10046,
     button-hover-color: $white,
diff --git a/client/styles/components/_about.scss b/client/styles/components/_about.scss
index b04fc160..6a94ff25 100644
--- a/client/styles/components/_about.scss
+++ b/client/styles/components/_about.scss
@@ -12,7 +12,9 @@
 }
 
 .about__exit-button {
-  @extend %icon;
+  @include themify() {
+    @extend %icon;
+  }
 }
 
 .about__copy {
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index d96dfd4c..353e8e77 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.scss
@@ -51,16 +51,20 @@
 }
 
 .preview-console__collapse {
-	@extend %icon;
-	.preview-console--collapsed & {
-		display: none;
+	@include themify() {
+		@extend %icon;
+		.preview-console--collapsed & {
+			display: none;
+		}
 	}
 }
 
 .preview-console__expand {
-	@extend %icon;
-	display: none;
-	.preview-console--collapsed & {
-		display: inline-block;
+	@include themify() {
+		@extend %icon;
+		display: none;
+		.preview-console--collapsed & {
+			display: inline-block;
+		}
 	}
 }
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index a3aa9588..27a9df64 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -62,11 +62,13 @@
 }
 
 .editor__options-button {
-  @extend %icon;
-  position: absolute;
-  top: #{5 / $base-font-size}rem;
-  right: #{5 / $base-font-size}rem;
-  z-index: 1;
+  @include themify() {
+    @extend %icon;
+    position: absolute;
+    top: #{5 / $base-font-size}rem;
+    right: #{5 / $base-font-size}rem;
+    z-index: 1;
+  }
 }
 
 .editor__options {
diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss
index 44b8e80f..8f276100 100644
--- a/client/styles/components/_modal.scss
+++ b/client/styles/components/_modal.scss
@@ -21,7 +21,9 @@
 }
 
 .modal__exit-button {
-  @extend %icon;
+  @include themify() {
+    @extend %icon;
+  }
 }
 
 .modal__header {
@@ -88,7 +90,9 @@
 }
 
 .keyboard-shortcuts__close {
-  @extend %icon;
+  @include themify() {
+    @extend %icon;
+  }
 }
 
 .keyboard-shortcut-item {
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index e9bfedf1..9b132f43 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -13,8 +13,10 @@
 }
 
 .preferences__exit-button {
-	@extend %icon;
-	padding-top: #{5 / $base-font-size}rem;
+	@include themify() {
+		@extend %icon;
+		padding-top: #{5 / $base-font-size}rem;
+	}
 }
 
 .preference__plus-button {
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index 2081f4a0..fea5b642 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -18,13 +18,15 @@
 }
 
 .sidebar__add {
-  @extend %icon;
-  cursor: pointer;
-  // height: #{26 / $base-font-size}rem;
-  // margin-right: #{16 / $base-font-size}rem;
-  // font-size: #{24 / $base-font-size}rem;
-  .sidebar--contracted & {
-    display: none;
+  @include themify() {
+    @extend %icon;
+    cursor: pointer;
+    // height: #{26 / $base-font-size}rem;
+    // margin-right: #{16 / $base-font-size}rem;
+    // font-size: #{24 / $base-font-size}rem;
+    .sidebar--contracted & {
+      display: none;
+    }
   }
 }
 
@@ -91,12 +93,14 @@
 }
 
 .sidebar__file-item-show-options {
-  @extend %icon;
-  display: none;
-  position: absolute;
-  right: #{26 / $base-font-size}rem;
-  .sidebar__file-item--selected > .file-item__content & {
-    display: inline-block;
+  @include themify() {
+    @extend %icon;
+    display: none;
+    position: absolute;
+    right: #{26 / $base-font-size}rem;
+    .sidebar__file-item--selected > .file-item__content & {
+      display: inline-block;
+    }
   }
 }
 
@@ -128,26 +132,30 @@
 }
 
 .sidebar__contract {
-  @extend %icon;
-  margin-left: #{10 / $base-font-size}rem;
-  height: #{14 / $base-font-size}rem;
-  & svg {
+  @include themify() {
+    @extend %icon;
+    margin-left: #{10 / $base-font-size}rem;
     height: #{14 / $base-font-size}rem;
-  }
-  .sidebar--contracted & {
-    display: none;
+    & svg {
+      height: #{14 / $base-font-size}rem;
+    }
+    .sidebar--contracted & {
+      display: none;
+    }
   }
 }
 
 .sidebar__expand {
-  @extend %icon;
-  height: #{14 / $base-font-size}rem;
-  & svg {
+  @include themify() {
+    @extend %icon;
     height: #{14 / $base-font-size}rem;
-  }
-  display: none;
-  .sidebar--contracted & {
-    display: inline-block;
+    & svg {
+      height: #{14 / $base-font-size}rem;
+    }
+    display: none;
+    .sidebar--contracted & {
+      display: inline-block;
+    }
   }
 }
 
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 2a3a5d5f..a630b148 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -30,5 +30,7 @@
 }
 
 .sketch-list__exit-button {
-  @extend %icon;
+  @include themify() {
+    @extend %icon;
+  }
 }
\ No newline at end of file
diff --git a/client/styles/components/_toast.scss b/client/styles/components/_toast.scss
index 5a321152..0f63ce52 100644
--- a/client/styles/components/_toast.scss
+++ b/client/styles/components/_toast.scss
@@ -10,9 +10,12 @@
 }
 
 .toast__close {
-  @extend %icon;
-  & g {
-    fill: $toast-text-color; 
+  @include themify() {
+    @extend %icon;
+    color: $toast-text-color;
+    & g {
+      fill: $toast-text-color; 
+    }
+    margin-left: #{10 / $base-font-size}rem;
   }
-  margin-left: #{10 / $base-font-size}rem;
 }
\ No newline at end of file
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index 180d1bbe..0cf66900 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -1,11 +1,13 @@
 .toolbar__play-button {
-	@extend %toolbar-button;
-	margin-right: #{15 / $base-font-size}rem;
-	&--selected {
-		@extend %toolbar-button--selected;
-	}
-	& span {
-		padding-left: #{2 / $base-font-size}rem;
+	@include themify() {
+		@extend %toolbar-button;
+		margin-right: #{15 / $base-font-size}rem;
+		&--selected {
+			@extend %toolbar-button--selected;
+		}
+		& span {
+			padding-left: #{2 / $base-font-size}rem;
+		}
 	}
 }
 
@@ -14,25 +16,25 @@
 }
 
 .toolbar__stop-button {
-	@extend %toolbar-button;
-	&--selected {
-		@extend %toolbar-button--selected;
+	@include themify() {
+		@extend %toolbar-button;
+		&--selected {
+			@extend %toolbar-button--selected;
+		}
 	}
 }
 
 .toolbar__preferences-button {
-	@extend %toolbar-button;
-	line-height: #{50 / $base-font-size}rem;
-	margin-left: auto;
-	&--selected {
-		@extend %toolbar-button--selected;
+	@include themify() {
+		@extend %toolbar-button;
+		line-height: #{50 / $base-font-size}rem;
+		margin-left: auto;
+		&--selected {
+			@extend %toolbar-button--selected;
+		}
 	}
 }
 
-.toolbar__shortcut-button {
-
-}
-
 .toolbar__logo {
 	margin-right: #{30 / $base-font-size}rem;
 }