diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index fb8131ce..4e0b172f 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -172,7 +172,7 @@
 %link {
 	@include themify() {
 		text-decoration: none;
-		color: getThemifyVariable('secondary-text-color');
+		color: getThemifyVariable('inactive-text-color');
 		cursor: pointer;
 		&:hover {
 			text-decoration: none;
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 7348178b..8d3bd60f 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -37,6 +37,7 @@ $darkest: #000;
 $themes: (
   light: (
     logo-color: $p5js-pink,
+    logo-background-color: $lightest,
     heavy-text-color: $darker,
     primary-text-color: $dark,
     secondary-text-color: $medium-dark,
@@ -75,6 +76,7 @@ $themes: (
     file-selected-color: $medium-light,
     input-text-color: $dark,
     input-background-color: $lightest,
+    input-secondary-background-color: $lightest,
     input-border-color: $middle-light,
     search-background-color: $lightest,
     search-clear-background-color: $light,
@@ -109,6 +111,7 @@ $themes: (
   ),
   dark: (
     logo-color: $p5js-pink,
+    logo-background-color: $lightest,
     heavy-text-color: $lightest,
     primary-text-color: $lightest,
     dropzone-text-color: $black,
@@ -147,6 +150,7 @@ $themes: (
     file-selected-color: $medium-dark,
     input-text-color: $lightest,
     input-background-color: $dark,
+    input-secondary-background-color: $medium-dark,
     input-border-color: $middle-dark,
     search-background-color: $lightest,
     search-clear-background-color: $medium-dark,
@@ -179,6 +183,7 @@ $themes: (
   ),
   contrast: (
     logo-color: $yellow,
+    logo-background-color: $darker,
     heavy-text-color: $yellow,
     primary-text-color: $lightest,
     dropzone-text-color: $black,
@@ -217,6 +222,7 @@ $themes: (
     file-selected-color: $medium-dark,
     input-text-color: $lightest,
     input-background-color: $dark,
+    input-secondary-background-color: $medium-dark,
     input-border-color: $middle-dark,
     search-background-color: $white,
     search-clear-background-color: $medium-dark,
@@ -226,7 +232,7 @@ $themes: (
     nav-hover-color: $yellow,
     nav-border-color: $middle-dark,
     error-color: $p5-contrast-pink,
-    table-row-stripe-color: dark,
+    table-row-stripe-color: $dark,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
     codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
 
@@ -249,11 +255,16 @@ $themes: (
   )
 );
 
-$console-warn-color: #ffbe05;
-$console-error-color: #ff5f52;
-
-$toast-background-color: #4A4A4A;
+$toast-background-color: $medium-dark;
 $toast-text-color: $lightest;
 
+$light-console-error-color: #D11518;
+$light-console-warn-color: #FAAF00;
+$light-console-debug-color: #007BBB;
+
+$dark-console-error-color: #DF3A3D;
+$dark-console-warn-color: #F5BC38;
+$dark-console-debug-color: #0C99E2;
+
 $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/_collection.scss b/client/styles/components/_collection.scss
index ff488192..fbc1fed7 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -39,12 +39,8 @@
   // padding: #{8 / $base-font-size}rem 0;
 }
 
-.collection-metadata__name .editable-input__label span {
-  padding: 0.83333rem 0;
-
-  @include themify() {
-    color: getThemifyVariable('primary-text-color');
-  }
+.collection-metadata__name .editable-input__label {
+  padding: 0.83333rem #{7 / $base-font-size}rem;
 }
 
 .collection-metadata__name,
@@ -63,9 +59,9 @@
 }
 
 .collection-metadata__description {
-  margin-top: #{8 / $base-font-size}rem;
+  padding-top: #{8 / $base-font-size}rem;
   text-align: left;
-  font-size: 14px;
+  font-size: #{14 / $base-font-size}rem;
 }
 
 .collection-metadata__description .editable-input__label {
diff --git a/client/styles/components/_editable-input.scss b/client/styles/components/_editable-input.scss
index b649c333..c64fd240 100644
--- a/client/styles/components/_editable-input.scss
+++ b/client/styles/components/_editable-input.scss
@@ -4,15 +4,18 @@
   align-items: center;
 }
 
-.editable-input__label {
+button.editable-input__label {
   display: flex;
 
   @include themify() {
     color: getThemifyVariable('inactive-text-color');
+    & path {
+      fill: getThemifyVariable('inactive-text-color');
+    }
     &:hover {
-    color: getThemifyVariable('primary-text-color');
-      & .editable-input__icon path {
-        fill: getThemifyVariable('primary-text-color');
+    color: getThemifyVariable('logo-color');
+      & path {
+        fill: getThemifyVariable('logo-color');
       }
     }
   }
@@ -23,23 +26,13 @@
   font-weight: unset;
 }
 
+.editable-input__input {
+  width: 100%;
+}
+
 .editable-input__icon svg {
   width: 1.5rem;
   height: 1.5rem;
-
-  @include themify() {
-    path {
-      fill: getThemifyVariable('inactive-text-color');
-    }
-  }
-}
-
-.editable-input:hover {
-  @include themify() {
-    .editable-input__icon path {
-      fill: getThemifyVariable('primary-text-color');
-    }
-  }
 }
 
 .editable-input--is-not-editing .editable-input__input,
@@ -49,5 +42,5 @@
 
 .editable-input--is-editing .editable-input__input,
 .editable-input--is-not-editing .editable-input__label {
-  display: block;
+  display: flex;
 }
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 23397bb8..fe9de97e 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -173,13 +173,19 @@
 }
 .svg__logo g > path {
   @include themify() {
-      fill: getThemifyVariable('logo-color');
-    }
+    fill: getThemifyVariable('logo-color');
+  }
 }
 .svg__logo g g:first-of-type path {
   fill: none;
 }
 
+.svg__logo g g:first-of-type use {
+  @include themify() {
+    fill: getThemifyVariable('logo-background-color');
+  }
+}
+
 .nav__keyboard-shortcut {
   font-size: #{12 / $base-font-size}rem;
   font-family: Inconsololata, monospace;
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index aedd43e4..eb3d00b3 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -99,9 +99,9 @@
 
 .preference__label {
   @include themify() {
-    color: getThemifyVariable("inactive-text-color");
+    color: getThemifyVariable("secondary-text-color");
     &:hover {
-      color: getThemifyVariable("primary-text-color");
+      color: getThemifyVariable("heavy-text-color");
     }
   }
   margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index cfa3be2d..7ec8532f 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -235,7 +235,7 @@
   margin-right: #{5 / $base-font-size}rem;
   & g {
     @include themify() {
-      fill: getThemifyVariable('icon-color');
+      fill: getThemifyVariable('secondary-text-color');
     }
   }
   & svg {
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index 35100cdd..dc160b5e 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -109,11 +109,11 @@
 
 .toolbar__project-name {
 	@include themify() {
-		color: getThemifyVariable('logo-color');
+		color: getThemifyVariable('secondary-text-color');
 		&:hover {
-		color: getThemifyVariable('primary-text-color');
+		color: getThemifyVariable('logo-color');
 		  & .toolbar__edit-name-button path {
-		  	fill: getThemifyVariable('primary-text-color');
+		  	fill: getThemifyVariable('logo-color');
 		  }
 		}
 	}
@@ -159,7 +159,7 @@
 	}
 	@include themify() {
 		& path {
-			fill: getThemifyVariable('logo-color');
+			fill: getThemifyVariable('secondary-text-color');
 		}
 	}
 }
diff --git a/client/styles/components/_uploader.scss b/client/styles/components/_uploader.scss
index c7e87799..5d3e9de0 100644
--- a/client/styles/components/_uploader.scss
+++ b/client/styles/components/_uploader.scss
@@ -1,9 +1,14 @@
 .dropzone {
   @include themify() {
-    color: getThemifyVariable('dropzone-text-color');
+    background-color: getThemifyVariable('input-secondary-background-color');
+    color: getThemifyVariable('input-text-color');
   }
 }
 
+.dropzone .dz-preview.dz-image-preview {
+  background-color: transparent;
+}
+
 .uploader {
   min-height: #{200 / $base-font-size}rem;
   width: 100%;