add random color option

Author: howtofly-lab

color.js

@@ -60,10 +60,38 @@ async function handleMessage(request, sender, sendResponse) {
         case "Pink":
             themeWindow(currentWindow, "white", pink, lightPink);
             break;
+        case "Random!": 
+            // colorPair will be an array of two colors,
+            // colorPair[0] = darkColor 
+            // colorPair[1] = lightColor
+            colorPair = getRandomColorPair();
+            textColor = "white";
+
+            //if colors are Orange or Yellow, textColor will be black
+            if (colorPair[0] == "#d3a116" || colorPair[0] == "#f5f423"){
+                textColor = "black";
+            }
+            themeWindow(currentWindow, textColor, colorPair[0], colorPair[1]);
+            break;
         default:
             themeWindow_default(currentWindow);
     }
 }
 
+// function to get a random color pair.
+// here, I tranformed colors that were set
+// as a 2D array where each inner array
+// is a pair of a darkColor and a lightColor
+// e.g. [#b02300","#df6142"] = [red, lightRed]
+function getRandomColorPair() {
+    colors = [["#b02300","#df6142"],["#d3a116","#dfbb58"],
+                ["#f5f423","#fafa8e"], ["#3f6215", "#5e8231"],
+                ["#5660fc", "#727ae6"],["#8509eb", "#a266cd"],
+                ["#ba4a8e","#cb76a9"]]
+    var pair = colors[Math.floor(Math.random()*colors.length)];
+    //returns random pair of colors
+    return pair;
+}
+
 browser.runtime.onMessage.addListener(handleMessage);
 

popup.css

@@ -83,6 +83,14 @@ body {
   background-color: #cb76a9;
 }
 
+.button8 {
+  background-color: #808080;
+}
+
+.button8:hover {
+  background-color: #acabab;
+}
+
 .button[type="reset"] {
   background-color: #555555;
 }

popup.html

@@ -15,6 +15,7 @@
     <button class="button button5">Blue</button>
     <button class="button button6">Purple</button>
     <button class="button button7">Pink</button>
+    <button class="button button8">Random!</button>
     <button type="reset">Reset</button>
   </div>
   <script src="popup.js"></script>