has-dark-background
This commit is contained in:
parent
bc2974fef8
commit
41f20301b6
2 changed files with 22 additions and 12 deletions
24
js/reveal.js
24
js/reveal.js
|
@ -717,11 +717,17 @@
|
|||
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 ) {
|
||||
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' );
|
||||
// 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( 'has-light-background' );
|
||||
dom.wrapper.classList.remove( classToBubble );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
// Allow the first background to apply without transition
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue