Added themeing options

Added THEME_COLOR, THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE, and THEME_COLOR_ENABLE_USER_OVERRIDE options

gulpfile.js

@@ -4,7 +4,10 @@ var gulp = require('gulp'),
     minify = require('gulp-cssnano');
 
 gulp.task('less', function () {
-    return gulp.src('./static/stylesheet/style.less')
+    return gulp.src([
+            './static/stylesheet/style.less',
+            './static/stylesheet/dark-theme.less',
+        ])
         .pipe(less())
         .pipe(minify())
         .pipe(rename({

static/stylesheet/dark-theme.less

@@ -1,23 +1,52 @@
-// This stylesheet contains style overrides for the dark theme.
+//
+// Dark Theme CSS.
+//
+// If you want to always use the dark theme, then you can use a <link> like the
+// following:
+//
+// <link rel="stylesheet" type="text/css"
+//       href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-detect-preferences.min.css">
+//
+// If you want to enable only when the prefers-color-scheme is set to dark (and
+// potentially no-preference), make sure that you add the appropriate media
+// query to the <link>. For example:
+//
+// <link media="(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)"
+//       rel="stylesheet"
+//       type="text/css"
+//       href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-detect-preferences.min.css">
+//
+// or
+//
+// <link media="(prefers-color-scheme: dark)"
+//       rel="stylesheet"
+//       type="text/css"
+//       href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-detect-preferences.min.css">
+//
+// depending on whether you want to default to dark mode or not when the user
+// hasn't set a preference.
+//
+
 @import "variables.less";
 
-body {
+html:not(.light-theme), html.dark-theme {
+  body {
     background-color: @body-bg-dark-theme;
     color: @text-color-dark-theme;
-}
+  }
 
-hr {
+  hr {
     color: @solid-dark-grey;
     background-color: @solid-dark-grey;
-}
+  }
 
-aside {
+  aside {
     background-color: @sidebar-bg-dark-theme;
     color: @sidebar-text-color;
 
-}
+  }
 
-main {
+  main {
     nav {
       border-bottom-color: @nav-border-color-dark-theme;
     }
@@ -43,72 +72,73 @@ main {
     footer {
       border-top-color: @footer-border-color-dark-theme;
     }
-}
+  }
 
-div.related-posts {
+  div.related-posts {
     border-color: @rel-post-border-color-dark-theme;
-}
+  }
 
-// Admonition
+  // Admonition
-div.admonition.attention {
+  div.admonition.attention {
     p, div {
       color: @admonition-attention-color-dark-theme;
       background-color: @admonition-attention-bg-color-dark-theme;
     }
-}
+  }
 
-div.admonition.caution {
+  div.admonition.caution {
     p, div {
       color: @admonition-caution-color-dark-theme;
       background-color: @admonition-caution-bg-color-dark-theme;
     }
-}
+  }
 
-div.admonition.danger {
+  div.admonition.danger {
     p, div {
       color: @admonition-danger-color-dark-theme;
       background-color: @admonition-danger-bg-color-dark-theme;
     }
-}
+  }
 
-div.admonition.error {
+  div.admonition.error {
     p, div {
       color: @admonition-error-color-dark-theme;
       background-color: @admonition-error-bg-color-dark-theme;
     }
-}
+  }
 
-div.admonition.hint {
+  div.admonition.hint {
     p, div {
       color: @admonition-hint-color-dark-theme;
       background-color: @admonition-hint-bg-color-dark-theme;
     }
-}
+  }
 
-div.admonition.important {
+  div.admonition.important {
     p, div {
       color: @admonition-important-color-dark-theme;
       background-color: @admonition-important-bg-color-dark-theme;
     }
-}
+  }
 
-div.admonition.note {
+  div.admonition.note {
     p, div {
       color: @admonition-note-color-dark-theme;
       background-color: @admonition-note-bg-color-dark-theme;
     }
-}
+  }
 
-div.admonition.tip {
+  div.admonition.tip {
     p, div {
       color: @admonition-tip-color-dark-theme;
       background-color: @admonition-tip-bg-color-dark-theme;
     }
-}
+  }
 
-div.admonition.warning {
+  div.admonition.warning {
     p, div {
       color: @admonition-warning-color-dark-theme;
       background-color: @admonition-warning-bg-color-dark-theme;
     }
+  }
 }

templates/base.html

@@ -5,7 +5,11 @@
 {% endif %}
 
 <!DOCTYPE html>
-<html lang="{{ DEFAULT_LANG }}">
+<html lang="{{ DEFAULT_LANG }}"
+  {% if not THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
+    class="{{ THEME_COLOR|default('light') }}-theme"
+  {% endif %}
+>
 <head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -28,6 +32,50 @@
     <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/style.min.css">
   {% endif %}
 
+  <!--
+    DARK THEME STYLES
+    The dark theme will be enabled if any of the following are true:
+    * the <html> tag has the .dark-theme class.
+    * THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE is true and the appropriate color scheme preference
+      is set in the browser and the <html> tag does not have the .light-theme class.
+  -->
+  <link rel="stylesheet" type="text/css"
+        {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
+          {% if THEME_COLOR|default("light") == "dark" %}
+            media="(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)"
+          {% else %}
+            media="(prefers-color-scheme: dark)"
+          {% endif %}
+        {% endif %}
+        href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme.min.css">
+
+  <!--
+    PYGMENTS STYLES
+
+  -->
+  {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR == "dark" %}
+    <link rel="stylesheet" type="text/css"
+          {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
+            {% if THEME_COLOR|default("light") == "dark" %}
+              media="(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)"
+            {% else %}
+              media="(prefers-color-scheme: dark)"
+            {% endif %}
+          {% endif %}
+          href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/pygments/{{ PYGMENTS_STYLE_DARK or PYGMENTS_STYLE or 'monokai' }}.min.css">
+  {% endif %}
+  {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or not THEME_COLOR or THEME_COLOR == "light" %}
+    <link rel="stylesheet" type="text/css"
+          {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
+            {% if THEME_COLOR|default("light") == "dark" %}
+              media="(prefers-color-scheme: light)"
+            {% else %}
+              media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+            {% endif %}
+          {% endif %}
+          href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/pygments/{{ PYGMENTS_STYLE|default('github') }}.min.css">
+  {% endif %}
+
   {% if USE_TIPUE_SEARCH %}
     <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/tipuesearch/jquery.min.js"></script>
     <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/tipuesearch/tipuesearch.min.js"></script>
@@ -36,12 +84,6 @@
     <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/tipuesearch/tipuesearch.min.css" />
   {% endif %}
 
-  <link rel="stylesheet" type="text/css"
-    media="(prefers-color-scheme: dark)"
-    href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/pygments/{{ PYGMENTS_STYLE_DARK|default('monokai') }}.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">

templates/partial/flex.html

@@ -1,32 +1,46 @@
-<p>{{ _('Built with %(pelican_url)s using %(flex_url)s theme',
+<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) }}
+    flex_url='<a href="http://bit.ly/flex-pelican" target="_blank">Flex</a>'|safe)
+}}
+{% if THEME_COLOR_ENABLE_USER_OVERRIDE %}
   <span class="footer-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')">
+  </a>
+  {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
+    |<a href="javascript:void(0)" onclick="switchTheme('browser')">
       browser
     </a>
+  {% endif %}
   theme
+{% endif %}
 </p>
-<script>
+{% if THEME_COLOR_ENABLE_USER_OVERRIDE %}
+  <script>
+    {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
       const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)');
+    {% endif %}
 
     function detectThemeAndSwitchStyle() {
       let theme = localStorage.getItem('themeOverride');
       if (theme !== 'light' && theme !== 'dark') {
+        {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
           theme = darkSchemeWatch.matches ? 'dark' : 'light';
+        {% else %}
+          theme = '{{ THEME_COLOR|default("light") }}';
+        {% endif %}
       }
-    console.log(`Switching theme to ${theme}.`)
 
       // 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|default('github') }}'
-      : '{{ PYGMENTS_STYLE_DARK|default('monokai') }}'
+        : '{{ PYGMENTS_STYLE_DARK or PYGMENTS_STYLE or 'monokai' }}';
       Array.from(document.head.getElementsByTagName('link')).forEach(linkEl => {
         if (linkEl.href.match(/\/theme\/pygments\/.*\.min\.css/)) {
           linkEl.href = `/theme/pygments/${pygmentsTheme}.min.css`;
@@ -49,5 +63,8 @@
     }
 
     detectThemeAndSwitchStyle();
+    {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
       darkSchemeWatch.addListener(detectThemeAndSwitchStyle);
-</script>
+    {% endif %}
+  </script>
+{% endif %}