Obsidian PDF Export Styles

By default, Obsidian’s PDF export mirrors your (light) theme colors. I wanted something more readable and print-friendly, so I changed the background color, adjusted typography, and tweaked the styling of some basic HTML elements.

You can do this by overriding the @print styles with CSS. Create a CSS file in your vault’s .obsidian/snippets folder, then activate the snippet in Obsidian settings under Appearance. You can copy and adjust the following template to your likings:

:root {
  --page-margin: 1.5cm 2cm;

  --body-font-family: "Atkinson Hyperlegible Next", sans-serif;
  --header-font-family: "Rethink Sans", sans-serif;

  --body-text-color: #0d0000;
  --body-text-muted-color: #262526;
  --h1-text-color: #0d0000;
  --h2-text-color: #262526;
  --h3-text-color: #595859;
  --h4-text-color: #a6a6a6;

  --table-border-color: #d0d0d0;
  --table-cell-border-color: #d0d0d0;
  --table-alt-row-bg-color: #fafafa;
}

@media print {
  @page {
    size: A4;
    margin: var(--page-margin) !important;
    font-family: var(--body-font-family) !important;

    @top-left {
      content: "";
    }
    @top-center {
      content: "";
    }
    @top-right {
      content: "";
    }
    @bottom-right {
      content: counter(page) !important;
      color: var(--body-text-muted-color) !important;
    }
    @bottom-center {
      content: "";
    }
  }

  html,
  body {
  }

  /* Set base font */
  body p,
  body li,
  body span,
  body table td,
  body table th,
  body .callout {
    font-family: var(--body-font-family) !important;
    font-size: 16px !important;
    color: var(--body-text-color) !important;
    line-height: 1.6 !important;
  }

  /* Prevent page breaks inside elements */
  table,
  pre,
  code,
  blockquote,
  img,
  :is(h1, h2, h3, h4, h5, h6) {
    page-break-inside: avoid !important;
    break-after: avoid !important;
  }

  /*  --------------- Headers --------------------------*/
  :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--header-font-family) !important;
  }

  body h1 {
    color: var(--h1-text-color) !important;
  }

  body h2 {
    color: var(--h2-text-color) !important;
  }

  body h3 {
    color: var(--h3-text-color) !important;
  }

  body h4 {
    color: var(--h4-text-color) !important;
  }

  /*  --------------- Tables --------------------------*/

  table {
    border-collapse: collapse !important;
    border: 1px solid var(--table-border-color) !important;
  }

  table th,
  table td {
    border: 1px solid var(--table-cell-border-color) !important;
  }

  tbody tr:nth-child(odd) {
    background-color: var(--table-alt-row-bg-color) !important;
  }

  table td {
  }

  /*  --------------- Callouts --------------------------*/

  .callout {
  }

  .callout-title {
  }

  .callout-content {
  }

  .callout[data-callout="success"] {
  }

  .callout[data-callout="info"] {
  }

  .callout[data-callout="warning"] {
  }

  .callout[data-callout="error"] {
  }

  /*  --------------- codeblocks --------------------------*/
  /* If you want to override the codeblock styling, adjust */

  /* .token.comment   { color: #6a737d; font-style: italic; } */
  /* .token.keyword   { color: #d73a49; } */
  /* .token.string    { color: #032f62; } */
  /* .token.number    { color: #005cc5; } */
  /* .token.function  { color: #6f42c1; } */
  /* .token.operator  { color: #d73a49; } */

  /* Fenced code blocks (the outer container) */
  pre {
  }

  /* The actual code text inside a block */
  pre code {
  }

  /* Inline code (e.g. `like this`) */
  code:not(pre code) {
  }

  /*  --------------- image --------------------------*/
  img {
    max-width: 100%;
  }

  /*  --------------- image --------------------------*/
  hr {
  }

  /*  --------------- anchors --------------------------*/
  a {
    text-decoration: none !important;
  }

  /* Optionally show the URL after the link text */
  a[href]::after {
    /* content: " (" attr(href) ")"; */
  }

  /*  --------------- blockquote --------------------------*/
  blockquote {
  }

  /*  --------------- footnotes --------------------------*/
  .footnotes {
  }

  .tag {
    /* display: none !important; */
  }
}