Skip to content

Frost theme

The frost theme is a simple theme with a background on the slide title.

DefaultIntroSectionQuoteImageImage LeftImage RightTwo Columns

Name

---
theme: frost
---
# Slide title

CSS

Here you can check the CSS of the Frost theme.

CSS variables

--demotime-primary: #4c6ef5;
--demotime-secondary: #15aabf;
--demotime-accent: #da77f2;
--demotime-dark: #343a40;
--demotime-gray: #adb5bd;
--demotime-border: #dee2e6;
--demotime-color: var(--demotime-dark);
--demotime-background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
--demotime-heading-color: var(--demotime-primary);
--demotime-heading-background: transparent;
--demotime-font-size: var(--vscode-editor-font-size, 1.1em);
--demotime-link-color: var(--demotime-primary);
--demotime-link-active-color: var(--demotime-accent);
--demotime-blockquote-border: var(--demotime-primary);
--demotime-blockquote-background: rgba(76, 110, 245, 0.05);
/* Default layout */
--demotime-default-background: var(--demotime-background);
--demotime-default-color: var(--demotime-color);
--demotime-default-heading-color: var(--demotime-heading-color);
--demotime-default-heading-background: var(--demotime-heading-background);
/* Intro layout */
--demotime-intro-background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
--demotime-intro-color: var(--demotime-color);
--demotime-intro-heading-color: var(--demotime-primary);
--demotime-intro-heading-background: transparent;
/* Quote layout */
--demotime-quote-background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
--demotime-quote-color: var(--demotime-dark);
--demotime-quote-heading-color: var(--demotime-primary);
--demotime-quote-heading-background: transparent;
/* Section layout */
--demotime-section-background: linear-gradient(135deg, #e7f5ff 0%, #d0ebff 100%);
--demotime-section-color: var(--demotime-dark);
--demotime-section-heading-color: var(--demotime-primary);
--demotime-section-heading-background: transparent;
/* Image layouts */
--demotime-image-heading-background: rgba(255, 255, 255, 0.85);
--demotime-image-left-background: var(--demotime-background);
--demotime-image-left-color: var(--demotime-color);
--demotime-image-left-heading-color: var(--demotime-primary);
--demotime-image-left-heading-background: transparent;
--demotime-image-right-background: var(--demotime-background);
--demotime-image-right-color: var(--demotime-color);
--demotime-image-right-heading-color: var(--demotime-primary);
--demotime-image-right-heading-background: transparent;
/* Two columns layout */
--demotime-two-columns-background: var(--demotime-background);
--demotime-two-columns-color: var(--demotime-color);
--demotime-two-columns-heading-color: var(--demotime-primary);
--demotime-two-columns-heading-background: transparent;