all themes now have contrasting text colors based on slide bg

This commit is contained in:
Hakim El Hattab 2020-06-05 10:02:49 +02:00
parent ac79c7cd8b
commit 166af89353
18 changed files with 70 additions and 16 deletions

View File

@ -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) ); @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 ------------------------------ // Theme template ------------------------------

View File

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

View File

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

View File

@ -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) ); @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 ------------------------------ // Theme template ------------------------------

View File

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

View File

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

View File

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

View File

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

View File

@ -39,6 +39,9 @@ $selectionBackgroundColor: #134674;
@include radial-gradient( #add9e4, #f7fbfc ); @include radial-gradient( #add9e4, #f7fbfc );
} }
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------ // Theme template ------------------------------

View File

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

View File

@ -27,3 +27,19 @@
background: -ms-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% ); 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;
}
}
}

View File

@ -5,6 +5,9 @@
*/ */
@import url(fonts/league-gothic/league-gothic.css); @import url(fonts/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); @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 * GLOBAL STYLES
*********************************************/ *********************************************/

View File

@ -10,6 +10,9 @@
* *
*/ */
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic); @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 * GLOBAL STYLES
*********************************************/ *********************************************/
@ -291,6 +294,9 @@
font-weight: 300; font-weight: 300;
text-shadow: 1px 1px #222; } 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 h1,
.reveal h2, .reveal h2,
.reveal h3, .reveal h3,

View File

@ -7,6 +7,9 @@
*/ */
@import url(fonts/league-gothic/league-gothic.css); @import url(fonts/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); @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 * GLOBAL STYLES
*********************************************/ *********************************************/

3
dist/theme/moon.css vendored
View File

@ -11,6 +11,9 @@ html * {
color-profile: sRGB; color-profile: sRGB;
rendering-intent: auto; } 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 * GLOBAL STYLES
*********************************************/ *********************************************/

View File

@ -5,6 +5,9 @@
*/ */
@import url(https://fonts.googleapis.com/css?family=Montserrat:700); @import url(https://fonts.googleapis.com/css?family=Montserrat:700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); @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 * GLOBAL STYLES
*********************************************/ *********************************************/

View File

@ -7,6 +7,9 @@
.reveal a { .reveal a {
line-height: 1.3em; } 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 * GLOBAL STYLES
*********************************************/ *********************************************/

3
dist/theme/sky.css vendored
View File

@ -8,6 +8,9 @@
.reveal a { .reveal a {
line-height: 1.3em; } 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 * GLOBAL STYLES
*********************************************/ *********************************************/