Theming: Implement swapping the foreground color for bright colors

1 files changed, 33 insertions, 0 deletions

diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js
index bd4b4b34ed1..172c6bd31ca 100644
--- a/apps/theming/js/settings-admin.js
+++ b/apps/theming/js/settings-admin.js
@@ -31,11 +31,44 @@ function setThemingValue(setting, value) {
 	preview(setting, value);
 }
 
+function calculateLuminance(rgb) {
+	var hexValue = rgb.replace(/[^0-9A-Fa-f]/,'');
+	var r,g,b;
+	if(hexValue.length === 3) {
+		hexValue = hexValue[0] + hexValue[0] + hexValue[1] + hexValue[1] + hexValue[2] + hexValue[2];
+	}
+	if(hexValue.length !== 6) {
+		return 0;
+	}
+	r = parseInt(hexValue.substring(0,2), 16);
+	g = parseInt(hexValue.substring(2,4), 16);
+	b = parseInt(hexValue.substring(4,6), 16);
+	return (0.299*r + 0.587*g + 0.114*b)/255;
+}
+
 function preview(setting, value) {
 	if (setting === 'color') {
 		var headerClass = document.getElementById('header');
+		var expandDisplayNameClass = document.getElementById('expandDisplayName');
+		var headerAppName = headerClass.getElementsByClassName('header-appname')[0];
+		var textColor, icon;
+
+		if (calculateLuminance(value) > 0.5) {
+			textColor = "#000000";
+			icon = 'caret-dark';
+		} else {
+			textColor = "#ffffff";
+			icon = 'caret';
+		}
+
 		headerClass.style.background = value;
 		headerClass.style.backgroundImage = '../img/logo-icon.svg';
+		expandDisplayNameClass.style.color = textColor;
+		headerAppName.style.color = textColor;
+
+		$(headerClass).find('.icon-caret').each(function() {
+			$(this).css('background-image','url(/core/img/actions/'+icon+'.svg)');
+		});
 	}
 	if (setting === 'logoMime') {
 		console.log(setting);