Improve support for print media (#319)

pradyunsg · Feb 23, 2022 · 2c88f26 · 2c88f26
1 parent cc01123
commit 2c88f26
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 17 deletions.
diff --git a/src/furo/__init__.py b/src/furo/__init__.py
@@ -336,6 +336,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))
 
@@ -344,6 +346,8 @@ def get_pygments_stylesheet() -> str:
     lines.extend(_get_styles(dark_formatter, prefix=not_light_prefix))
     lines.append("}")
 
+    lines.append("}")
+
     return "\n".join(lines)
 
 

diff --git a/src/furo/assets/styles/base/_index.sass b/src/furo/assets/styles/base/_index.sass
@@ -1,3 +1,4 @@
+@import "print"
 @import "screen-readers"
 @import "theme"
 @import "typography"
diff --git a/src/furo/assets/styles/base/_print.sass b/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)
diff --git a/src/furo/assets/styles/base/_theme.sass b/src/furo/assets/styles/base/_theme.sass
@@ -18,25 +18,27 @@ body
 html body .only-dark
   display: none !important
 
-// Enable dark-mode, if requested.
-body[data-theme="dark"]
-  @include colors-dark
-
-  html & .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
 
     html & .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
+
+      html & .only-light
+        display: none !important
+      .only-dark
+        display: block !important
+
 //
 // Theme toggle presentation
 //

diff --git a/src/furo/theme/furo/partials/_head_css_variables.html b/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>