diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index 89b1a34..93a045e 100644
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -149,16 +149,22 @@
   margin: 15px 0;
 }
 
-#table-of-contents {
+.table-of-contents {
   background-color: #222;
   padding: 8px 20px;
   border-radius: 8px;
+  margin: 10px 0;
 }
 
-#table-of-contents summary {
+.table-of-contents summary {
   cursor: pointer;
 }
 
+.table-of-contents.print {
+  display: none;
+  padding: 8px 15px;
+}
+
 .content,
 footer {
   margin: 20px;
@@ -497,7 +503,7 @@ li.disabled > .page-link:hover {
   .series-taxonomy li,
   .series-box,
   .prevnext > *,
-  #table-of-contents {
+  .table-of-contents {
     background-color: #ddd;
   }
 
@@ -559,7 +565,19 @@ li.disabled > .page-link:hover {
     display: none;
   }
 
+  * {
+    color-adjust: exact;
+  }
+
   body {
     background-color: white;
   }
+
+  .table-of-contents {
+    display: none;
+  }
+
+  .table-of-contents.print {
+    display: block;
+  }
 }
diff --git a/assets/css/syntax-light.css b/assets/css/syntax-light.css
index adb6e1e..940b0ff 100644
--- a/assets/css/syntax-light.css
+++ b/assets/css/syntax-light.css
@@ -2,7 +2,6 @@
   .chroma {
     color: black;
   }
-/* Background */ .chroma { background-color: #f8f8f8 }
 /* Other */ .chroma .x { color: #000000 }
 /* Error */ .chroma .err { color: #a40000 }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
@@ -85,3 +84,13 @@
 /* GenericUnderline */ .chroma .gl { color: #000000; text-decoration: underline }
 /* TextWhitespace */ .chroma .w { color: #f8f8f8; text-decoration: underline }
 }
+
+@media (prefers-color-scheme: light) {
+  /* Background */ .chroma { background-color: #f8f8f8 }
+}
+
+@media print {
+  .chroma {
+    background-color: white;
+  }
+}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 2dc19ef..dd3552e 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -31,12 +31,16 @@
 
 
 {{ if .Params.Toc }}
-<div id="table-of-contents">
+<div class="table-of-contents">
     <details>
         <summary>{{ i18n "table_of_contents" }}</summary>
         {{ .TableOfContents }}
     </details>
 </div>
+<div class="table-of-contents print">
+    {{ i18n "table_of_contents" }}
+    {{ .TableOfContents }}
+</div>
 {{ end }}
 
 {{ with .Resources.GetMatch "feature" }}