Better support for printing from dark mode

[timvink]

I checked that...

• ... the documentation does not mention anything about my idea
• ... to my best knowledge, my idea wouldn't break something for other users
• ... there are no open or closed issues that are related to my idea

Description

When using dark mode, printing a page results in barely readable text:

instead, when printing, mkdocs-material could temporarily switch to light mode, and then back.

Use Cases

well, printing obviously.

Screenshots / Mockups

Here is some javascript I adapted from https://stackoverflow.com/a/11060206/5525118 to make it work for mkdocs-material

function change_material_theme(to="default") {

  body = document.getElementsByTagName('body')[0];
  var current_color_theme = body.getAttribute('data-md-color-scheme')
  
  var beforePrint = function() {
      console.log('Functionality to run before printing.');
      body.setAttribute("data-md-color-scheme", to);
  };
  var afterPrint = function() {
      console.log('Functionality to run after printing');
      body.setAttribute("data-md-color-scheme", current_color_theme); 
  };

  if (window.matchMedia) {
      var mediaQueryList = window.matchMedia('print');
      mediaQueryList.addListener(function(mql) {
          if (mql.matches) {
              beforePrint();
          } else {
              afterPrint();
          }
      });
  }

  window.onbeforeprint = beforePrint;
  window.onafterprint = afterPrint;

}

And here's a GIF with the script in action:

[squidfunk]

Thanks for reporting. I guess a better solution might be to scope the slate theme inside a @media not print media query, which is supported by all browsers and doesn't demand JavaScript at all. Nevertheless, we should fix this.

[wilhelmer]

I can confirm that wrapping the theme definitions in @media not print works fine, also with custom color schemes.

Maybe that should also be documented in the Custom Color Schemes section. Something like "If your custom colors don't look good when printed, wrap the definitions in ..."

[squidfunk]

The only thing where this does not work is when using multiple color palettes through Insiders with bright primary and accent colors, e.g. slate with yellow as a primary. The slate theme would be reset, but the primary color wouldn't. We need a solution for this, too.

[squidfunk]

Fixed in ab60de2 – I didn't address the last concern regarding multiple color palettes, as it's not fixable in general. It will always depend on the chosen colors palettes, thus some adjustments via extra CSS might be necessary.

[squidfunk]

Released as part of 6.1.0.