Allow disabling dark mode in configuration (#420)

stefanv · web-flow · commit c51780aea5cc · 2023-11-17T15:52:10.000-08:00
* Allow disabling dark mode in configuration

* Set default background according to colorScheme and browser preference
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+assets/theme-css/dark-mode.css
diff --git a/assets/js/00_dark.js b/assets/js/00_dark.js
@@ -9,10 +9,18 @@ var prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
  *
  * @param {event} e
  */
-function autoTheme(e) {
-  targetTheme = prefersDark.matches ? "dark" : "light";
-  document.documentElement.setAttribute("data-theme", targetTheme);
+function setTheme() {
+  /* One of auto, light, or dark, depending on what the site wants to support */
+  const themeScheme = document.documentElement.getAttribute("data-colorscheme");
+
+  const browserScheme = prefersDark.matches ? "dark" : "light";
+
+  // Use the color scheme from the configuration file, if set
+  document.documentElement.setAttribute(
+    "data-theme",
+    themeScheme == "auto" ? browserScheme : themeScheme,
+  );
 }
 
-autoTheme();
-prefersDark.onchange = autoTheme;
+setTheme();
+prefersDark.onchange = setTheme;
diff --git a/assets/theme-css/dark-mode.css b/assets/theme-css/dark-mode.css
@@ -1,11 +1,25 @@
 /* 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. */
+/* This CSS is to avoid flickering, by setting the background to dark, if that is the browser preference. */
 
+/* prettier-ignore-start */
+
+/* Theme supports light and dark; check browser preference for bg color */
+
+{{- if (eq .Site.Params.colorScheme "auto") -}}
 @media (prefers-color-scheme: dark) {
   html:not([data-theme]) {
     --pst-color-background: #14181e;
   }
 }
+{{- end -}}
+
+/* Theme supports only dark; set background dark */
+{{- if (eq .Site.Params.colorScheme "dark") -}}
+html:not([data-theme]) {
+  --pst-color-background: #14181e;
+}
+{{- end -}}
+
+/* prettier-ignore-end */
diff --git a/config.yaml b/config.yaml
@@ -1,6 +1,7 @@
 disableKinds:
   - taxonomy
 params:
+  colorScheme: auto # can be auto (browser setting), light, or dark
   images:
     - /images/logo.svg
   navColor: blue
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ .Site.LanguageCode }}">
+<html lang="{{ .Site.LanguageCode }}" data-colorscheme="{{ .Site.Params.colorScheme }}" >
   <head>
     {{ print "<!-- Generated " (time.Now.UTC.Format "2006-01-02 15:04:05 UTC") " -->" | safeHTML }}
     {{ partial "meta.html" . }}
diff --git a/layouts/partials/javascript.html b/layouts/partials/javascript.html
@@ -6,7 +6,7 @@
 
 <!-- Custom JS -->
 <!-- All JS files under static/js are included -->
-{{- $jsFiles := resources.Match "js/*.js" -}}
+{{- $jsFiles := collections.Sort (resources.Match "js/*.js") "Name" -}}
 {{- if $inServerMode -}}
 {{- $js := $jsFiles | resources.Concat "js/bundle.js" }}
 <script type="text/javascript" src={{ $js.RelPermalink }}></script>
