reader progress theming, automatically invert based on slide bg

css/reveal.scss

@@ -2012,6 +2012,15 @@ $notesWidthPercent: 25%;
   display: none;
 }
 
+.has-dark-background {
+	--r-overlay-element-bg-color: 240, 240, 240;
+	--r-overlay-element-fg-color: 0, 0, 0;
+}
+.has-light-background {
+	--r-overlay-element-bg-color: 0, 0, 0;
+	--r-overlay-element-fg-color: 240, 240, 240;
+}
+
 .reveal-viewport.reveal-reader .reader-progress {
 	position: sticky;
 	top: 50%;
@@ -2034,7 +2043,6 @@ $notesWidthPercent: 25%;
 		transform: translateY(-50%);
 		border-radius: var(--r-reader-progress-width);
 		z-index: 10;
-
 	}
 
 	// Hit area
@@ -2056,30 +2064,32 @@ $notesWidthPercent: 25%;
 		top: 0;
 		left: 0;
 		border-radius: var(--r-reader-progress-width);
-		background-color: #fff;
+		background-color: rgba(var(--r-overlay-element-bg-color), 1);
-		z-index: 2;
+		z-index: 10;
+		transition: background-color 0.2s ease;
 	}
 
 	.reader-progress-slide {
 		position: absolute;
 		width: 100%;
-		background-color: rgba( 255, 255, 255, 0.2 );
+		background-color: rgba(var(--r-overlay-element-bg-color), 0.2);
+		box-shadow: 0 0 0px 1px rgba(var(--r-overlay-element-fg-color), 0.1);
 		border-radius: var(--r-reader-progress-width);
-		transition: all 0.2s ease;
+		transition: background-color 0.2s ease;
 	}
 
 	.reader-progress-slide.active {
-		background-color: #fff;
+		background-color: rgba(var(--r-overlay-element-bg-color), 1);
 	}
 
 	.reader-progress-trigger {
 		position: absolute;
 		width: 100%;
-		transition: all 0.2s ease;
+		transition: background-color 0.2s ease;
 	}
 
 	.reader-progress-slide.active.has-triggers {
-		background-color: rgba( 255, 255, 255, 0.4 );
+		background-color: rgba(var(--r-overlay-element-bg-color), 0.4);
 		z-index: 10;
 	}
 
@@ -2092,7 +2102,7 @@ $notesWidthPercent: 25%;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
-		background: #000;
+		background-color: rgba(var(--r-overlay-element-fg-color), 0.8);
 	}
 }
 

css/theme/source/beige.scss

@@ -27,6 +27,9 @@ $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: rgba(79, 64, 28, 0.99);
 $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Background generator
 @mixin bodyBackground() {
 	@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );

css/theme/source/serif.scss

@@ -25,6 +25,9 @@ $linkColor: #51483D;
 $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: #26351C;
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 .reveal a {
   line-height: 1.3em;
 }

css/theme/source/simple.scss

@@ -31,6 +31,9 @@ $linkColor: #00008B;
 $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: rgba(0, 0, 0, 0.99);
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Change text colors against dark slide backgrounds
 @include dark-bg-text-color(#fff);
 

css/theme/source/sky.scss

@@ -29,6 +29,9 @@ $linkColor: #3b759e;
 $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: #134674;
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Fix links so they are not cut off
 .reveal a {
 	line-height: 1.3em;

css/theme/source/solarized.scss

@@ -51,6 +51,9 @@ $linkColor: $blue;
 $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: $magenta;
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Background generator
 // @mixin bodyBackground() {
 // 	@include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );

css/theme/source/white-contrast.scss

@@ -40,6 +40,9 @@ $heading2Size: 1.6em;
 $heading3Size: 1.3em;
 $heading4Size: 1.0em;
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Change text colors against dark slide backgrounds
 @include dark-bg-text-color(#fff);
 

css/theme/source/white.scss

@@ -37,6 +37,9 @@ $heading2Size: 1.6em;
 $heading3Size: 1.3em;
 $heading4Size: 1.0em;
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Change text colors against dark slide backgrounds
 @include dark-bg-text-color(#fff);
 

css/theme/template/exposer.scss

@@ -25,4 +25,6 @@
   --r-link-color-hover: #{$linkColorHover};
   --r-selection-background-color: #{$selectionBackgroundColor};
   --r-selection-color: #{$selectionColor};
+  --r-overlay-element-bg-color: #{$overlayElementBgColor};
+  --r-overlay-element-fg-color: #{$overlayElementFgColor};
 }

css/theme/template/settings.scss

@@ -38,6 +38,11 @@ $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: #FF5E99;
 $selectionColor: #fff;
 
+// Colors used for UI elements that are overlaid on top of
+// the presentation
+$overlayElementBgColor: 240, 240, 240;
+$overlayElementFgColor: 0, 0, 0;
+
 // Generates the presentation background, can be overridden
 // to return a background image or gradient
 @mixin bodyBackground() {

dist/theme/beige.css

@@ -37,6 +37,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #c0a86e;
   --r-selection-background-color: rgba(79, 64, 28, 0.99);
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {

dist/theme/black-contrast.css

@@ -39,6 +39,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #8dcffc;
   --r-selection-background-color: #bee4fd;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

dist/theme/black.css

@@ -36,6 +36,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #8dcffc;
   --r-selection-background-color: rgba(66, 175, 250, 0.75);
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

dist/theme/blood.css

@@ -42,6 +42,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #dd5566;
   --r-selection-background-color: #a23;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

dist/theme/dracula.css

@@ -43,6 +43,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #8BE9FD;
   --r-selection-background-color: #44475A;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

dist/theme/league.css

@@ -39,6 +39,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #71e9f4;
   --r-selection-background-color: #FF5E99;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

dist/theme/moon.css

@@ -44,6 +44,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #78b9e6;
   --r-selection-background-color: #d33682;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

dist/theme/night.css

@@ -37,6 +37,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #f3d7ac;
   --r-selection-background-color: #e7ad52;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

dist/theme/serif.css

@@ -40,6 +40,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #8b7c69;
   --r-selection-background-color: #26351C;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {

dist/theme/simple.css

@@ -39,6 +39,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #0000f1;
   --r-selection-background-color: rgba(0, 0, 0, 0.99);
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {

dist/theme/sky.css

@@ -41,6 +41,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #74a7cb;
   --r-selection-background-color: #134674;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {

dist/theme/solarized.css

@@ -40,6 +40,8 @@ html * {
   --r-link-color-hover: #78b9e6;
   --r-selection-background-color: #d33682;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {

dist/theme/white-contrast.css

@@ -39,6 +39,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #6ca0e8;
   --r-selection-background-color: #98bdef;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {

dist/theme/white.css

@@ -36,6 +36,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #6ca0e8;
   --r-selection-background-color: #98bdef;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {

examples/reader-mode.html

@@ -98,6 +98,7 @@
             <h2>Video background</h2>
           </section>
         </section>
+				<section data-background-color="#fff"><h2>White background</h2></section>
 				<section><h2>The end</h2></section>
 
 			</div>

js/controllers/backgrounds.js

@@ -190,10 +190,30 @@ export default class Backgrounds {
 		if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;
 		if( data.backgroundOpacity ) contentElement.style.opacity = data.backgroundOpacity;
 
+		const contrastClass = this.getContrastClass( slide );
+
+		if( typeof contrastClass === 'string' ) {
+			slide.classList.add( contrastClass );
+		}
+
+	}
+
+	/**
+	 * Returns a class name that can be applied to a slide to indicate
+	 * if it has a light or dark background.
+	 *
+	 * @param {*} slide
+	 *
+	 * @returns {string|null}
+	 */
+	getContrastClass( slide ) {
+
+		const element = slide.slideBackgroundElement;
+
 		// If this slide has a background color, we add a class that
 		// signals if it is light or dark. If the slide has no background
 		// color, no class will be added
-		let contrastColor = data.backgroundColor;
+		let contrastColor = slide.getAttribute( 'data-background-color' );
 
 		// If no bg color was found, or it cannot be converted by colorToRgb, check the computed background
 		if( !contrastColor || !colorToRgb( contrastColor ) ) {
@@ -211,14 +231,32 @@ export default class Backgrounds {
 			// an element with no background
 			if( rgb && rgb.a !== 0 ) {
 				if( colorBrightness( contrastColor ) < 128 ) {
-					slide.classList.add( 'has-dark-background' );
+					return 'has-dark-background';
 				}
 				else {
-					slide.classList.add( 'has-light-background' );
+					return 'has-light-background';
 				}
 			}
 		}
 
+		return null;
+
+	}
+
+	/**
+	 * Bubble the 'has-light-background'/'has-dark-background' classes.
+	 */
+	bubbleSlideContrastClassToElement( slide, target ) {
+
+		[ 'has-light-background', 'has-dark-background' ].forEach( classToBubble => {
+			if( slide.classList.contains( classToBubble ) ) {
+				target.classList.add( classToBubble );
+			}
+			else {
+				target.classList.remove( classToBubble );
+			}
+		}, this );
+
 	}
 
 	/**
@@ -322,14 +360,7 @@ export default class Backgrounds {
 		// If there's a background brightness flag for this slide,
 		// bubble it to the .reveal container
 		if( currentSlide ) {
-			[ 'has-light-background', 'has-dark-background' ].forEach( classToBubble => {
+			this.bubbleSlideContrastClassToElement( currentSlide, this.Reveal.getRevealElement() );
-				if( currentSlide.classList.contains( classToBubble ) ) {
-					this.Reveal.getRevealElement().classList.add( classToBubble );
-				}
-				else {
-					this.Reveal.getRevealElement().classList.remove( classToBubble );
-				}
-			}, this );
 		}
 
 		// Allow the first background to apply without transition

js/controllers/reader.js

@@ -528,6 +528,7 @@ export default class Reader {
 
 					this.Reveal.setCurrentReaderPage( page.pageElement, page.indexh, page.indexv );
 					this.Reveal.slideContent.startEmbeddedContent( page.slideElement );
+					this.Reveal.backgrounds.bubbleSlideContrastClassToElement( page.slideElement, this.viewportElement );
 
 					if( page.backgroundElement ) {
 						this.Reveal.slideContent.startEmbeddedContent( page.backgroundElement );

js/reveal.js

@@ -2963,6 +2963,7 @@ export default function( revealElement, options ) {
 		location,
 		overview,
 		fragments,
+		backgrounds,
 		slideContent,
 		slideNumber,