Implement per-browser checkbox and radio button styling using icheck-material.

Signed-off-by: DL6ER <dl6er@dl6er.de>

scripts/pi-hole/js/footer.js

@@ -125,6 +125,15 @@ function testCookies() {
   return ret;
 }
 
+function applyCheckboxRadioStyle() {
+  var chkboxStyle = localStorage.getItem("theme_icheck");
+  if (chkboxStyle === null) {
+    chkboxStyle = "material-blue";
+  }
+  $("input[type='radio'],input[type='checkbox']").parent().removeClass();
+  $("input[type='radio'],input[type='checkbox']").parent().addClass("icheck-" + chkboxStyle);
+}
+
 $(function () {
   var enaT = $("#enableTimer");
   var target = new Date(parseInt(enaT.html()));
@@ -137,12 +146,8 @@ $(function () {
     $("#cookieInfo").show();
   }
 
-  var checkboxTheme = $("#checkbox_theme").text();
-  $("input").icheck({
-    checkboxClass: "icheckbox_" + checkboxTheme,
-    radioClass: "iradio_" + checkboxTheme,
-    increaseArea: "20%"
-  });
+  applyCheckboxRadioStyle();
+
   // Run check immediately after page loading ...
   checkMessages();
   // ... and once again with five seconds delay

scripts/pi-hole/js/settings.js

@@ -274,4 +274,17 @@ $(function () {
   bargraphs.click(function () {
     localStorage.setItem("barchart_chkbox", bargraphs.prop("checked"));
   });
+
+  // iCheck style toggle
+  var iCheckSelect = $("#iCheckStyle");
+  var iCheckStyle = localStorage.getItem("theme_icheck");
+  if (iCheckStyle === null) {
+    iCheckStyle = "material-blue";
+  }
+  iCheckSelect.val(iCheckStyle);
+
+  iCheckSelect.change(function () {
+    localStorage.setItem("theme_icheck", iCheckSelect.val());
+    applyCheckboxRadioStyle();
+  });
 });