This closes #184, closes #126

app/Helper.php

@@ -10,3 +10,27 @@ function format_bytes($bytes, $is_drive_size = true, $beforeunit = '', $afteruni
     elseif($labels[$x] == "MB") return(round($bytes, 2).$beforeunit.$labels[$x].$afterunit);
     else return(round($bytes, 0).$beforeunit.$labels[$x].$afterunit);
 }
+
+function get_brightness($hex) {
+    // returns brightness value from 0 to 255
+    // strip off any leading #
+    $hex = str_replace('#', '', $hex);
+    if(strlen($hex) == 3) {
+        $hex = $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
+    }
+   
+    $c_r = hexdec(substr($hex, 0, 2));
+    $c_g = hexdec(substr($hex, 2, 2));
+    $c_b = hexdec(substr($hex, 4, 2));
+   
+    return (($c_r * 299) + ($c_g * 587) + ($c_b * 114)) / 1000;
+}
+
+function title_color($hex)
+{
+    if(get_brightness($hex) > 130) {
+        return ' black';
+    } else {
+        return ' white';
+    }
+}

public/css/app.css

@@ -569,6 +569,14 @@ body {
   font-size: 16px;
 }
 
+.item .title.black {
+  color: #000;
+}
+
+.item .title.white {
+  color: #fff;
+}
+
 .item .details {
   width: 100%;
 }

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/css/app.css": "/css/app.css?id=7e76b8c135b6dbd38363",
-    "/js/app.js": "/js/app.js?id=24ea5e5c1fbea3461a14"
+    "/js/app.js": "/js/app.js?id=d7ae290137b7fd06f300",
+    "/css/app.css": "/css/app.css?id=ad5c7660f3763a242dfc"
 }

resources/assets/sass/_app.scss

@@ -272,6 +272,12 @@ body {
 	}
 	.title {
 		font-size: 16px;
+		&.black {
+			color: #000;
+		}
+		&.white {
+			color: #fff;
+		}
 	}
 	.details {
 		width: 100%;

resources/views/item.blade.php

@@ -6,7 +6,7 @@
                             <img class="app-icon" src="/img/heimdall-icon-small.png" />
                             @endif
                             <div class="details">
-                                <div class="title">{{ $app->title }}</div>
+                                <div class="title{{ title_color($app->colour) }}">{{ $app->title }}</div>
                                 @if(isset($app->config->enabled) && ((bool)$app->config->enabled === true))
                                 <div data-id="{{ $app->id }}" data-dataonly="{{ $app->config->dataonly or '0' }}" class="livestats-container"></div>
                                 @endif