PrintThis CSS Variable Test

by _sir

HTML

<div class="wrapper">

<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>

</div>
<hr>
<button class="red">Set Main to Red</button>
<button class="blue">Set Main to Blue</button>

<hr>

<button class="a">Print Regular</button>
<button class="b">Print With Styles</button>

CSS

:root {
  --main-color: blue;
  --second-color: green;
}

div {
  font-size: 1cm;
  border: 1px solid grey;
  margin: 10px;
  padding: .2cm;
}

.one {
  color: var(--main-color);
}

.two {
  color: black;
}
.three {
  color: var(--second-color);
}
.four {
  color: var(--main-color);
}

.five {
  color: var(--main-color);
}

button {
  font-size: .5cm;
  margin: .2cm;
}

JavaScript

$(document).ready(() => {
	$('button.a').on('click', () => $('.wrapper').printThis());
	$('button.b').on('click', () => $('.wrapper').printThis({
  	importStyle: true,
  }));
  
  $('.red').on('click', () => {
  	document.documentElement.style.setProperty("--main-color", 'red');
  })
  
  $('.blue').on('click', () => {
  	document.documentElement.style.setProperty("--main-color", 'blue');
  })
})

/*
 * printThis v1.15.1
 * @desc Printing plug-in for jQuery
 * @author Jason Day
 *
 * Resources (based on):
 * - jPrintArea: http://plugins.jquery.com/project/jPrintArea
 * - jqPrint: https://github.com/permanenttourist/jquery.jqprint
 * - Ben Nadal: http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm
 *
 * Licensed under the MIT licence:
 *              http://www.opensource.org/licenses/mit-license.php
 *
 * (c) Jason Day 2015-2019
 *
 * Usage:
 *
 *  $("#mySelector").printThis({
 *      debug: false,                   // show the iframe for debugging
 *      importCSS: true,                // import parent page css
 *      importStyle: false,             // import style tags
 *      printContainer: true,           // grab outer container as well as the contents of the selector
 *      loadCSS: "path/to/my.css",      // path to additional css file - use an array [] for multiple
 *      pageTitle: "",                  // add title to print page
 *      removeInline: false,            // remove all inline styles from print elements
 *      removeInlineSelector: "body *", // custom selectors to filter inline styles. removeInline must be true
 *      printDelay: 333,                // variable print delay
 *      header: null,                   // prefix to html
 *      footer: null,                   // postfix to html
 *      base: false,                    // preserve the BASE tag, or accept a string for the URL
 *      formValues: true,               // preserve input/form values
 *      canvas: false,                  // copy canvas...