Dark mode

website
theme
Author

Mine Çetinkaya-Rundel

Published

July 14, 2022

theme: light / dark

Quarto websites support light and dark themes and will automatically add a light/dark toggle to your website if you supply both themes.

---
format:
  html:
    theme:
      light: litera
      dark: darkly
---

You can also customize your light and dark themes and and supply custom theme files in addition to the Bootswatch themes you’re using.

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

Here are the custom styles I’m using on this website:

If you know you want to offer the light/dark toggle, and you are planning to use a Bootswatch theme, I recommend browsing the options thoroughly first can decide on a light and a dark theme that look similar except for the colors and using that pair.

Learn more

Dark mode