From 1dafe3a8e94c0972436511177e4aace5d0763ef4 Mon Sep 17 00:00:00 2001
From: Mathura MG <mmg9291@gmail.com>
Date: Mon, 17 Oct 2016 22:57:29 -0400
Subject: [PATCH] Make p5 logo color variable (#150)

* initial changes for high contrast theme

* change more colours

* add more styles

* add new variables

* fix few more colours

* fix typo

* fix indent

* make logo colour a variable
---
 client/images/p5js-logo.svg              | 2 +-
 client/modules/IDE/components/Toolbar.js | 2 +-
 client/styles/abstracts/_variables.scss  | 3 +++
 client/styles/components/_toolbar.scss   | 5 +++++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/images/p5js-logo.svg b/client/images/p5js-logo.svg
index e35b924c..57573167 100644
--- a/client/images/p5js-logo.svg
+++ b/client/images/p5js-logo.svg
@@ -11,4 +11,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/client/modules/IDE/components/Toolbar.js b/client/modules/IDE/components/Toolbar.js
index 831edb34..77ad125f 100644
--- a/client/modules/IDE/components/Toolbar.js
+++ b/client/modules/IDE/components/Toolbar.js
@@ -50,7 +50,7 @@ class Toolbar extends React.Component {
 
     return (
       <div className="toolbar">
-        <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
+        <InlineSVG className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
         <button
           className="toolbar__play-sketch-button"
           onClick={() => {
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 8bbe4ebc..f5eb7d78 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -8,6 +8,7 @@ $yellow: #F5DC23;
 
 $themes: (
   light: (
+    logo-color: $p5js-pink,
     primary-text-color: #333,
     modal-button-color: #333,
     heading-text-color: #333,
@@ -39,6 +40,7 @@ $themes: (
     input-border-color: #979797,
   ),
   dark: (
+    logo-color: $p5js-pink,
     primary-text-color: $white,
     modal-button-color: $white,
     heading-text-color: $white,
@@ -70,6 +72,7 @@ $themes: (
     input-border-color: #979797,
   ),
   contrast: (
+    logo-color: $yellow,
     primary-text-color: $yellow,
     modal-button-color: #333,
     heading-text-color: #e1e1e1,
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index 80d752ee..12725a52 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -52,6 +52,11 @@
 
 .toolbar__logo {
 	margin-right: #{30 / $base-font-size}rem;
+	@include themify() {
+		& g {
+			fill: getThemifyVariable('logo-color');
+		}
+	}
 }
 
 .toolbar {