Extra
customization

Light/dark mode

_brand.yml

color:
  foreground:
    light: "#111111" 
    dark: "#fafafa" 
  background:
    light: "#FFFFFF" 
    dark: "#222222"

quarto will automatically add a light/dark toggle

Sass

If you want extra customizations.

Quarto will compile it for any format (with or without _brand.yml).

Sass variables

There are a variety of Sass variables you can set within a .scss file for Quarto, including:

• Colors: $body-bg, $body-color, etc.
• Fonts: $toc-font-size, $font-family-sans-serif, etc.
• Code blocks: $code-block-border-left, $code-block-bg.

Sass variables

There are a variety of Sass variables you can set within a .scss file for Quarto, including:

• Colors: $body-bg, $body-color, etc.
• Fonts: $toc-font-size, $font-family-sans-serif, etc.
• Code blocks: $code-block-border-left, $code-block-bg.

Many of these features can also be set in _brand.yml.

.scss file

styles.scss

/*-- scss:functions --*/
@function colorToRGB ($color) {
  @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}

/*-- scss:defaults --*/
$h2-font-size:          1.6rem !default;
$headings-font-weight:  500 !default;

/*-- scss:rules --*/
h1, h2, h3, h4, h5, h6 {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
}

you can define sass variables and write css in scss files

Specify the .scss file in the theme field

my-document.qmd

---
title: "My document"
format: 
    html:
        theme: styles.scss
---

Sass and brand.yml

If you’re already using _brand.yml, you can use a .scss file to further customize your theme, beyond brand.yml’s limits, or to override elements of your brand file. For example:

• Add a drop-shadow to cards
• Specify the color of blockquotes
• Further style the navbar

Sass and brand.yml

If you’re already using _brand.yml, you can use a .scss file to further customize your theme, beyond brand.yml’s limits, or to override elements of your brand file. For example:

• Add a drop-shadow to cards
• Specify the color of blockquotes
• Set different header levels to different colors
• Further style the navbar

Sass and brand.yml

The colors defined in the brand.yml palette are available as Sass with the format $brand-COLOR_NAME.

styles.scss

/*-- scss:rules --*/

h1 {
  color: $brand-blue;
}

h2 {
  color: $brand-green
}

Sass and brand.yml

The colors defined in the brand.yml palette are available as Sass with the format brand-COLOR_NAME.

styles.scss

/*-- scss:rules --*/

h1 {
  color: $brand-blue;
}

h2 {
  color: $brand-green
}

Priority

my-document.qmd

---
title: "My document"
format: 
    html:
        theme: styles.scss
---

styles.scss has priority over _brand.yml

Priority

my-document.qmd

---
title: "My document"
format: 
    html:
        theme: [cosmo, brand, styles.scss]
---

styles.scss > _brand.yml > cosmo

Defaults

You can also set Bootstrap Sass variables under defaults in brand.yml.

_brand.yml

color:
  palette:
    blue: "#447099"
    burgundy: "#9A4665"
  primary: burgundy
  foreground: blue

defaults:
  bootstrap:
    defaults:
      navbar-bg: $brand-blue

Learn more

• Quarto website
• brand.yml website
• Quarto-specific brand.yml docs

Your turn

Continue working on your own Quarto project and _brand.yml!

Survey

Thank you!