Dynamic theme color support

app/css/custom.css

@@ -1,245 +0,0 @@
-/*
-Theme Name: RaspAP default
-Author: @billz
-Author URI: https://github.com/billz
-Description: Default theme for RaspAP
-License: GNU General Public License v3.0
-*/
-
-body {
-  color: #212529;
-}
-
-.page-header {
-  margin: 20px 0 20px;
-}
-
-.navbar-logo {
-  margin-top: 0.5em;
-  margin-left: 0.5em;
-}
-
-/* Small devices (portrait phones, up to 576px) */
-@media (max-width: 576px) {
-  .container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; }
-  .card .card-header { padding: .75rem .5rem; font-size: 1.0rem; }
-  .row { margin-left: 0rem; margin-right: 0rem; }
-  .col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; }
-  .form-group.col-md-6 { margin-left: -0.5rem; }
-  .js-wifi-stations { margin-left: -0.5rem; margin-right: -0.5rem; }
-  h4.mt-3 { margin-left: 0.5rem; }
-}
-
-.sidebar {
-  background-color: #f8f9fc;
-}
-
-.sidebar-brand-text {
-  text-transform: none;
-  color: #212529;
-  font-size: 2.0rem;
-  font-weight: 500;
-  font-family: Helvetica, Arial, sans-serif;
-}
-
-.sidebar .nav-item.active .nav-link {
-  font-weight: 500;
-}
-
-.card .card-header {
-  border-color: #d8224c;
-  background-color: #d8224c;
-  color: #fff;
-}
-
-.card-footer {
-  background-color: #f2f1f0;
-}
-
-.nav-item {
-  font-size: 0.85rem;
-}
-
-.nav-tabs .nav-link.active,
-.nav-tabs .nav-link {
-  font-size: 1.0rem;
-}
-
-.nav-tabs a.nav-link {
-  color: #6e707e;
-}
-
-a.nav-link.active {
-  font-weight: bolder;
-}
-
-.sidebar .nav-item .nav-link {
-  padding: 0.6rem 0.6rem 0.6rem 1.0rem;
-}
-
-.alert-success {
-  background-color: #d4edda;
-}
-
-.btn-primary {
-  color: #d8224c;
-  background-color: #fff;
-  border-color: #d8224c;
-}
-
-.btn-warning {
-  color: #333;
-}
-
-.btn-primary:hover {
-  background-color: #c61931;
-  border-color: #c61931;
-}
-
-i.fa.fa-bars {
-  color: #d1d3e2;
-}
-
-i.fa.fa-bars:hover{
-  color: #6e707e;
-}
-
-.info-item {
-  width: 10rem;
-  float: left;
-}
-
-.info-item-xs {
-  font-size: 0.7rem;
-  margin-left: 0.3rem;
-}
-
-.info-item-wifi {
-  width: 6rem;
-  float: left;
-}
-
-.webconsole {
-  width:100%;
-  height:100%;
-  border:1px solid;
-}
-
-#console {
-  height:500px;
-}
-
-.systemtabcontent {
-  height:100%;
-  min-height:500px;
-}
-
-.service-status {
-  border-width: 0;
-}
-
-.service-status-up {
-  color: #a1ec38;
-}
-
-.service-status-warn {
-  color: #f6f044;
-}
-
-.service-status-down {
-  color: #f80107;
-  animation: flash 1s linear infinite;
-}
-@keyframes flash {
-  50% {
-    opacity: 0;
-  }
-}
- 
-.logoutput {
-  width:100%;
-  height: 20rem;
-  border: 1px solid #d1d3e2;
-  border-radius: .35rem;
-}
-
-pre.unstyled {
-  border-width: 0;
-  background-color: transparent;
-  padding: 0;
-}
-
-.dhcp-static-leases {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-
-.dhcp-static-lease-row {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.loading-spinner {
-  background: url("../../app/img/loading-spinner.gif") no-repeat scroll center center transparent;
-  min-height: 150px;
-  width: 100%;
-}
-
-.js-reload-wifi-stations {
-  min-width: 10rem;
-}
-
-.sidebar.toggled .nav-item .nav-link span {
-  display: none;
-} .sidebar .nav-item .nav-link i,
-.sidebar .nav-item .nav-link span {
-    font-size: 1.0rem;
-}
-
-.btn-warning:hover {
-    color: #000;
-}
-
-.toggle-off.btn {
-  padding-left: 1.2rem;
-  font-size: 0.9rem!important;
-}
-
-.toggle-on.btn {
-  font-size: 0.9rem!important;
-}
-
-canvas#divDBChartBandwidthhourly {
-  height: 350px!important;
-}
-
-.chart-container {
-  height: 150px;
-  width: 200px;
-}
-
-.table {
-  margin-bottom: 0rem;
-}
-
-.check-hidden {
-  visibility: hidden;
-}
-
-.check-updated {
-  opacity: 0;
-  color: #90ee90;
-}
-
-.check-progress {
-  color: #999;
-}
-
-.fa-check {
-  color: #90ee90;
-}
-
-.fa-times {
-  color: #ff4500;
-}
-

app/js/custom.js

@@ -375,8 +375,9 @@ function getCookie(cname) {
     return (value != null) ? unescape(value[1]) : null;
 }
 
+// Define themes
 var themes = {
-    "default": "custom.css",
+    "default": "custom.php",
     "hackernews" : "hackernews.css",
     "lightsout" : "lightsout.css",
 }

includes/themes.php

@@ -3,7 +3,7 @@
  *
  *
  */
-function DisplayThemeConfig()
+function DisplayThemeConfig(&$extraFooterScripts)
 {
     $themes = [
         "default"    => "RaspAP (default)",
@@ -11,11 +11,14 @@ function DisplayThemeConfig()
         "lightsout"  => "Lights Out"
     ];
     $themeFiles = [
-        "default"    => "custom.css",
+        "default"    => "custom.php",
         "hackernews" => "hackernews.css",
         "lightsout"  => "lightsout.css"
     ];
     $selectedTheme = array_search($_COOKIE['theme'], $themeFiles);
 
     echo renderTemplate("themes", compact("themes", "selectedTheme"));
+
+    $extraFooterScripts[] = array('src'=>'dist/huebee/huebee.pkgd.min.js', 'defer'=>false);
+    $extraFooterScripts[] = array('src'=>'app/js/huebee.js', 'defer'=>false);
 }

templates/themes.php

@@ -17,7 +17,7 @@
           </div>
           <div class="col-xs">
             <label for="code"><?php echo _("Color"); ?></label>
-            <input class="form-control color-input" value="#d8224c" aria-label="color" data-huebee='{ "notation": "hex", "saturations": 2, "customColors": [ "#d8224c", "#dd4814", "#ea0", "#19f", "#333" ], "hue0": 210 }' />
+            <input class="form-control color-input" value="#d8224c" aria-label="color" />
           </div>
         </div>
         <form action="?page=system_info" method="POST">