From 02e1404e34dd6751cef5a6f6adaec9cd89cab2c5 Mon Sep 17 00:00:00 2001
From: Sumner Evans <me@sumnerevans.com>
Date: Thu, 9 Apr 2020 09:26:20 -0600
Subject: [PATCH] Make pygments style switching work when JS is off, but
 prefers-color-scheme is enabled

---
 templates/base.html         | 7 ++++++-
 templates/partial/flex.html | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 28afc98..a6721fc 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -36,7 +36,12 @@
     <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/tipuesearch/tipuesearch.min.css" />
   {% endif %}
 
-  <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/pygments/{{ PYGMENTS_STYLE|default('github') }}.min.css">
+  <link rel="stylesheet" type="text/css"
+    media="(prefers-color-scheme: dark)"
+    href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/pygments/{{ PYGMENTS_STYLE_DARK|default('github') }}.min.css">
+  <link rel="stylesheet" type="text/css"
+    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+    href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/pygments/{{ PYGMENTS_STYLE|default('github') }}.min.css">
   <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/font-awesome/css/fontawesome.css">
   <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/font-awesome/css/brands.css">
   <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/font-awesome/css/solid.css">
diff --git a/templates/partial/flex.html b/templates/partial/flex.html
index 3a963a1..16dd454 100644
--- a/templates/partial/flex.html
+++ b/templates/partial/flex.html
@@ -22,8 +22,8 @@
     }
     console.log(`Switching theme to ${theme}.`)
 
-    // Find the pygments CSS file and change it to the theme specified in the
-    // config.
+    // Find the pygments CSS files (there are two, one for each theme) and
+    // change them both to the theme specified by the user.
     const pygmentsTheme = theme === 'light'
       ? '{{ PYGMENTS_STYLE }}'
       : '{{ PYGMENTS_STYLE_DARK or PYGMENTS_STYLE }}'