Add light mode and improve print compatibility

assets/css/bobastyle.css

@@ -458,23 +458,108 @@ li.disabled > .page-link:hover {
 
 
 
-/* Print compatibility */
-@media print {
-  .top,
-  .section-header-link {
-    display: none;
+/* Light mode */
+@media print, (prefers-color-scheme: light) {
+  /* Basic elements */
+  body {
+    background-color: #eee;
+    color: black;
+  }
+
+  a {
+    color: #0057bf;
   }
 
   .icon {
     color: black;
   }
 
+  .post-media > figure.border img,
+  .post-media > figure.border video,
+  figure.border img,
+  figure.border video {
+    border-color: #2e7bc9;
+  }
+
+  aside,
   :not(pre) > code {
-    background-color: lightgray;
+    background-color: #ddd;
+  }
+
+  hr {
+    border-color: #ccc;
+  }
+
+
+  .topbar,
+  .section,
+  .page-list li,
+  .series-taxonomy li,
+  .series-box,
+  .prevnext > *,
+  #table-of-contents {
+    background-color: #ddd;
+  }
+
+  .section:hover {
+    color: inherit;
+  }
+
+  .section:hover,
+  .navbar-item:hover,
+  .langpicker summary:hover,
+  .langpicker[open] summary,
+  .prevnext > a:hover {
+    background-color: #bbb;
+  }
+
+  .langpicker .languages {
+    background-color: #bbb;
+    border-color: #999;
+  }
+
+  .series-pages ul {
+    background-color: #eee;
+  }
+
+
+  /* Pagination */
+  .page-link {
+    color: black;
+  }
+
+  .page-item.active .page-link {
+    background-color: #3977bd;
+    color: white;
+  }
+
+  .page-item.active .page-link:hover {
+    background-color: #154172;
+    color: white;
+  }
+
+  :not(li.disabled) > .page-link:hover {
+    background-color: #bbb;
+    color: inherit;
+  }
+
+  li.disabled {
+    opacity: .25;
+  }
+}
+
+
+
+/* Print compatibility */
+@media print {
+  .top,
+  .section-header-link,
+  .prevnext,
+  .comments {
+    display: none;
   }
 
   body {
     background-color: white;
-    color: black;
   }
 }