Skip to content
Demo Time

Custom theme

Custom themes

You can also create your own custom themes by providing a CSS file to the demoTime.customTheme setting or to the customTheme property in the front matter section of your slide. This allows you to customize the look and feel of your slides to match your brand or style.

Create a custom theme

Start from one of the built-in themes, and customize the CSS to match your style.

.demo/slides/theme.css
body {
  background: black;
  color: white;
}


.intro {
  h1 {
    font-size: 2em;
    font-style: italic;
  }
}

Apply the custom theme globally

To apply the custom theme globally, you can provide the CSS file in the demoTime.customTheme setting in your .vscode/settings.json file:

.vscode/settings.json
{
  "demoTime.customTheme": ".demo/slides/theme.css"
}

Apply the custom theme on a single slide

To apply the custom theme, you can provide the CSS file in the slide’s frontmatter section with the customTheme property:

.demo/slides/slide.md
---
customTheme: .demo/slides/theme.css
---


# Welcome to Demo Time!
Custom theming

Style a single slide

Give a slide one or more CSS classes with the class front matter property, and style them in your custom theme. The classes are added to the .slide__layout element of the slide.

.demo/slides/slides.md
---
class: section-break
---


# Part 2: the demo
.demo/slides/theme.css
.slide .slide__layout.section-break {
  background: #1e3a8a;
  color: white;


  h1 {
    font-size: 4em;
    text-transform: uppercase;
  }
}