fix: add light/dark detection functionality to the button (#15)

assets/scss/layout/_details.scss

@@ -136,6 +136,10 @@
 
                 border-radius: 50%;
                 transform: rotate(-45deg);
+
+                &.light-text {
+                    color:#fff;
+                }
             }
         }
 

pages/work/_id.vue

@@ -267,13 +267,68 @@ export default {
       const body = document.body
       body.classList.add('detail')
     },
+    lightOrDark(color) {
+      // Variables for red, green, blue values
+      var r, g, b, hsp;
+      // Check the format of the color, HEX or RGB?
+      if (color.match(/^rgb/)) {
+          // If RGB --> store the red, green, blue values in separate variables
+          color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+        
+          r = color[1];
+          g = color[2];
+          b = color[3];
+      } 
+      else {
+          // If hex --> Convert it to RGB: http://gist.github.com/983661
+          color = +("0x" + color.slice(1).replace( 
+          color.length < 5 && /./g, '$&$&'));
+
+          r = color >> 16;
+          g = color >> 8 & 255;
+          b = color & 255;
+      }
+      
+      // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
+      hsp = Math.sqrt(
+      0.299 * (r * r) +
+      0.587 * (g * g) +
+      0.114 * (b * b)
+      );
+
+      // Using the HSP value, determine whether the color is light or dark
+      if (hsp>127.5) {
+          return 'light';
+      } 
+      else {
+          return 'dark';
+      }
+    },
+    adjustTextColor() {
+      var element, bgColor, brightness;
+
+      element = document.querySelector(".container__detail--live a")
+      // Get the element's background color
+      bgColor = window.getComputedStyle(element, null).getPropertyValue('background-color');
+      // Call lightOrDark function to get the brightness (light or dark)
+      brightness = this.lightOrDark(bgColor);
+      // If the background color is dark, add the light-text class to it
+      if(brightness == 'dark') {
+        element.classList.add('light-text');
+      }
+      else {
+        element.classList.add('dark-text');
+      }
+    }
   },
   mounted() {
     window.scrollTo(0, 0)
+    this.adjustTextColor()
     this.applyColor()
     this.addClass()
   },
   beforeUpdate() {
+    this.adjustTextColor()
     this.applyColor()
     this.addClass()
   },