all themes now have contrasting text colors based on slide bg

hakimel · Jun 5, 2020 · 166af89 · 166af89
1 parent ac79c7c
commit 166af89
Show file tree

Hide file tree

Showing 18 changed files with 70 additions and 16 deletions.
diff --git a/css/theme/source/beige.scss b/css/theme/source/beige.scss
@@ -32,6 +32,8 @@ $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b
 	@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
 }
 
+// Change text colors against dark slide backgrounds
+@include dark-bg-text-color(#fff);
 
 
 // Theme template ------------------------------

diff --git a/css/theme/source/black.scss b/css/theme/source/black.scss
@@ -37,11 +37,8 @@ $heading2Size: 1.6em;
 $heading3Size: 1.3em;
 $heading4Size: 1.0em;
 
-section.has-light-background {
-	&, h1, h2, h3, h4, h5, h6 {
-		color: #222;
-	}
-}
+// Change text colors against light slide backgrounds
+@include light-bg-text-color(#222);
 
 
 // Theme template ------------------------------

diff --git a/css/theme/source/blood.scss b/css/theme/source/blood.scss
@@ -46,6 +46,9 @@ $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: $blood;
 $selectionColor: #fff;
 
+// Change text colors against dark slide backgrounds
+@include light-bg-text-color(#222);
+
 
 // Theme template ------------------------------
 @import "../template/theme";
@@ -58,6 +61,12 @@ $selectionColor: #fff;
     text-shadow: 1px 1px $coal;
 }
 
+section.has-light-background {
+	p, h1, h2, h3, h4 {
+		text-shadow: none;
+	}
+}
+
 .reveal h1,
 .reveal h2,
 .reveal h3,

diff --git a/css/theme/source/league.scss b/css/theme/source/league.scss
@@ -27,6 +27,8 @@ $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b
 	@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
 }
 
+// Change text colors against light slide backgrounds
+@include light-bg-text-color(#222);
 
 
 // Theme template ------------------------------

diff --git a/css/theme/source/moon.scss b/css/theme/source/moon.scss
@@ -50,7 +50,8 @@ $linkColor: $blue;
 $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: $magenta;
 
-
+// Change text colors against light slide backgrounds
+@include light-bg-text-color(#222);
 
 // Theme template ------------------------------
 @import "../template/theme";

diff --git a/css/theme/source/night.scss b/css/theme/source/night.scss
@@ -28,6 +28,9 @@ $headingLetterSpacing: -0.03em;
 $headingTextTransform: none;
 $selectionBackgroundColor: #e7ad52;
 
+// Change text colors against light slide backgrounds
+@include light-bg-text-color(#222);
+
 
 // Theme template ------------------------------
 @import "../template/theme";

diff --git a/css/theme/source/serif.scss b/css/theme/source/serif.scss
@@ -29,6 +29,9 @@ $selectionBackgroundColor: #26351C;
   line-height: 1.3em;
 }
 
+// Change text colors against dark slide backgrounds
+@include dark-bg-text-color(#fff);
+
 
 // Theme template ------------------------------
 @import "../template/theme";

diff --git a/css/theme/source/simple.scss b/css/theme/source/simple.scss
@@ -31,11 +31,8 @@ $linkColor: #00008B;
 $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: rgba(0, 0, 0, 0.99);
 
-section.has-dark-background {
-	&, h1, h2, h3, h4, h5, h6 {
-		color: #fff;
-	}
-}
+// Change text colors against dark slide backgrounds
+@include dark-bg-text-color(#fff);
 
 
 // Theme template ------------------------------

diff --git a/css/theme/source/sky.scss b/css/theme/source/sky.scss
@@ -39,6 +39,9 @@ $selectionBackgroundColor: #134674;
 	@include radial-gradient( #add9e4, #f7fbfc );
 }
 
+// Change text colors against dark slide backgrounds
+@include dark-bg-text-color(#fff);
+
 
 
 // Theme template ------------------------------

diff --git a/css/theme/source/white.scss b/css/theme/source/white.scss
@@ -37,11 +37,8 @@ $heading2Size: 1.6em;
 $heading3Size: 1.3em;
 $heading4Size: 1.0em;
 
-section.has-dark-background {
-	&, h1, h2, h3, h4, h5, h6 {
-		color: #fff;
-	}
-}
+// Change text colors against dark slide backgrounds
+@include dark-bg-text-color(#fff);
 
 
 // Theme template ------------------------------

diff --git a/css/theme/template/mixins.scss b/css/theme/template/mixins.scss
@@ -26,4 +26,20 @@
 	background: -o-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
 	background: -ms-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
 	background: radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
+}
+
+@mixin light-bg-text-color( $color ) {
+	section.has-light-background {
+		&, h1, h2, h3, h4, h5, h6 {
+			color: $color;
+		}
+	}
+}
+
+@mixin dark-bg-text-color( $color ) {
+	section.has-dark-background {
+		&, h1, h2, h3, h4, h5, h6 {
+			color: $color;
+		}
+	}
 }
diff --git a/dist/theme/beige.css b/dist/theme/beige.css
@@ -5,6 +5,9 @@
  */
 @import url(fonts/league-gothic/league-gothic.css);
 @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
+  color: #fff; }
+
 /*********************************************
  * GLOBAL STYLES
  *********************************************/

diff --git a/dist/theme/blood.css b/dist/theme/blood.css
@@ -10,6 +10,9 @@
  *
  */
 @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
+section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
+  color: #222; }
+
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
@@ -291,6 +294,9 @@
   font-weight: 300;
   text-shadow: 1px 1px #222; }
 
+section.has-light-background p, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4 {
+  text-shadow: none; }
+
 .reveal h1,
 .reveal h2,
 .reveal h3,

diff --git a/dist/theme/league.css b/dist/theme/league.css
@@ -7,6 +7,9 @@
  */
 @import url(fonts/league-gothic/league-gothic.css);
 @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
+  color: #222; }
+
 /*********************************************
  * GLOBAL STYLES
  *********************************************/

diff --git a/dist/theme/moon.css b/dist/theme/moon.css
@@ -11,6 +11,9 @@ html * {
   color-profile: sRGB;
   rendering-intent: auto; }
 
+section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
+  color: #222; }
+
 /*********************************************
  * GLOBAL STYLES
  *********************************************/

diff --git a/dist/theme/night.css b/dist/theme/night.css
@@ -5,6 +5,9 @@
  */
 @import url(https://fonts.googleapis.com/css?family=Montserrat:700);
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
+section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
+  color: #222; }
+
 /*********************************************
  * GLOBAL STYLES
  *********************************************/

diff --git a/dist/theme/serif.css b/dist/theme/serif.css
@@ -7,6 +7,9 @@
 .reveal a {
   line-height: 1.3em; }
 
+section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
+  color: #fff; }
+
 /*********************************************
  * GLOBAL STYLES
  *********************************************/

diff --git a/dist/theme/sky.css b/dist/theme/sky.css
@@ -8,6 +8,9 @@
 .reveal a {
   line-height: 1.3em; }
 
+section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
+  color: #fff; }
+
 /*********************************************
  * GLOBAL STYLES
  *********************************************/