Show different colors based on filled value

This shows green until the bar is at 50%, yellow until 33%, and red
below that.

This also fixes the bar to show white when "colored" is disabled in the
config.

MMM-ScreenLogic.js

@@ -86,8 +86,18 @@ Module.register('MMM-ScreenLogic',{
                 let dataStr = poolData.status.pH
                 if (this.config.showPHTankLevel) {
                     let percent = Math.round(((poolData.status.pHTank - 1) / this.config.pHTankLevelMax) * 100)
+                    let cls = ""
+                    if (this.config.colored) {
+                        if (percent <= 50 && percent > 33) {
+                            cls = "progress-bar-warning"
+                        } else if (percent <= 33) {
+                            cls = "progress-bar-danger"
+                        } else {
+                            cls = "progress-bar-success"
+                        }
+                    }
                     let progBarDiv = `<div class="progress vertical">
-                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100" style="width: ${percent}%;">
+                        <div class="progress-bar ${cls}" role="progressbar" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100" style="width: ${percent}%;">
                         </div>
                     </div>`
 

screenlogic.css

@@ -118,7 +118,7 @@
     line-height: 20px;
     color: #fff;
     text-align: center;
-    background-color: #337ab7;
+    background-color: #fff;
     -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
     box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
     -webkit-transition: width .6s ease;
@@ -128,4 +128,12 @@
 
 .MMM-ScreenLogic .progress-bar-success {
     background-color: #5cb85c;
+}
+
+.MMM-ScreenLogic .progress-bar-warning {
+    background-color: #ffc107;
+}
+
+.MMM-ScreenLogic .progress-bar-danger {
+    background-color: #dc3545;
 }