From 166af89353cacb7198d23a52b3bda77be6715133 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Fri, 5 Jun 2020 10:02:49 +0200 Subject: [PATCH] all themes now have contrasting text colors based on slide bg --- css/theme/source/beige.scss | 2 ++ css/theme/source/black.scss | 7 ++----- css/theme/source/blood.scss | 9 +++++++++ css/theme/source/league.scss | 2 ++ css/theme/source/moon.scss | 3 ++- css/theme/source/night.scss | 3 +++ css/theme/source/serif.scss | 3 +++ css/theme/source/simple.scss | 7 ++----- css/theme/source/sky.scss | 3 +++ css/theme/source/white.scss | 7 ++----- css/theme/template/mixins.scss | 16 ++++++++++++++++ dist/theme/beige.css | 3 +++ dist/theme/blood.css | 6 ++++++ dist/theme/league.css | 3 +++ dist/theme/moon.css | 3 +++ dist/theme/night.css | 3 +++ dist/theme/serif.css | 3 +++ dist/theme/sky.css | 3 +++ 18 files changed, 70 insertions(+), 16 deletions(-) diff --git a/css/theme/source/beige.scss b/css/theme/source/beige.scss index acdd37de..d82c510a 100644 --- 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 index 45d26780..ba723355 100644 --- 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 index 4533fc06..b5a86796 100644 --- 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 index 95bacd42..6b9697e8 100644 --- 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 index db1897c4..b398f4f5 100644 --- 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 index d49a2825..98a20628 100644 --- 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 index ec3fcb30..1c8d7787 100644 --- 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 index 394c9cd0..faf245f2 100644 --- 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 index 3fee67c5..c83b9c06 100644 --- 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 index 7b817fee..20e8f7ec 100644 --- 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 index e0c56069..17a3db5e 100644 --- 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; + } + } } \ No newline at end of file diff --git a/dist/theme/beige.css b/dist/theme/beige.css index d3182ff3..e728ef42 100644 --- 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 index 06f6f0e7..0a9f5d47 100644 --- 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 index 1d770eb6..d2821e28 100644 --- 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 index 137ab873..d799c997 100644 --- 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 index d61498de..3f011dd0 100644 --- 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 index 983a73c6..e293916b 100644 --- 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 index 204bdf56..77ab8d5c 100644 --- 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 *********************************************/