The Theme Template



Download the latest GitPitch Desktop image to use the Theme Template offline.

The Theme Template is a customizable theme for GitPitch slide decks. It has been crafted to deliver the following benefits for GitPitch presentation authors:

  1. Attractive default styling for GitPitch slide decks out-of-the-box.
  2. Simple, fast customization of slide background, text fonts, colors, and more.
  3. Consistent rendering everywhere - online, offline, PowerPoint, and PDF.
  4. Plus automatic rendering optimizations for any slide displaying code.

From June 2019, the theme template is activated by default for all slide decks that have not explicitly activated one of the old deprecated themes. The theme template embodies best practices based on what has been learned over the past few years of real-world use by the GitPitch community.

THEME TEMPLATE

The following sections detail steps to activate and customize the theme template for any slide deck:


Theme Template Activation

By default, the theme template is activated for all GitPitch slide decks. However, to ensure consistent rendering for your slide deck now and into the future, it is recommended to explicitly activate the theme template in your PITCHME.yaml as follows:


theme : template

While GitPitch presentation authors are strongly encouraged to adopt the theme template for all new slide decks, the full set of old deprecated themes remain available for now to provide backwards compatibility for slide decks created before June, 2019.


Theme Template Defaults

By default, the theme template is configured by the following set of PITCHME.yaml property values:


theme            : template

theme-background : [ "#FFF" ]
theme-headline   : [ "Raleway", "#5289F7", "none" ]
theme-byline     : [ "Raleway", "#111111", "none" ]
theme-text       : [ "Ubuntu", "#1C1C1C", "none" ]
theme-links      : [ "#5289F7", "#5254F7" ]
theme-code       : [ "Source Code Pro" ]
theme-controls   : [ "#484848" ]
theme-margins    : [ "0", "15px" ]

These default theme template property values are implicitly activated within your PITCHME.yaml. In order to override these defaults and create a custom look-n-feel for your slide deck, you must:

  1. Copy and paste these default property values into your PITCHME.yaml.
  2. Then update some or all of these properties with your own custom values.

The following sections introduce each of the theme-* properties shown above. Each section includes a discussion of the set of valid values that can be activated on the corresponding property.


Theme Background Property

The theme-background property lets you set a custom slide background color for your deck.


theme-background : [ "#FFF" ]

The theme-background property takes a single string value within square-brackets array syntax. The following formats are supported by this property value:

The following snippet demonstrates a series of sample values for the theme-background property:


theme-background : [ "green" ]

theme-background : [ "#5289F7" ]

theme-background : [ "rgb(255, 255, 128)" ]

theme-background : [ "hsla(50, 33%, 25%, .75)" ]

theme-background : [ "linear-gradient(#e66465, #9198e5)" ]

theme-background : [ "linear-gradient(180deg, white 50%, black 50%)" ]

Note, your own PITCHME.yaml should define this property once and only once.

For live demonstrations of the theme-background property see the Theme Template Demos Guide.


Theme Headline Property

The theme-headline property lets you set custom styling for markdown h1 and h2 heading content.


theme-headline : [ "Raleway", "#5289F7", "none" ]

The theme-headline property takes three comma-separated string values within square-brackets array syntax. These values can be generalized as follows:


theme-headline : [ "family", "color", "transform" ]

These values support the following custom stylings:

  • family - used to set a custom font family for headline content
  • color - used to set a custom text color for headline content
  • transform - used to set a custom text transform for headline content

For live demonstrations of the theme-headline property see the Theme Template Demos Guide.


Theme Byline Property

The theme-byline property lets you set custom styling for markdown h3, h4, and h5 heading content.


theme-byline : [ "Raleway", "#111111", "none" ]

The theme-byline property takes three comma-separated string values within square-brackets array syntax. These values can be generalized as follows:


theme-byline : [ "family", "color", "transform" ]

These values support the following custom stylings:

  • family - used to set a custom font family for byline content
  • color - used to set a custom text color for byline content
  • transform - used to set a custom text transform for byline content

For live demonstrations of the theme-byline property see the Theme Template Demos Guide.


Theme Text Property

The theme-text property lets you set custom styling for markdown regular text content.


theme-text : [ "Ubuntu", "#1C1C1C", "none" ]

The theme-text property takes three comma-separated string values within square-brackets array syntax. These values can be generalized as follows:


theme-text : [ "family", "color", "transform" ]

These values support the following custom stylings:

  • family - used to set a custom font family for text content
  • color - used to set a custom text color for text content
  • transform - used to set a custom text transform for text content

For live demonstrations of the theme-text property see the Theme Template Demos Guide.


The theme-links property lets you set custom styling for markdown hyperlinks.


theme-links : [ "#5289F7", "#5254F7" ]

The theme-links property takes two comma-separated string values within square-brackets array syntax. These values can be generalized as follows:


theme-links : [ "color", "hover" ]

These values support the following custom stylings:

  • color - used to set a custom text color for hyperlink content
  • hover - used to set a custom text color for hyperlink content in hover state

For live demonstrations of the theme-links property see the Theme Template Demos Guide.


Theme Code Property

The theme-code property lets you set a custom monospaced font family for markdown code blocks.


theme-code : [ "Source Code Pro" ]

The theme-code property takes a single string value within square-brackets array syntax. The value identifies a monospaced, code-specific font family for your slide deck. The following font families for code are supported:

Tip! The Victor Mono font creator is very grateful for donations to help support his wonderful work.

Note, both the Fira Code and Victor Mono fonts support symbol ligatures that are custom designed for rendering code with a little flair. The following snippet demonstrates sample usage of this property:


theme-code : [ "Source Code Pro" ]

theme-code : [ "Inconsolata" ]

theme-code : [ "Fira Code" ]

Note, your own PITCHME.yaml should define this property once and only once.

For live demonstrations of the theme-code property see the Theme Template Demos Guide.


Theme Controls Property

The theme-controls property lets you set a custom color for the navigation controls, menu icon, and progress bar for your slide deck.


theme-controls   : [ "#484848" ]

Values specified on this property should take into account the theme background color used by the deck. For live demonstrations of the theme-controls property see the Theme Template Demos Guide.


Theme Margins Property

The theme-margins property lets you set a custom margin used to control the vertical spacing between content blocks on your slides. Including headlines, bylines, text, images, quotes, and code blocks.


theme-margins    : [ "0", "15px" ]

The theme-margins property takes two comma-separated string values within square-brackets array syntax. These values can be generalized as follows:


theme-margins : [ "margin-top", "margin-bottom" ]

The default values for this property are recommended for vast majority of use cases. However, this property is provided to deliver flexibility when needed.


Theme Template Font Families

The theme template has built-in support for a wide range of Google Fonts. These fonts can be used to customize and enhance the appearance of any slide deck.

The following font families are available for headline, byline, and text content:

  • Lato
  • Montserrat
  • Nunito Sans
  • Open Sans
  • Oswald
  • Poppins
  • Prompt
  • Raleway
  • Roboto
  • Source Sans Pro
  • Ubuntu
  • Work Sans

Beyond these general purpose fonts there are also a number of banner fonts. These banner fonts are a little more dramatic and stylized so are best suited to headline and byline content. While not prohibited, banner fonts are typically not recommended for regular text content.

  • Bubblegum
  • Concert One
  • Righteous

Note, all font family names are case-sensitive and must be used exactly as shown above.

If you are not a professional designer or you are simply looking for help choosing a professional looking font pairing for your slide deck then check out the Popular Pairings section for each font on the Google Fonts website. For example, see the popular pairing section for the Montserrat Font.


Theme Template Text Colors

Theme template colors for headline, byline, and text content are powered by standard CSS Colors. Including support for:

  • Color Keywords
  • Color RGB Hex Values

If you are not a professional designer or you are simply looking for help choosing a professional looking color palette for your slide deck you might want to check out some of these free online tools:

Note, GitPitch has no affiliation with these services, links are simply provided as helpful tips.


Theme Template Text Transforms

Theme template text transforms for headline, byline, and text content are powered by standard CSS Text Transforms. The set of supported text transforms are shown here:

  • capitalize
  • uppercase
  • lowercase
  • none

Note, all text transform names are case-sensitive and must be used exactly as shown above.

These transforms are best suited to headline and byline content. While not prohibited, text transforms are typically not activated for regular text content.


Theme Template Property Debug Tips

Being aware of the following tips should help quickly resolve most problems related to activating custom values on theme template properties.


Tip #1

If you set custom values on theme-* properties but still see default styles when viewing your slide deck this typically indicates a syntax error in your PITCHME.yaml file.


Tip #2

The single most common syntax error when setting custom values on theme-* properties is forgetting to specify property values as quoted strings.


Consistent Rendering Everywhere

The theme template has been designed to deliver the following important guarantee:

Consistent GitPitch slide deck rendering online, offline, as PowerPoint, and PDF.

A common complaint leveled against Web based presentation tools in general is the lack of rendering consistency when viewed online and offline in different browsers across different systems. Typically these issues stem from external network asset dependencies, such as Web hosted fonts. GitPitch slide decks developed using the theme template address this issue conclusively by ensuring zero external rendering asset dependencies.


Code Slide Rendering Optimizations

GitPitch offers a wide range of powerful code rendering features. Including automatic syntax highlighting for any code block on a GitPitch slide. But when using the old deprecated themes, code blocks sat apart visually from the encompassing slide. For example, here are some sample code slides rendered using two of the old deprecated themes:

CODE BLOCKS NOT BLENDED

As you can see the color scheme activated by code syntax highlighting block was in no way matched or blended with the color scheme of the slide itself. This often resulted in visual dissonance within the slide.

The theme template introduces a brand new convention that is automatically activated for all slides displaying code. When a slide displays code the slide background color automatically adopts the same background color used by the code block. For example, here are those same sample code slides rendered using the new theme template:

CODE BLOCKS BLENDED

As you can see, the new theme template convention leads to code blocks being seamlessly blended with the slide background to deliver more attractive code slides. A big visual win, automatically delivered by the theme template.

To disabled this convention for individual code slides, see the code-noblend power property.

In addition to seamless blending of code blocks with the slide background, the theme template also automatically makes optimal use of space on the slide to display code blocks. If you look again at the same code slides above, you will see that the theme template optimized slides make greater use of the slide area to display the sample source code. Another win, automatically delivered by the theme template.


Deprecated Themes Notice

The following slideshow themes, originally inherited from the Reveal.js project have been deprecated:

  • white
  • black
  • sky
  • beige
  • moon
  • night
  • simple

These deprecated themes have been superseded by the new theme template. These themes will not be developed further and should no longer be used when creating new GitPitch slide decks. They remain available for now to provide backwards compatibility for slide decks created before June, 2019.