Add theming ability for various aspects of the startpage

Add support for theming varisou aspects of the page all from the
config.

Thanks to @benjih for the PR.

config.json

@@ -47,5 +47,17 @@
     "location": "Pune India",
     "unit": "cel"
   },
-  "settingsIcon": false
+  "settingsIcon": false,
+  "style": {
+    "backgroundColor": "#212121",
+    "messageColor": "#fff",
+    "dateColor": "#d9d9d9",
+    "lineColor": "#fff",
+    "weatherColor": "#d9d9d9",
+    "searchColor": "#fff",
+    "searchBackgroundColor": "#2e2e2e",
+    "squareColor": "#9e9e9e",
+    "squareBackgroundColor": "#2e2e2e",
+    "autocompleteHighlightBackgroundColor": "#3B3B3B"
+  }
 }

css/main.css

@@ -72,7 +72,8 @@ body {
         font-size: 18px;
         color: #fff;
         box-sizing: border-box;
-        z-index: -1; }
+        z-index: -1;
+        cursor: pointer; }
         .main #search-bar .autocomplete-items-container .autocomplete-item:hover {
           background: #3b3b3b; }
       .main #search-bar .autocomplete-items-container .autocomplete-active {
@@ -97,6 +98,9 @@ body {
       .main #other-content .sqr h4 {
         font-size: 18px;
         margin: 15px; }
+        .main #other-content .sqr h4 a {
+          color: inherit;
+          font-size: inherit; }
       .main #other-content .sqr:hover {
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
         transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }

js/autocomplete.js

@@ -1,4 +1,4 @@
-function autocomplete(inp, passedValues) {
+function autocomplete(inp, passedValues, style) {
     var currentFocus;
 
     /*execute a function when someone writes in the text field:*/
@@ -18,6 +18,9 @@ function autocomplete(inp, passedValues) {
         parentContainer.setAttribute("id", this.id + "-autocomplete-list");
         parentContainer.style.paddingBottom = "1rem";
 
+        if(style["searchBackgroundColor"]) {
+            parentContainer.style.backgroundColor = style["searchBackgroundColor"];
+        }
 
         /*for each item in the array...*/
         Object.keys(passedValues).forEach((el, i, arr) => {
@@ -30,6 +33,14 @@ function autocomplete(inp, passedValues) {
             // Add the url as an attribute
             item.setAttribute('url', passedValues[el]);
 
+            if(style["searchBackgroundColor"]) {
+                item.style.backgroundColor = style["searchBackgroundColor"];
+            }
+
+            if(style["searchColor"]) {
+                item.style.color = style["searchColor"];
+            }
+            
             /*make the matching letters bold:*/
             item.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
             item.innerHTML += arr[i].substr(val.length);

js/main.js

@@ -146,13 +146,13 @@ function updateTime() {
      */
     currentDate = new Date()
     options = {
-                day: 'numeric',
+            day: 'numeric',
-                month: 'short',
+            month: 'short',
-                hour: 'numeric',
+            hour: 'numeric',
-                minute: 'numeric',
+            minute: 'numeric',
-                hour12: disable24Hour,
+            hour12: disable24Hour,
-                timeZone: timeZ
+            timeZone: timeZ
-            }
+    }
     finalDate = currentDate.toLocaleString(undefined, options)
     document.getElementById(dateId).textContent = finalDate
 }
@@ -173,7 +173,7 @@ function updateWeather(weatherConfig) {
     userLocation = weatherConfig["location"].replace(/\ /g, ",")
     passedUnit = weatherConfig["unit"]
     unit = validWeatherUnit.includes(passedUnit.substring(0, 3)) ?
-            passedUnit : "cel"
+        passedUnit : "cel"
 
     fetchUrl = apiUrl + `?q=${userLocation}&appid=${appId}&units=metric`
 
@@ -184,7 +184,7 @@ function updateWeather(weatherConfig) {
             weatherType = jsonData["weather"][0]["main"]
 
             temp = !unit.includes("cel") ?
-                        getFahrenheit(temp) + "°F" : temp + "°C"
+                getFahrenheit(temp) + "°F" : temp + "°C"
             weatherText = temp + ", " + indexUppercase(weatherType)
             document.getElementById(weatherId).innerHTML = weatherText
         })
@@ -252,19 +252,66 @@ function parseAndCreate(jsonData) {
 
     sqrs = jsonData["squares"]
 
-    // Extract the quicklinks from the sqrs
-    extractQuickLinks(sqrs);
-
     sqrs.forEach((element, index) => {
         sqr = createSqr(element, index)
         document.getElementById(otherContentId).appendChild(sqr)
     })
 
+    // Apply styling if present
+    if (jsonData["style"]) {
+        styleData = jsonData["style"]
+        if (styleData["backgroundColor"]) {
+            document.body.style.backgroundColor = styleData["backgroundColor"]
+        }
+        if (styleData["messageColor"]) {
+            document.getElementById(messageId).style.color = styleData["messageColor"]
+        }
+        if (styleData["dateColor"]) {
+            document.getElementById(dateId).style.color = styleData["dateColor"]
+        }
+        if (styleData["lineColor"]) {
+            document.getElementById(lineId).style.color = styleData["lineColor"]
+        }
+        if (styleData["weatherColor"]) {
+            document.getElementById(weatherId).style.color = styleData["weatherColor"]
+        }
+        if (styleData["searchColor"]) {
+            document.getElementById(searchBarId).style.color = styleData["searchColor"]
+        }
+        if (styleData["searchBackgroundColor"]) {
+            document.getElementById(searchBarId).style.backgroundColor = styleData["searchBackgroundColor"]
+            autocompleteBackgroundColor = styleData["searchBackgroundColor"]
+        }
+        if (styleData["searchPlaceholderColor"]) {
+            document.getElementById(searchBarId).classList.add(createPlaceholderStyleClass(styleData["searchPlaceholderColor"]));
+        }
+        if (styleData["autocompleteHighlightBackgroundColor"]) {
+            addAutocompleteStyleClass(styleData["autocompleteHighlightBackgroundColor"]);
+        }
+        if (styleData["squareBackgroundColor"]) {
+            elements = document.getElementsByClassName("sqr")
+            var i;
+            for (i = 0; i < elements.length; i++) {
+                elements[i].style.backgroundColor = styleData["squareBackgroundColor"]
+            }
+        }
+        if (styleData["squareColor"]) {
+            elements = document.querySelectorAll(".sqr a")
+            var i;
+            for (i = 0; i < elements.length; i++) {
+                elements[i].style.color = styleData["squareColor"]
+            }
+        }
+    }
+
+    // Extract the quicklinks from the sqrs
+    extractQuickLinks(sqrs, jsonData["style"]);
 }
 
 function createSqr(sqrData, index) {
     // Create a new square division with the passed element
     name = sqrData["name"];
+    link = sqrData["url"];
     links = sqrData["links"];
     color = sqrData["color"];
 
@@ -286,9 +333,7 @@ function createSqr(sqrData, index) {
 
     div.classList.add(customClass);
 
-    h4 = document.createElement("h4")
+    h4 = getTitle(name, link);
-    h4.textContent = name
-
 
     div.appendChild(h4)
 
@@ -309,6 +354,32 @@ function createSqr(sqrData, index) {
     return div
 }
 
+function getTitle(titleContent, linkHref=null) {
+    /**
+     * Create the title for the sqr card.
+     * 
+     * The card will be optionally clicable and will open
+     * a new link.
+     * 
+     * If the link is not passed in the config then the title
+     * will not be clickable.
+     */
+    h4 = document.createElement("h4");
+
+    if (!linkHref) {
+        h4.textContent = titleContent;
+        return h4;
+    }
+
+    // If the link is passed, create a nested child
+    a = document.createElement("a");
+    a.setAttribute("href", linkHref);
+    a.textContent = titleContent;
+
+    h4.appendChild(a);
+    return h4;
+}
+
 // Utility functions
 
 function isValidTimeZone(tz) {
@@ -378,8 +449,53 @@ function createClass(color) {
     return newClassName;
 }
 
+function createPlaceholderStyleClass(color) {
+    /**
+     * Create a new class with for placeholder styling.
+     * 
+     * This is pretty much a continuation of what has done preivously
+     * in the createClass function.
+     */
+    var style = document.createElement('style');
+    const newClassName = `bg-${Math.random().toString(36).substring(7)}`;
+    style.type = 'text/css';
+    style.innerHTML = `::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+        color: ${color} !important;
+        opacity: 1; /* Firefox */
+      }
       
-function extractQuickLinks(passedSqrs) {
+      :-ms-input-placeholder { /* Internet Explorer 10-11 */
+        color: ${color} !important;
+      }
+      
+      ::-ms-input-placeholder { /* Microsoft Edge */color: ${color} !important;}`;
+    document.getElementsByTagName('head')[0].appendChild(style);
+
+    return newClassName;
+}
+
+function addAutocompleteStyleClass(color) {
+    /**
+     * Add some colors for the autocomplete classes in order to
+     * keep. We need to add styles for :hover property so it is
+     * easier to just inject some CSS.
+     */
+    var style = document.createElement("style");
+    style.type = "text/css";
+    style.innerHTML = `
+    .autocomplete-item:hover {
+        background: ${color} !important;
+    }
+
+    .autocomplete-active {
+        background: ${color} !important;
+    }
+    `;
+    document.getElementsByTagName('head')[0].appendChild(style);
+}
+
+
+function extractQuickLinks(passedSqrs, style) {
     /**
      * Extract the quicklinks passed in the config
      * 
@@ -392,7 +508,7 @@ function extractQuickLinks(passedSqrs) {
     });
 
     // Start the autocomplete
-    autocomplete(document.getElementById("search-bar-input"), this.validQuickLinks);
+    autocomplete(document.getElementById("search-bar-input"), this.validQuickLinks, style);
 }
 
 // Listen to key click

scss/main.scss

@@ -108,6 +108,7 @@ body {
                 color: $foreground;
                 box-sizing: border-box;
                 z-index: -1;
+                cursor: pointer;
 
                 &:hover {
                     background: lighten($background, 10);
@@ -143,6 +144,11 @@ body {
             h4 {
                 font-size: 18px;
                 margin: 15px;
+
+                a {
+                    color: inherit;
+                    font-size: inherit;
+                }
           }
 
             &:hover {