Improve support for print media

The following improves the ability to print documentation themed with
Furo. This includes hiding various elements (such as the mobile bar)
that are not useful in printed media, as well as deals with color
scheming issues for browsers who do not default to light scheme in a
print media state.

Signed-off-by: James Knight <james.d.knight@live.com>

src/furo/__init__.py

@@ -324,6 +324,8 @@ def get_pygments_stylesheet() -> str:
 
     lines.extend(_get_styles(light_formatter, prefix=".highlight"))
 
+    lines.append("@media not print {")
+
     dark_prefix = 'body[data-theme="dark"] .highlight'
     lines.extend(_get_styles(dark_formatter, prefix=dark_prefix))
 
@@ -332,6 +334,8 @@ def get_pygments_stylesheet() -> str:
     lines.extend(_get_styles(dark_formatter, prefix=not_light_prefix))
     lines.append("}")
 
+    lines.append("}")
+
     return "\n".join(lines)
 
 

src/furo/assets/styles/base/_index.sass

@@ -1,3 +1,4 @@
+@import "print"
 @import "screen-readers"
 @import "theme"
 @import "typography"

src/furo/assets/styles/base/_print.sass

@@ -0,0 +1,29 @@
+// This file contains styles for managing print media.
+
+////////////////////////////////////////////////////////////////////////////////
+// Hide elements not relevant to print media.
+////////////////////////////////////////////////////////////////////////////////
+@media print
+  // Hide icon container.
+  .content-icon-container
+    display: none !important
+
+  // Hide showing header links if hovering over when printing.
+  .headerlink
+    display: none !important
+
+  // Hide mobile header.
+  .mobile-header
+    display: none !important
+
+  // Hide navigation links.
+  .related-pages
+    display: none !important
+
+////////////////////////////////////////////////////////////////////////////////
+// Tweaks related to decolorization.
+////////////////////////////////////////////////////////////////////////////////
+@media print
+  // Apply a border around code which no longer have a color background.
+  .highlight
+    border: 0.1pt solid var(--color-foreground-border)

src/furo/assets/styles/base/_theme.sass

@@ -18,25 +18,27 @@ body
 .only-dark
   display: none !important
 
-// Enable dark-mode, if requested.
-body[data-theme="dark"]
-  @include colors-dark
-
-  .only-light
-    display: none !important
-  .only-dark
-    display: block !important
-
-// Enable dark mode, unless explicitly told to avoid.
-@media (prefers-color-scheme: dark)
-  body:not([data-theme="light"])
+// Ignore dark-mode hints if print media.
+@media not print
+  // Enable dark-mode, if requested.
+  body[data-theme="dark"]
     @include colors-dark
 
     .only-light
       display: none !important
     .only-dark
       display: block !important
 
+  // Enable dark mode, unless explicitly told to avoid.
+  @media (prefers-color-scheme: dark)
+    body:not([data-theme="light"])
+      @include colors-dark
+
+      .only-light
+        display: none !important
+      .only-dark
+        display: block !important
+
 //
 // Theme toggle presentation
 //

src/furo/theme/furo/partials/_head_css_variables.html

@@ -15,12 +15,14 @@
   body {
     {{ declare_css_variables(theme_light_css_variables, furo_pygments.light) }}
   }
-  body[data-theme="dark"] {
-    {{ declare_css_variables(theme_dark_css_variables, furo_pygments.dark) }}
-  }
-  @media (prefers-color-scheme: dark) {
-    body:not([data-theme="light"]) {
+  @media not print {
+    body[data-theme="dark"] {
       {{ declare_css_variables(theme_dark_css_variables, furo_pygments.dark) }}
     }
+    @media (prefers-color-scheme: dark) {
+      body:not([data-theme="light"]) {
+        {{ declare_css_variables(theme_dark_css_variables, furo_pygments.dark) }}
+      }
+    }
   }
 </style>