Skip to content

Commit

Permalink
refactored all themes to latest sass syntax, fixes deprecation warnings
Browse files Browse the repository at this point in the history
  • Loading branch information
@hakimel
hakimel committed Nov 5, 2024
1 parent 71faa61 commit dc3a581
Show file tree
Hide file tree
Showing 36 changed files with 509 additions and 538 deletions.
13 changes: 6 additions & 7 deletions css/theme/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,17 @@ Themes are written using Sass to keep things modular and reduce the need for rep

## Creating a Theme

To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build -- css-themes`.
To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build:styles`.

Each theme file does four things in the following order:
Each theme file follows the same structure:

1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**
Shared utility functions.

2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**
Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3.
Declares a set of custom CSS variables that the template file (step 4) expects. Each of these variables can be overridden to customize the theme.

3. **Override**
This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding any selectors and styles you please.

4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
3. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
The template theme file which will generate final CSS output based on the currently defined variables.

4. **Optionally add custom fonts and/or additional styles**
61 changes: 34 additions & 27 deletions css/theme/beige.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,41 +5,48 @@
*/


// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "./template/mixins";
@import "./template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;

$active-color: #8b743d;

// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: #f7f3de,
$background: radial-gradient( rgba(255,255,255,1), rgba(247,242,211,1) ),

// Include theme-specific fonts
@import url("./fonts/league-gothic/league-gothic.css");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
$main-font-size: 42px,
$main-color: #333,

$heading-color: #333,
$heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
$heading-font-weight: 600,

$heading1-text-shadow: #{0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15)},

// Override theme settings (see ../template/settings.scss)
$mainColor: #333;
$headingColor: #333;
$headingTextShadow: none;
$backgroundColor: #f7f3de;
$linkColor: #8b743d;
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
$selectionBackgroundColor: rgba(79, 64, 28, 0.99);
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,

$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 20% ),

// Background generator
@mixin bodyBackground() {
@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
}
$selection-color: #333,
$selection-background-color: color.scale( $active-color, $lightness: 35% ),

// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
$overlay-element-bg-color: #{0, 0, 0},
$overlay-element-fg-color: #{240, 240, 240}
);

// Inject the theme template
@use "template/theme";

// Include theme-specific fonts
@import url("./fonts/league-gothic/league-gothic.css");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");

// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
// Change text colors against light slide backgrounds
@include mixins.dark-bg-text-color(#fff);
57 changes: 27 additions & 30 deletions css/theme/black-contrast.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,44 +7,41 @@
* - $mainFontSize controls code blocks, too (although under some ratio).
*/


// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "./template/mixins";
@import "./template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;

$active-color: #42affa;

// Include theme-specific fonts
@import url("./fonts/source-sans-pro/source-sans-pro.css");
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: #000,

$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
$main-font-size: 42px,
$main-color: #fff,

// Override theme settings (see ../template/settings.scss)
$backgroundColor: #000000;
$heading-color: #fff,
$heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
$heading-font-weight: 600,

$mainColor: #fff;
$headingColor: #fff;
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,

$mainFontSize: 42px;
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
$headingFontWeight: 600;
$linkColor: #42affa;
$linkColorHover: color.scale( $linkColor, $lightness: 15% );
$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 15% ),

$heading1Size: 2.5em;
$heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;
$selection-color: #fff,
$selection-background-color: color.scale( $active-color, $lightness: -35% )
);

// Change text colors against light slide backgrounds
@include light-bg-text-color(#000);
// Inject the theme template
@use "template/theme";

// Include theme-specific fonts
@import url("./fonts/source-sans-pro/source-sans-pro.css");

// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
// Change text colors against light slide backgrounds
@include mixins.light-bg-text-color(#000);
57 changes: 27 additions & 30 deletions css/theme/black.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,41 @@
* By Hakim El Hattab, http://hakim.se
*/


// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "./template/mixins";
@import "./template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;

$active-color: #42affa;

// Include theme-specific fonts
@import url("./fonts/source-sans-pro/source-sans-pro.css");
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: #191919,

$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
$main-font-size: 42px,
$main-color: #fff,

// Override theme settings (see ../template/settings.scss)
$backgroundColor: #191919;
$heading-color: #fff,
$heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
$heading-font-weight: 600,

$mainColor: #fff;
$headingColor: #fff;
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,

$mainFontSize: 42px;
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
$headingFontWeight: 600;
$linkColor: #42affa;
$linkColorHover: color.scale( $linkColor, $lightness: 15% );
$selectionBackgroundColor: rgba( $linkColor, 0.75 );
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 15% ),

$heading1Size: 2.5em;
$heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;
$selection-color: #fff,
$selection-background-color: color.scale( $active-color, $lightness: -35% )
);

// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);
// Inject the theme template
@use "template/theme";

// Include theme-specific fonts
@import url("./fonts/source-sans-pro/source-sans-pro.css");

// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
// Change text colors against light slide backgrounds
@include mixins.light-bg-text-color(#222);
59 changes: 24 additions & 35 deletions css/theme/blood.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,52 +10,41 @@
*
*/

// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "./template/mixins";
@import "./template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;

// Include theme-specific fonts

@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic");

// Colors used in the theme
$blood: #a23;
$coal: #222;
$codeBackground: #23241f;
$active-color: #a23;
$code-background-color: #23241f;

$backgroundColor: $coal;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: $coal,

// Main text
$mainFont: Ubuntu, 'sans-serif';
$mainColor: #eee;
$main-font: #{Ubuntu, 'sans-serif'},
$main-color: #eee,

// Headings
$headingFont: Ubuntu, 'sans-serif';
$headingTextShadow: 2px 2px 2px $coal;
$heading-font: #{Ubuntu, 'sans-serif'},
$heading-text-shadow: 2px 2px 2px $coal,

// h1 shadow, borrowed humbly from
// (c) Default theme by Hakim El Hattab
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
$heading1-text-shadow: #{0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15)},

// Links
$linkColor: $blood;
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 20% ),

// Text selection
$selectionBackgroundColor: $blood;
$selectionColor: #fff;
$selection-background-color: $active-color,
$selection-color: #fff
);

// Change text colors against dark slide backgrounds
@include light-bg-text-color(#222);
// Inject the theme template
@use "template/theme";

// Fonts
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic");

// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------

// some overrides after theme template import
// Invert text color when the background is light
@include mixins.light-bg-text-color(#222);

.reveal p {
font-weight: 300;
Expand All @@ -78,7 +67,7 @@ section.has-light-background {
}

.reveal p code {
background-color: $codeBackground;
background-color: $code-background-color;
display: inline-block;
border-radius: 7px;
}
Expand Down
Loading

0 comments on commit dc3a581

Please sign in to comment.