Add a color picker to enhance the devicon.dev ui (#704)

Co-authored-by: Clemens Bastian <8781699+amacado@users.noreply.github.com>

docs/assets/css/style.css

@@ -409,3 +409,9 @@ header {
 .footer {
   margin-top: 6rem;
   text-align: center; }
+
+input[type='color'] {
+  width: 1.25em;
+  height: 1.25em;
+  margin-left: 0.5em;
+}

docs/assets/js/script.js

@@ -1,4 +1,5 @@
 var devicon = angular.module('devicon', ['ngSanitize', 'ngAnimate']);
+const DEFAULT_BACKGROUND = "#60be86";
 
 /*
 ||==============================================================
@@ -34,9 +35,15 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
     |-----------------------------------------
     */
 
+    // icons related stuff
     $scope.icons = [];
     $scope.selectedIcon = {};
 
+    // background color related stuff
+    // default is the default site background color
+    $scope.fontBackground = DEFAULT_BACKGROUND;
+    $scope.svgBackground = DEFAULT_BACKGROUND;
+
     // Loop through devicon.json
     angular.forEach(data, function(devicon, key) {
 
@@ -95,6 +102,9 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
     $scope.selectedFontIndex = 0;
     $scope.selectedSvgIcon = $scope.selectSvg(icon.svg[0], 0);
 
+    // reset color
+    $scope.fontBackground = DEFAULT_BACKGROUND;
+    $scope.svgBackground = DEFAULT_BACKGROUND;
   }
   /*---- End of "Change selected icon" ----*/
 
@@ -145,7 +155,6 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
     });
   }
   /*---- End of "Change selected svg icon" ----*/
-
 });
 
 /*================ End of "Devicons controller" ================*/

docs/index.html

@@ -54,13 +54,13 @@
       <h5>First select an icon on the right, then select the version below and copy/paste the code into your project.</h5>
       <ul>
         <li>
-          <h4>Font versions</h4>
+          <h4>Font versions <input type='color' value='#60be86' ng-model="fontBackground"></h4>
           <ul class="icons-list">
             <div ng-repeat="fontVersion in selectedIcon.font">
-              <li ng-click="selectFont(fontVersion, false, $index)" ng-class="{'selected-version' : ($index == selectedFontIndex && !colored)}">
+              <li ng-click="selectFont(fontVersion, false, $index)" ng-class="{'selected-version' : ($index == selectedFontIndex && !colored)}" ng-style="{'background-color': fontBackground}">
                 <i class="devicon-{{selectedIcon.name}}-{{fontVersion}}"></i>
               </li>
-              <li ng-click="selectFont(fontVersion, true, $index)" ng-class="{'selected-version' : ($index == selectedFontIndex && colored)}">
+              <li ng-click="selectFont(fontVersion, true, $index)" ng-class="{'selected-version' : ($index == selectedFontIndex && colored)}"  ng-style="{'background-color': fontBackground}">
                 <i class="devicon-{{selectedIcon.name}}-{{fontVersion}} colored"></i>
               </li>
             </div>
@@ -74,9 +74,9 @@
           </div>
         </li>
         <li>
-          <h4>SVG versions</h4>
+          <h4>SVG versions <input type='color' value='#60be86' ng-model="svgBackground"></h4>
           <ul class="icons-list">
-            <li ng-repeat="svgVersion in selectedIcon.svg" ng-click="selectSvg(svgVersion, $index)" ng-class="{'selected-version' : $index == selectedSvgIndex}">
+            <li ng-repeat="svgVersion in selectedIcon.svg" ng-click="selectSvg(svgVersion, $index)" ng-class="{'selected-version' : $index == selectedSvgIndex}" ng-style="{'background-color': svgBackground}">
               <img ng-src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{svgVersion}}.svg">
             </li>
           </ul>