How to use different "base" css files for print and preview

[mundodisco8]

Hello,

I'm relatively new to CSS. I'm trying to put together a CSS so I can format PDFs out of my MD files. For the export, I use the Puppeteer / PDF option.

I managed to get something that I like by tweaking style.less, but I noticed that the changes on style.less are applied on top of your preview window theme. I started using gothic.css and worked on my style.css until I got something that I could use, but then I switched to a dark mode theme, and noticed that my exported PDFs are totally all over the place, as the "base" CSS is obviously totally different. Text that was centred (like h1) is now left aligned, and things like that.

I found the @import directive, and tried to apply it to import the gothic.css file, but it didn't work. I tried

  @import url('C:/Users/joel.santos/.vscode/extensions/shd101wyy.markdown-preview-enhanced-0.5.21/node_modules/@shd101wyy/mume/styles/preview_theme/gothic.css') print;

As the first item in style.less and also inside the @media print directive

 @media print {
    @import url('C:/Users/joel.santos/.vscode/extensions/shd101wyy.markdown-preview-enhanced-0.5.21/node_modules/@shd101wyy/mume/styles/preview_theme/gothic.css') print;
}

But when using a dark theme, the output PDF also has dark background.

How can I base my printed document on gothic.css plus my changes, independently of the CSS that I use to view my docs in the preview window?

I'll add my style.css as a reply, to make this first comment more compact.

[mundodisco8]

My style.less. I tried to attach it, but github doesn't like .less files

/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;

  // Import gothic.css
  @import url('C:/Users/joel.santos/.vscode/extensions/shd101wyy.markdown-preview-enhanced-0.5.21/node_modules/@shd101wyy/mume/styles/preview_theme/gothic.css') print;

  // Import fonts from Google Fonts:
  @import url("https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap");
  @import url("https://fonts.googleapis.com/css2?&family=Inconsolata:wght@400;700&display=swap");
  @import url("https://fonts.googleapis.com/css2?&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap");
  @import url("https://fonts.googleapis.com/css2?&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap");
  @import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");

  // Basic options: Merriweather as the standard font, at 12pts.
  font-family: "Merriweather", serif;
  font-size: 12pt;
  background: transparent !important;

  pre,
  code {
    font-family: "Inconsolata", monospace;
    font-size: 10pt;
  }

  h1 {
    font-family: "Arvo", sans-serif;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    border-bottom: 1px solid rgb(100, 100, 100);
  }

  h2 {
    font-family: "Lato", sans-serif;
    margin-top: 30px;
    font-size: 22px;
    line-height: 1;
  }

  h3 {
    font-family: "Lato", sans-serif;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  h4 {
    font-family: "Lato", sans-serif;
    margin-top: 10px;
    margin-bottom: 10px;
    font-style: italic;
  }

  img {
    padding: 15px;
  }

  p {
    font: inherit;
    font-size: inherit;
  }
  table {
    font: inherit;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    font-size: inherit;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }

  td,
  td {
    padding: 12px 15px;
  }

  thead tr {
    background-color: #404040;
    color: #ffffff;
    text-align: left;
  }

  tbody tr {
    border-bottom: 1px solid #dddddd;
  }

  tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
  }

  @media print {
    p {
      font-size: 10pt; /* changing to 10pt has no impact */
    }
    img {
      width: 40%;
    }
  }
}