Reduce flashing on page load (#359)

Currently, this is done by setting the background to the theme
preference (light/dark). This will stop working once we have a switch
to toggle between light and dark mode.

It was tempting to move the JS to executing earlier, but it needs to
be executed once the document elements are in place (for shortcuts
etc.).

Author: stefanv

assets/js/dark.js assets/js/00_dark.jsassets/js/dark.js renamed to assets/js/00_dark.js

@@ -1,3 +1,16 @@
+/* Dark mode is now defined in pydata-sphinx-theme CSS */
+/* See html[data-theme='light'] and html[data-theme='dark'] */
+
+/* This CSS is to override the background to dark, if that is the browser preference,
+   instead of defaulting to light mode rendering. */
+
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme]) {
+    --pst-color-background: #14181e;
+  }
+}
+
+/* Once our colors have all been mapped to PST color names, this section can be removed. */
 @media (prefers-color-scheme: dark) {
   :root {
     /* Basically, we reassign the colors named in the non-dark theme. The

assets/theme-css/dark-mode.css

@@ -35,8 +35,7 @@
     {{ if .Site.Params.footer }}
     {{ partial "footer.html" . -}}
     {{ end }}
-
-    {{ partial "javascript.html" . -}}
-    {{ partial "analytics.html" . -}}
   </body>
+  {{ partial "javascript.html" . -}}
+  {{ partial "analytics.html" . -}}
 </html>