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 );
// 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

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

@ -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,