@@ -108,6 +108,7 @@ var kOverlayLoaderCode = 'Loader { \n\
108108 sourceComponent: ShaderEffect { \n\
109109 id: overlay; \n\
110110 height: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
111+ property real luminance: 0.2126 * overlayColor.r + 0.7152 * overlayColor.g + 0.0722 * overlayColor.b; \n\
111112 property color overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\
112113 property var source: ShaderEffectSource { \n\
113114 id: shaderSource; \n\
@@ -452,7 +453,7 @@ function cardString(template, components) {
452453 if (hasTitle) {
453454 var color;
454455 if (headerAsOverlay) {
455− color = '"white"';
456+ color = 'overlayLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : "grey")';
456457 } else if (hasSummary) {
457458 color = 'summary.color';
458459 } else if (hasBackground) {