@@ -108,6 +108,7 @@ var kOverlayLoaderCode = 'Loader { \n\
108 sourceComponent: ShaderEffect { \n\
108 sourceComponent: ShaderEffect { \n\
109 id: overlay; \n\
109 id: overlay; \n\
110 height: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
110 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\
111 property color overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\
112 property color overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\
112 property var source: ShaderEffectSource { \n\
113 property var source: ShaderEffectSource { \n\
113 id: shaderSource; \n\
114 id: shaderSource; \n\
@@ -452,7 +453,7 @@ function cardString(template, components) {
452 if (hasTitle) {
453 if (hasTitle) {
453 var color;
454 var color;
454 if (headerAsOverlay) {
455 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")';
456 } else if (hasSummary) {
457 } else if (hasSummary) {
457 color = 'summary.color';
458 color = 'summary.color';
458 } else if (hasBackground) {
459 } else if (hasBackground) {