From 543ae58a37fb1a81aa71320bbffa026c1509daff Mon Sep 17 00:00:00 2001
From: Sumner Evans <me@sumnerevans.com>
Date: Tue, 7 Apr 2020 00:22:07 -0600
Subject: [PATCH] Added support for dark mode detection

---
 static/stylesheet/style.less |  9 +++++++++
 templates/partial/flex.html  | 39 +++++++++++++++++++++++++++++++++++-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/static/stylesheet/style.less b/static/stylesheet/style.less
index bc18dce..dc677a1 100644
--- a/static/stylesheet/style.less
+++ b/static/stylesheet/style.less
@@ -288,6 +288,11 @@ main {
       color: @footer-text-color;
       font-size: 11px;
     }
+
+    // Flex theme and Theme selection separator
+    span.theme-separator {
+      margin: 0 4px;
+    }
   }
 }
 
@@ -556,6 +561,10 @@ ul.social {
     left: 25vw;
     overflow-x: hidden;
 
+    nav {
+      text-align: right;
+    }
+
     article {
 
       &.single {
diff --git a/templates/partial/flex.html b/templates/partial/flex.html
index 4447454..f5b8dea 100644
--- a/templates/partial/flex.html
+++ b/templates/partial/flex.html
@@ -1,3 +1,40 @@
 <p>{{ _('Built with %(pelican_url)s using %(flex_url)s theme',
   pelican_url='<a href="http://getpelican.com" target="_blank">Pelican</a>',
-  flex_url='<a href="http://bit.ly/flex-pelican" target="_blank">Flex</a>'|safe) }}</p>
+  flex_url='<a href="http://bit.ly/flex-pelican" target="_blank">Flex</a>'|safe) }}
+  <span class="theme-separator">|</span>
+  Switch to the
+  <a href="javascript:void(0)" onclick="switchTheme('dark')">
+    dark
+  </a>|<a href="javascript:void(0)" onclick="switchTheme('light')">
+    light
+  </a>|<a href="javascript:void(0)" onclick="switchTheme('browser')">
+    browser
+  </a>
+  theme
+</p>
+<script>
+  const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)');
+
+  function detectThemeAndSwitchStyle() {
+    let theme = localStorage.getItem('themeOverride') || 'browser';
+    if (theme === 'browser') {
+      theme = darkSchemeWatch.matches ? 'dark' : 'light';
+    }
+    console.log(`Switching theme to ${theme}.`)
+    if (theme === 'dark') {
+      document.body.classList.add('dark_theme');
+      document.body.classList.remove('light_theme');
+    } else {
+      document.body.classList.add('light_theme');
+      document.body.classList.remove('dark_theme');
+    }
+  }
+
+  function switchTheme(themeOverride) {
+    localStorage.setItem('themeOverride', themeOverride);
+    detectThemeAndSwitchStyle();
+  }
+
+  detectThemeAndSwitchStyle();
+  darkSchemeWatch.addListener(detectThemeAndSwitchStyle);
+</script>