Theme Template Demos



The Theme Template is a customizable theme for GitPitch slide decks. The default theme template configuration delivers attractive styling for GitPitch slide decks out-of-the-box. But making even small changes to the default configuration can deliver a brand new look-n-feel for any slide deck.

To demonstrate the power and flexibility of the theme template this guide provides a number of sample custom configurations along with a live demonstration of each custom config in a sample slide deck.

These theme template demos are provided as inspiration. You are encouraged to experiment with your own custom theme template configurations to find a style that best fits your project or brand.


Default Theme Template Demo

The following theme template configuration was used to style the default theme sample deck:


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" ]

highlight        : tomorrow

SAMPLE DEFAULT SAMPLE DEFAULT

To view the default theme sample deck live in your browser, click on the above screenshot.


Blue Theme Template Demo

The following theme template configuration was used to style the blue theme sample deck:


theme            : template

theme-background : [ "#5289F7" ]
theme-headline   : [ "Work Sans", "white", "none" ]
theme-byline     : [ "Work Sans", "black", "none" ]
theme-text       : [ "Lato", "#F5FFFA", "none" ]
theme-links      : [ "#FF851B", "#E27924" ]
theme-code       : [ "Inconsolata" ]
theme-controls   : [ "#484848" ]
theme-margins    : [ "0", "15px" ]

highlight        : ir-black

SAMPLE BLUE SAMPLE BLUE

To view the blue theme sample deck live in your browser, click on the above screenshot.


Black Theme Template Demo

The following theme template configuration was used to style the black theme sample deck demonstrating a code font with symbol ligatures:


theme            : template

theme-background : [ "black" ]
theme-headline   : [ "Raleway", "white", "none" ]
theme-byline     : [ "Raleway", "#C0C0C0", "none" ]
theme-text       : [ "Ubuntu", "#F5FFFA", "none" ]
theme-links      : [ "#E27924", "#FF851B" ]
theme-code       : [ "Fira Code" ]
theme-controls   : [ "#C0C0C0" ]
theme-margins    : [ "0", "15px" ]

highlight        : ir-black

SAMPLE BLACK SAMPLE BLACK

To view the black theme sample deck live in your browser, click on the above screenshot.


Fun Fonts Theme Template Demo

The following theme template configuration was used to style the fun fonts theme sample deck:


theme            : template

theme-background : [ "white" ]
theme-headline   : [ "Righteous", "#E27924", "none" ]
theme-byline     : [ "Concert One", black, "none" ]
theme-text       : [ "Bubblegum", "#1C1C1C", "none" ]
theme-links      : [ "#E27924", "#FF851B" ]
theme-code       : [ "Source Code Pro" ]
theme-controls   : [ "#484848" ]
theme-margins    : [ "0", "15px" ]

highlight        : tomorrow

SAMPLE FUN FONTS SAMPLE FUN FONTS

To view the fun fonts theme sample deck live in your browser, click on the above screenshot.


Gradient Theme Template Demo

The following theme template configuration was used to style the gradient theme sample deck:


theme            : template

theme-background : [ "linear-gradient(to top, #6dd5ed, #2193b0)" ]
theme-headline   : [ "Ubuntu", "white", "none" ]
theme-byline     : [ "Ubuntu", "black", "none" ]
theme-text       : [ "Raleway", "#F5FFFA", "none" ]
theme-links      : [ "#0295BB", "#C0C0C0" ]
theme-code       : [ "Inconsolata" ]
theme-controls   : [ "#484848" ]
theme-margins    : [ "0", "15px" ]

highlight        : ir-black

SAMPLE GRADIENT SAMPLE GRADIENT

To view the gradient theme sample deck live in your browser, click on the above screenshot.


Split Screen Theme Template Demo

The following theme template configuration was used to style the split screen theme sample deck demonstrating a code font with symbol ligatures:


theme            : template

theme-background : [ "linear-gradient(180deg, white 75%, black 25%)" ]
theme-headline   : [ "Montserrat", "#93C54B", "none" ]
theme-byline     : [ "Montserrat", "#111111", "none" ]
theme-text       : [ "Raleway", "#1C1C1C", "none" ]
theme-links      : [ "#62A503", "#718C00" ]
theme-code       : [ "Fira Code" ]
theme-controls   : [ "#C0C0C0" ]
theme-margins    : [ "0", "15px" ]

highlight        : tomorrow

SAMPLE SPLIT SCREEN SAMPLE SPLIT SCREEN

To view the split theme sample deck live in your browser, click on the above screenshot.


Fun Code Theme Template Demo

The following theme template configuration was used to activate a theme sample deck demonstrating a highly stylized code font with semi-connected cursive italics and symbol ligatures:


theme            : template

theme-background : [ "linear-gradient(100deg, white 90%, #BE5869 10%)" ]
theme-headline   : [ "Montserrat", "#BE5869", "none" ]
theme-byline     : [ "Montserrat", "#111111", "none" ]
theme-text       : [ "Raleway", "#333", "none" ]
theme-links      : [ "#7FDBFF", "#0074D9" ]
theme-controls   : [ "#C0C0C0" ]
theme-code       : [ "Victor Mono Italic" ]

highlight        : tomorrow

SAMPLE FUN CODE SAMPLE FUN CODE

To view the split theme sample deck live in your browser, click on the above screenshot.