diff --git a/client/images/triangle-arrow-down-white.svg b/client/images/triangle-arrow-down-white.svg
index a66e9ff6..75fd5567 100644
--- a/client/images/triangle-arrow-down-white.svg
+++ b/client/images/triangle-arrow-down-white.svg
@@ -3,7 +3,7 @@
Created with Sketch.
-
+
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index b76098d5..3996fc97 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -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,
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index 16999c9e..04374947 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.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');
// }
diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss
index bd073941..6cc3b074 100644
--- a/client/styles/components/_p5-dark-codemirror-theme.scss
+++ b/client/styles/components/_p5-dark-codemirror-theme.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;