add beige theme, move theme class from .reveal to document element, use log instead of alert to demonstrate custom events

README.md

@@ -49,7 +49,7 @@ Reveal.initialize({
 	rollingLinks: true,
 
 	// UI style
-	theme: 'default', // default/neon
+	theme: 'default', // default/neon/beige
 
 	// Transition style
 	transition: 'default' // default/cube/page/concave/linear(2d)
@@ -169,6 +169,7 @@ You can change the appearance of the speaker notes by editing the file at `plugi
 - Folder structure updates for scalability (see /lib & /plugin)
 - Slide notes by [rmurphey](https://github.com/rmurphey)
 - Bumped up default font-size for code samples
+- Added beige theme
 
 #### 1.3
 - Revised keyboard shortcuts, including ESC for overview, N for next, P for previous. Thanks [mahemoff](https://github.com/mahemoff)

css/main.css

@@ -849,22 +849,64 @@ body {
  * NEON THEME
  *********************************************/
 
-.reveal.neon a,
+.theme-neon .reveal a,
-.reveal.neon a:hover,
+.theme-neon .reveal a:hover,
-.reveal.neon .controls a.enabled {
+.theme-neon .reveal .controls a.enabled {
 	color: #5de048;
 }
 
-.reveal.neon .progress span,
+.theme-neon .reveal .progress span,
-.reveal.neon .roll span:after {
+.theme-neon .reveal .roll span:after {
 	background: #5de048;
 }
 
-.reveal.neon a.image:hover img {
+.theme-neon .reveal a.image:hover img {
 	border-color: #5de048;
 }
 
 
+/*********************************************
+ * BEIGE THEME
+ *********************************************/
+
+.theme-beige body {
+	color: #333;
+
+	background: #f7f3de;
+	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%);
+	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1)));
+	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
+	background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
+	background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
+	background: radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
+}
+
+.theme-beige .reveal h1,
+.theme-beige .reveal h2,
+.theme-beige .reveal h3,
+.theme-beige .reveal h4,
+.theme-beige .reveal h5,
+.theme-beige .reveal h6 {
+	color: #333;
+	text-shadow: none;
+}
+
+.theme-beige .reveal a,
+.theme-beige .reveal a:hover,
+.theme-beige .reveal .controls a.enabled {
+	color: #8b743d;
+}
+
+.theme-beige .reveal .progress span,
+.theme-beige .reveal .roll span:after {
+	background: #8b743d;
+}
+
+.theme-beige .reveal a.image:hover img {
+	border-color: #8b743d;
+}
+
+
 /*********************************************
  * OVERVIEW
  *********************************************/

index.html

@@ -164,7 +164,7 @@
 						Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
 					</p>
 					<pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
-	alert( '"customevent" has fired' );
+	console.log( '"customevent" has fired' );
 } );
 					</code></pre>
 				</section>
@@ -271,7 +271,7 @@ function linkify( selector ) {
 
 				// Fires when a slide with data-state=customevent is activated
 				Reveal.addEventListener( 'customevent', function() {
-					alert( '"customevent" has fired' );
+					console.log( '"customevent" has fired' );
 				} );
 
 				// Fires each time a new slide is activated
@@ -299,7 +299,7 @@ function linkify( selector ) {
 					rollingLinks: true,
 
 					// UI style
-					theme: query.theme || 'default', // default/neon
+					theme: query.theme || 'default', // default/neon/beige
 
 					// Transition style
 					transition: query.transition || 'default' // default/cube/page/concave/linear(2d)

js/reveal.js

@@ -139,7 +139,7 @@ var Reveal = (function(){
 		}
 
 		if( config.theme !== 'default' ) {
-			dom.wrapper.classList.add( config.theme );
+			document.documentElement.classList.add( 'theme-' + config.theme );
 		}
 
 		if( config.mouseWheel ) {