From 89263b149535fb83855919113dfb0c312704a595 Mon Sep 17 00:00:00 2001
From: Asif Bacchus <asif@bacchus.cloud>
Date: Wed, 8 Apr 2020 04:47:22 -0600
Subject: [PATCH] set colours via css variables

---
 js/particles.js    | 14 +++++++++++---
 scss/_palette.scss |  6 +++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/js/particles.js b/js/particles.js
index 8c79686..9a9e73f 100644
--- a/js/particles.js
+++ b/js/particles.js
@@ -5,6 +5,12 @@
 
 const canvas = document.getElementById('particles');
 const canvasContext = canvas.getContext('2d');
+
+// read css colour variables from root element
+const particleColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle');
+const strokeColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke');
+const strokeHoverColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke-hover');
+
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 
@@ -37,7 +43,7 @@ class Particle{
     draw(){
         canvasContext.beginPath();
         canvasContext.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
-        canvasContext.fillStyle = '#8c5523';
+        canvasContext.fillStyle = particleColour;
         canvasContext.fill();
     }
     // check particle position, mouse position, move particle and draw it
@@ -107,10 +113,12 @@ function connect(){
                 let dy = mousePosition.y - particlesArray[a].y;
                 let mouseDistance = Math.sqrt((dx * dx) + (dy * dy));
                 if (mouseDistance < 200) {
-                    canvasContext.strokeStyle = `rgba(60, 40, 15, ${opacityValue})`;
+                    canvasContext.globalAlpha = opacityValue;
+                    canvasContext.strokeStyle = strokeHoverColour;
                 }
                 else {
-                    canvasContext.strokeStyle = `rgba(140, 85, 31, ${opacityValue})`;
+                    canvasContext.globalAlpha = opacityValue;
+                    canvasContext.strokeStyle = strokeColour;
                 }
                 canvasContext.lineWidth = 1;
                 canvasContext.beginPath();
diff --git a/scss/_palette.scss b/scss/_palette.scss
index a5260f4..93d83a4 100644
--- a/scss/_palette.scss
+++ b/scss/_palette.scss
@@ -1,7 +1,7 @@
 // colours used thoughout site
 :root {
     --col-bg-canvas: #2c2830;
-    --col-particle: #692e50;
-    --col-stroke: #692e50;
-    --col-stroke-hover: #9aa68b;
+    --col-particle: #ebe7c5;
+    --col-particle-stroke: #692e50;
+    --col-particle-stroke-hover: #9aa68b;
 }