Update dark theme colors

Author: catarak

client/images/triangle-arrow-down-white.svg

@@ -53,17 +53,17 @@ $themes: (
     button-background-hover-color: $p5js-pink,
     button-background-active-color: $p5js-active-pink,
     button-nav-inactive-color: $middle-gray,
-    button-hover-color: $white,
-    button-active-color: $white,
+    button-hover-color: $lightest,
+    button-active-color: $lightest,
     modal-background-color: $light,
     preferences-button-background-color: $medium-light,
     modal-border-color: $middle-light,
     icon-color: $middle-gray,
     icon-hover-color: $darker,
-    icon-toast-hover-color: $white,
+    icon-toast-hover-color: $lightest,
     shadow-color: rgba(0, 0, 0, 0.16),
     console-background-color: $light,
-    console-color: $white,
+    console-color: $lightest,
     console-header-background-color: $medium-light,
     console-header-color: $darker,
     console-info-background-color: $lightsteelblue,
@@ -92,11 +92,11 @@ $themes: (
     primary-button-color: $lightest,
     primary-button-background-color: $p5js-pink,
 
-    table-button-color: $white,
+    table-button-color: $lightest,
     table-button-background-color: $middle-gray,
-    table-button-active-color: $white,
+    table-button-active-color: $lightest,
     table-button-background-active-color: #00A1D3,
-    table-button-hover-color: $white,
+    table-button-hover-color: $lightest,
     table-button-background-hover-color: $p5js-pink,
 
     progress-bar-background-color: $middle-gray,
@@ -107,51 +107,51 @@ $themes: (
     form-input-text-color: $dark,
     form-input-placeholder-text-color: $middle-light,
     form-border-color: $middle-light,
-    form-button-background-color: $white,
+    form-button-background-color: $lightest,
     form-button-color: $p5js-active-pink,
     form-button-background-hover-color: $p5js-pink,
     form-button-background-active-color: $p5js-active-pink,
-    form-button-hover-color: $white,
-    form-button-active-color: $white,
+    form-button-hover-color: $lightest,
+    form-button-active-color: $lightest,
     form-navigation-options-color: $middle-dark
   ),
   dark: (
     logo-color: $p5js-pink,
     heavy-text-color: $lightest,
-    primary-text-color: $white,
+    primary-text-color: $lightest,
     dropzone-text-color: $black,
-    modal-button-color: $white,
-    heading-text-color: $white,
-    secondary-text-color: #DADADA,
-    inactive-text-color: #b5b5b5,
-    background-color: #333,
-    button-background-color: $white,
-    button-color: $black,
-    button-border-color: #979797,
+    modal-button-color: $lightest,
+    heading-text-color: $lightest,
+    secondary-text-color: $medium-light,
+    inactive-text-color: $middle-light,
+    background-color: $darker,
+    button-background-color: $lightest,
+    button-color: $darkest,
+    button-border-color: $middle-gray,
     toolbar-button-color: $p5js-pink,
-    toolbar-button-background-color: #424242,
+    toolbar-button-background-color: $medium-dark,
     button-background-hover-color: $p5js-pink,
-    button-background-active-color: #f10046,
-    button-nav-inactive-color: #a0a0a0,
-    button-hover-color: $white,
-    button-active-color: $white,
-    modal-background-color: #444,
-    preferences-button-background-color: #5f5f5f,
-    modal-border-color: #949494,
-    icon-color: #a9a9a9,
-    icon-hover-color: $white,
-    icon-toast-hover-color: $white,
+    button-background-active-color: $p5js-active-pink,
+    button-nav-inactive-color: $middle-light,
+    button-hover-color: $lightest,
+    button-active-color: $lightest,
+    modal-background-color: $dark,
+    preferences-button-background-color: $middle-dark,
+    modal-border-color: $middle-dark,
+    icon-color: $middle-light,
+    icon-hover-color: $lightest,
+    icon-toast-hover-color: $lightest,
     shadow-color: rgba(0, 0, 0, 0.16),
-    console-background-color: #4f4f4f,
-    console-color: $black,
-    console-header-background-color: #3f3f3f,
-    console-header-color: #b5b5b5,
+    console-background-color: $dark,
+    console-color: $lightest,
+    console-header-background-color: $medium-dark,
+    console-header-color: $lightest,
     console-info-background-color: $lightsteelblue,
     console-warn-background-color: $orange,
     console-debug-background-color: $dodgerblue,
     console-error-background-color: $red,
-    ide-border-color: #949494,
-    editor-gutter-color: #363636,
+    ide-border-color: $middle-dark,
+    editor-gutter-color: $darker,
     file-hover-color: #404040,
     file-selected-color: #404040,
     input-text-color: #333,
@@ -173,13 +173,13 @@ $themes: (
     primary-button-background-color: $p5js-pink,
 
     table-button-color: $white,
-    table-button-background-color: #979797,
+    table-button-background-color: $middle-gray,
     table-button-active-color: $white,
     table-button-background-active-color: #00A1D3,
     table-button-hover-color: $white,
     table-button-background-hover-color: $p5js-pink,
 
-    progress-bar-background-color: #979797,
+    progress-bar-background-color: $middle-gray,
     progress-bar-active-color: #f10046,
 
     form-title-color: $white,

client/styles/abstracts/_variables.scss

@@ -78,7 +78,7 @@
 .preview-console__clear {
 	@include themify() {
 		@extend %link;
-		color: getThemifyVariable('primary-text-color');
+		color: getThemifyVariable('inactive-text-color');
 		// &:hover {
 		// 	color: getThemifyVariable('console-header-color');
 		// }

client/styles/components/_console.scss

@@ -12,7 +12,7 @@
 
 $p5-dark-lightbrown: #A67F59;
 $p5-light-green: #42F48F;
-$p5-dark-black: #333;
+$p5-dark-black: #1C1C1C;
 $p5-dark-pink: #D9328F;
 $p5-dark-gray: #999999;
 $p5-dark-lightblue: #0F9DD7;