diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 46877c20..53cb5890 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -33,10 +33,6 @@
 
 %icon {
 	@include themify() {
-		background-color: transparent;
-		border: none;
-		cursor: pointer;
-		padding: 0;
 		color: getThemifyVariable('icon-color');
 		& g {
 			fill: getThemifyVariable('icon-color');
@@ -49,24 +45,30 @@
 			}
 		}
 	}
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	padding: 0;
 }
 
 %button {
-	background-color: $light-button-background-color;
-	color: $light-button-color;
-	cursor: pointer;
-	border: 1px solid $light-button-border-color;
-	border-radius: 2px;
-	padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
-	&:hover {
-		border-color: $light-button-background-hover-color;
-		background-color: $light-button-background-hover-color;
-		color: $light-button-hover-color;
-	}
-	&:active {
-		border-color: $light-button-background-active-color;
-		background-color: $light-button-background-active-color;
-		color: $light-button-active-color;
+	@include themify() {
+		background-color: getThemifyVariable('button-background-color');
+		color: getThemifyVariable('button-color');
+		cursor: pointer;
+		border: 1px solid getThemifyVariable('button-border-color');
+		border-radius: 2px;
+		padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
+		&:hover {
+			border-color: getThemifyVariable('button-background-hover-color');
+			background-color: getThemifyVariable('button-background-hover-color');
+			color: getThemifyVariable('button-hover-color');
+		}
+		&:active {
+			border-color: getThemifyVariable('button-background-active-color');
+			background-color: getThemifyVariable('button-background-active-color');
+			color: getThemifyVariable('button-active-color');
+		}
 	}
 }
 
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index dbf361c6..003a69ef 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -42,7 +42,9 @@ input {
 }
 
 input[type="submit"] {
-	@extend %button;
+	@include themify() {
+		@extend %button;
+	}
 }
 
 h2 {
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index 353e8e77..e9f195cb 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.scss
@@ -53,18 +53,18 @@
 .preview-console__collapse {
 	@include themify() {
 		@extend %icon;
-		.preview-console--collapsed & {
-			display: none;
-		}
+	}
+	.preview-console--collapsed & {
+		display: none;
 	}
 }
 
 .preview-console__expand {
 	@include themify() {
 		@extend %icon;
-		display: none;
-		.preview-console--collapsed & {
-			display: inline-block;
-		}
+	}
+	display: none;
+	.preview-console--collapsed & {
+		display: inline-block;
 	}
 }
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 27a9df64..d7dcd924 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -64,11 +64,11 @@
 .editor__options-button {
   @include themify() {
     @extend %icon;
-    position: absolute;
-    top: #{5 / $base-font-size}rem;
-    right: #{5 / $base-font-size}rem;
-    z-index: 1;
   }
+  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/_github-button.scss b/client/styles/components/_github-button.scss
index 6013fd08..79a782e1 100644
--- a/client/styles/components/_github-button.scss
+++ b/client/styles/components/_github-button.scss
@@ -1,18 +1,20 @@
 .github-button {
-  @extend %button;
-  width: #{300 / $base-font-size}rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  & path {
-    color: $light-primary-text-color;
-  }
-  &:hover path, &:active path {
-    fill: $white;
-  }
-  &:hover, &:active {
-    background-color: $light-secondary-text-color;
-    border-color: $light-secondary-text-color
+  @include themify() {
+    @extend %button;
+    width: #{300 / $base-font-size}rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    & path {
+      color: getThemifyVariable('primary-text-color');
+    }
+    &:hover path, &:active path {
+      fill: $white;
+    }
+    &:hover, &:active {
+      background-color: getThemifyVariable('secondary-text-color');
+      border-color: getThemifyVariable('secondary-text-color');
+    }
   }
 }
 
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 9b132f43..1d35772e 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -15,8 +15,8 @@
 .preferences__exit-button {
 	@include themify() {
 		@extend %icon;
-		padding-top: #{5 / $base-font-size}rem;
 	}
+	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 fea5b642..7c9f6832 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -20,13 +20,9 @@
 .sidebar__add {
   @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;
-    }
+  }
+  .sidebar--contracted & {
+    display: none;
   }
 }
 
@@ -95,12 +91,12 @@
 .sidebar__file-item-show-options {
   @include themify() {
     @extend %icon;
-    display: none;
-    position: absolute;
-    right: #{26 / $base-font-size}rem;
-    .sidebar__file-item--selected > .file-item__content & {
-      display: inline-block;
-    }
+  }
+  display: none;
+  position: absolute;
+  right: #{26 / $base-font-size}rem;
+  .sidebar__file-item--selected > .file-item__content & {
+    display: inline-block;
   }
 }
 
@@ -131,31 +127,31 @@
   }
 }
 
-.sidebar__contract {
-  @include themify() {
-    @extend %icon;
-    margin-left: #{10 / $base-font-size}rem;
-    height: #{14 / $base-font-size}rem;
-    & svg {
-      height: #{14 / $base-font-size}rem;
-    }
-    .sidebar--contracted & {
-      display: none;
-    }
-  }
-}
-
 .sidebar__expand {
   @include themify() {
     @extend %icon;
+  }
+  height: #{14 / $base-font-size}rem;
+  & svg {
     height: #{14 / $base-font-size}rem;
-    & svg {
-      height: #{14 / $base-font-size}rem;
-    }
+  }
+  display: none;
+  .sidebar--contracted & {
+    display: inline-block;
+  }
+}
+
+.sidebar__contract {
+  @include themify() {
+    @extend %icon;
+  }
+  margin-left: #{10 / $base-font-size}rem;
+  height: #{14 / $base-font-size}rem;
+  & svg {
+    height: #{14 / $base-font-size}rem;
+  }
+  .sidebar--contracted & {
     display: none;
-    .sidebar--contracted & {
-      display: inline-block;
-    }
   }
 }
 
diff --git a/client/styles/components/_toast.scss b/client/styles/components/_toast.scss
index 0f63ce52..f94642ff 100644
--- a/client/styles/components/_toast.scss
+++ b/client/styles/components/_toast.scss
@@ -12,10 +12,10 @@
 .toast__close {
   @include themify() {
     @extend %icon;
-    color: $toast-text-color;
-    & g {
-      fill: $toast-text-color; 
-    }
-    margin-left: #{10 / $base-font-size}rem;
   }
+  color: $toast-text-color;
+  & g {
+    fill: $toast-text-color; 
+  }
+  margin-left: #{10 / $base-font-size}rem;
 }
\ No newline at end of file