style: hook into theme's light/dark mode

Refs: https://pagefind.app/docs/css-variables/#dark-mode

Signed-off-by: Mike Fiedler <miketheman@gmail.com>

Author: miketheman

pep_sphinx_extensions/pep_theme/static/colour_scheme.js

@@ -9,6 +9,7 @@ const setColourScheme = (colourScheme = getColourScheme()) => {
     document.documentElement.dataset.colour_scheme = colourScheme
     localStorage.setItem("colour_scheme", colourScheme)
     setPygments(colourScheme)
+    setPfTheme(colourScheme)
 }
 
 // Map system theme to a cycle of steps
@@ -31,5 +32,10 @@ const setPygments = (colourScheme = getColourScheme()) => {
     pygmentsLight.media = colourScheme === "auto" ? "(prefers-color-scheme: light)" : ""
 }
 
+const setPfTheme = (colourScheme = getColourScheme()) => {
+    const isDark = colourScheme === "dark" || (colourScheme === "auto" && prefersDark.matches)
+    document.documentElement.dataset.pfTheme = isDark ? "dark" : ""
+}
+
 // Update Pygments state (the page theme is initialised inline, see page.html)
 document.addEventListener("DOMContentLoaded", () => setColourScheme())