campiaperti/infra
1
0
Fork 1
Code Issues Pull requests 1 Releases Wiki Activity

has-dark-background

Browse source
This commit is contained in:
Hakim El Hattab 2014-09-10 10:12:25 +02:00
parent bc2974fef8
commit 41f20301b6
2 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
js/reveal.js
View file

@ -717,10 +717,16 @@
container.appendChild( element ); container.appendChild( element );
// If this slide has a background color, add a class that // 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; var computedBackgroundColor = window.getComputedStyle( element ).backgroundColor;
if( computedBackgroundColor && colorBrightness( computedBackgroundColor ) > 128 ) { if( computedBackgroundColor ) {
slide.classList.add( 'has-light-background' ); if( colorBrightness( computedBackgroundColor ) < 128 ) {
slide.classList.add( 'has-dark-background' );
}
else {
slide.classList.add( 'has-light-background' );
}
} }
return element; return element;
@ -2463,13 +2469,17 @@
} }
// If the slide has a light background, bubble that up as a // If there's a background brightness flag for this slide,
// class to .reveal container // bubble it to the .reveal container
if( currentSlide && currentSlide.classList.contains( 'has-light-background' ) ) { if( currentSlide ) {
dom.wrapper.classList.add( 'has-light-background' ); [ 'has-light-background', 'has-dark-background' ].forEach( function( classToBubble ) {
} if( currentSlide.classList.contains( classToBubble ) ) {
else { dom.wrapper.classList.add( classToBubble );
dom.wrapper.classList.remove( 'has-light-background' ); }
else {
dom.wrapper.classList.remove( classToBubble );
}
} );
} }
// Allow the first background to apply without transition // Allow the first background to apply without transition

4
test/examples/slide-backgrounds.html
View file

@ -11,8 +11,8 @@
<link rel="stylesheet" href="../../css/reveal.css"> <link rel="stylesheet" href="../../css/reveal.css">
<link rel="stylesheet" href="../../css/theme/serif.css" id="theme"> <link rel="stylesheet" href="../../css/theme/serif.css" id="theme">
<style type="text/css" media="screen"> <style type="text/css" media="screen">
.slides section, .slides section.has-dark-background,
.slides section h2 { .slides section.has-dark-background h2 {
color: #fff; color: #fff;
} }
.slides section.has-light-background, .slides section.has-light-background,