Brand Colors in Dark Mode

← Gallery

Kickoff

Team assembled, project scope defined, and initial milestones agreed.

Alpha Release

First internal build distributed to stakeholders for early feedback.

Public Beta

Open beta launched with onboarding support and public issue tracker.

v1.0 Launch

Full release with stable API, complete documentation, and long-term support.

.vertical with .tl-card on a dark Bootstrap theme. Brand colors are applied to the timeline line, dot, and label via a SCSS stylesheet. Card backgrounds and shadows adapt automatically through --tl-color-card-bg.

To reproduce this in your own project, define a _brand.yml and a SCSS stylesheet, then reference them in the document frontmatter or project _quarto.yml.

Brand SCSS variables are only available when brand is registered at the project level. Add it to _quarto.yml alongside the theme:

_brand.yml

color:
  palette:
    purple: "#7c3aed"
  primary: purple

styles.scss

/*-- scss:rules --*/

/* html .timeline beats the extension's .timeline so brand colors win */
html .timeline {
  --tl-color-line:    #{$brand-purple};
  --tl-color-dot:     #{$brand-purple};
  --tl-color-dot-bg:  #{$body-bg};
  --tl-color-label:   #{$brand-purple};
  --tl-color-card-bg: #{$card-bg};
}

_quarto.yml

brand: _brand.yml

format:
  html:
    theme:
      light: [flatly, styles.scss]
      dark:  [darkly, styles.scss]

Markdown

::: {.timeline .vertical}
::: {.event data-label="Jan 2024" .tl-card}
**Kickoff**
Team assembled, project scope defined, and initial milestones agreed.
:::
::: {.event data-label="Apr 2024" .tl-card}
**Alpha Release**
First internal build distributed to stakeholders for early feedback.
:::
:::