From 41f20301b6a634003ed89f222f5fe1995ca29ce5 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Wed, 10 Sep 2014 10:12:25 +0200
Subject: [PATCH] has-dark-background
---
js/reveal.js | 30 ++++++++++++++++++----------
test/examples/slide-backgrounds.html | 4 ++--
2 files changed, 22 insertions(+), 12 deletions(-)
diff --git a/js/reveal.js b/js/reveal.js
index 81c100c..7cc551c 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -717,10 +717,16 @@
container.appendChild( element );
// If this slide has a background color, add a class that
- // signals if it is light
+ // signals if it is light or dark. If the slide has no background
+ // color, no class will be set
var computedBackgroundColor = window.getComputedStyle( element ).backgroundColor;
- if( computedBackgroundColor && colorBrightness( computedBackgroundColor ) > 128 ) {
- slide.classList.add( 'has-light-background' );
+ if( computedBackgroundColor ) {
+ if( colorBrightness( computedBackgroundColor ) < 128 ) {
+ slide.classList.add( 'has-dark-background' );
+ }
+ else {
+ slide.classList.add( 'has-light-background' );
+ }
}
return element;
@@ -2463,13 +2469,17 @@
}
- // If the slide has a light background, bubble that up as a
- // class to .reveal container
- if( currentSlide && currentSlide.classList.contains( 'has-light-background' ) ) {
- dom.wrapper.classList.add( 'has-light-background' );
- }
- else {
- dom.wrapper.classList.remove( 'has-light-background' );
+ // 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( function( classToBubble ) {
+ if( currentSlide.classList.contains( classToBubble ) ) {
+ dom.wrapper.classList.add( classToBubble );
+ }
+ else {
+ dom.wrapper.classList.remove( classToBubble );
+ }
+ } );
}
// Allow the first background to apply without transition
diff --git a/test/examples/slide-backgrounds.html b/test/examples/slide-backgrounds.html
index 702a746..25beab9 100644
--- a/test/examples/slide-backgrounds.html
+++ b/test/examples/slide-backgrounds.html
@@ -11,8 +11,8 @@
<link rel="stylesheet" href="../../css/reveal.css">
<link rel="stylesheet" href="../../css/theme/serif.css" id="theme">
<style type="text/css" media="screen">
- .slides section,
- .slides section h2 {
+ .slides section.has-dark-background,
+ .slides section.has-dark-background h2 {
color: #fff;
}
.slides section.has-light-background,
--
GitLab