Hide the dark mode button when printing

The dark mode button makes no sense in a printed document.

This change is slightly tricky because we used to hide the dark button
by default and only showed it when the JavaScript initialization ran
as expected, by setting the CSS `display` property to `block`.

However, doing that also meant that the `display` property could not be
overridden by a `@media print` block, because the `display` property was
set on the dark mode button itself, and would therefore always be more
specific than the `@media print` rule.

So let's instead use a CSS class to indicate whether the dark mode button
should be shown or not.

Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

assets/js/application.js

@@ -651,7 +651,7 @@ var DarkMode = {
         || (!prefersDarkScheme && currentTheme === "dark")) {
       button.attr("src", `${baseURLPrefix}images/light-mode.svg`);
     }
-    button.css("display", "block");
+    button.addClass('active');
 
     button.on('click', function(e) {
       e.preventDefault();

assets/sass/application.scss

@@ -64,3 +64,7 @@ pre {
     align-self: center;
     margin: 5px;
 }
+
+#dark-mode-button.active {
+  display: block;
+}

assets/sass/print.scss

@@ -29,4 +29,8 @@
   div#main {
     box-decoration-break: clone;
   }
+
+  #dark-mode-button {
+    display: none !important;
+  }
 }