From 69c72b9e084baa527afebff76424b04751f42cf7 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Wed, 20 Apr 2016 16:27:19 +0200
Subject: [PATCH] invert colors of controls based on current background

---
 css/reveal.css  | 14 +++++++++++---
 css/reveal.scss | 14 ++++++++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/css/reveal.css b/css/reveal.css
index 60df7c3..6f30f69 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -277,9 +277,9 @@ body {
     width: 33px;
     height: 5px;
     border-radius: 2.5px;
-    background: #fff;
-    -webkit-transition: all 0.15s ease;
-            transition: all 0.15s ease;
+    background-color: #fff;
+    -webkit-transition: all 0.15s ease, background-color 0.8s ease;
+            transition: all 0.15s ease, background-color 0.8s ease;
     -webkit-transform-origin: 2.5px 50%;
             transform-origin: 2.5px 50%; }
   .reveal .controls[data-controls-type="edges"] button:before {
@@ -350,6 +350,14 @@ body {
       right: 18px;
       bottom: 0; } }
 
+.reveal.has-dark-background .controls[data-controls-type="edges"] button:after,
+.reveal.has-dark-background .controls[data-controls-type="edges"] button:before {
+  background-color: #fff; }
+
+.reveal.has-light-background .controls[data-controls-type="edges"] button:after,
+.reveal.has-light-background .controls[data-controls-type="edges"] button:before {
+  background-color: #000; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/reveal.scss b/css/reveal.scss
index 82e1b0a..627e196 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -365,9 +365,9 @@ body {
 		width: $length;
 		height: $thickness;
 		border-radius: $thickness/2;
-		background: #fff;
+		background-color: #fff;
 
-		transition: all 0.15s ease;
+		transition: all 0.15s ease, background-color 0.8s ease;
 		transform-origin: $thickness/2 50%;
 	}
 
@@ -453,6 +453,16 @@ body {
 	}
 }
 
+.reveal.has-dark-background .controls[data-controls-type="edges"] button:after,
+.reveal.has-dark-background .controls[data-controls-type="edges"] button:before {
+	background-color: #fff;
+}
+
+.reveal.has-light-background .controls[data-controls-type="edges"] button:after,
+.reveal.has-light-background .controls[data-controls-type="edges"] button:before {
+	background-color: #000;
+}
+
 
 /*********************************************
  * PROGRESS BAR