Inconsistencies between Preview Mode and Exporting a PDF

[ChriiMoral]

Left window has a page in Obsidian, Preview Mode. Right window has the exported PDF version of the page.

• Exporting a PDF doesn't reflect customized bold & italic text colors (colors in PDF are the default colors that come with the Yin and Yang theme).
• Headings do not feature the sizes shown in Preview Mode.

[ChriiMoral]

I'm unsure about the sizing issue, but I managed to deal with the color inconsistencies by manually changing the em-color & strong-color values in .theme-light and .theme-dark within the Yin and Yang .css file.

For some reason, changing the colors within the Typography section of the Style Settings doesn't work on exporting PDFs.

New export on the right window reflects changes in Yin and Yang.css.

[liu-qilong]

I encountered this issue and found a workaround just now:

• After inspecting the theme's .css file, I found that the lines 1986 ~ 2036 are rewriting the size of the headings. But such effects somehow don't touch the exporting configuration.

• So, I add such rewriting to the exporting configuration in the snippets: in Settings - Appearance, scroll down to the bottom, and activate the snippets CSS snippets bar. Click the folder icon near CSS snippets, and create a file named obsidian.css in it. The content of the file is:

  @media print {
  .print .markdown-preview-view h1 {
  line-height: 1.2em;
  font-weight: 750;
  font-size: var(--s-header-1-pre);
  color: var(--text-normal);
  }
  
  .print .markdown-preview-view h2 {
  line-height: 1.2em;
  font-weight: 700;
  font-size: var(--s-header-2-pre);
  color: var(--text-normal);
  }
  
  .print .markdown-preview-view h3 {
  line-height: 1.2em;
  font-weight: 650;
  font-size: var(--s-header-3-pre);
  color: var(--text-normal);
  }
  
  .print .markdown-preview-view h4 {
  font-weight: 650;
  font-size: var(--s-header-4-pre);
  color: var(--text-normal);
  }
  
  .print .markdown-preview-view h5 {
  line-height: 1.2em;
  font-weight: 650;
  font-size: var(--s-header-5-pre);
  color: var(--text-normal);
  }
  
  .print .markdown-preview-view h6 {
  font-weight: 600;
  font-size: var(--s-header-6-pre);
  color: var(--text-normal);
  }
  
  .print .markdown-preview-view blockquote {
  line-height: var(--editor-line-height);
  color: #000000; 
  font-family: var(--default-font);
  border: none;
  background-color: #FFFFFF00;
  margin: 1rem 0rem 1rem 0rem;
  padding: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  }
  }

P.S. If you're not familiar with snippets in Obsidian, you can refer to Use Themes and/or CSS snippets - Obsidian Help. I use it as a convenient way to add some final adjustments to the appearance style. It may be more robust than directly editing the theme file, because the theme could be subject to updates.

P.S. I also make some adjustments to the quote block exporting configuration: transparent background and black quote symbol, to make it more suitable for printing. Relevant code is the last few lines begin with .print .markdown-preview-view blockquote and before the last }. Please feel free to delete them if not needed.