diff --git a/gulpfile.js b/gulpfile.js
index b7e671c..c8e2d42 100644
--- a/gulpfile.js
+++ b/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({
diff --git a/static/stylesheet/dark-theme.less b/static/stylesheet/dark-theme.less
index ae16b4f..e5d852e 100644
--- a/static/stylesheet/dark-theme.less
+++ b/static/stylesheet/dark-theme.less
@@ -1,114 +1,144 @@
-// 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 {
-  background-color: @body-bg-dark-theme;
-  color: @text-color-dark-theme;
-}
-
-hr {
-  color: @solid-dark-grey;
-  background-color: @solid-dark-grey;
-}
-
-aside {
-  background-color: @sidebar-bg-dark-theme;
-  color: @sidebar-text-color;
-
-}
-
-main {
-  nav {
-    border-bottom-color: @nav-border-color-dark-theme;
+html:not(.light-theme), html.dark-theme {
+  body {
+    background-color: @body-bg-dark-theme;
+    color: @text-color-dark-theme;
   }
 
-  nav, .translations {
-    a {
-      border-color: @nav-border-color-dark-theme;
+  hr {
+    color: @solid-dark-grey;
+    background-color: @solid-dark-grey;
+  }
+
+  aside {
+    background-color: @sidebar-bg-dark-theme;
+    color: @sidebar-text-color;
+
+  }
+
+  main {
+    nav {
+      border-bottom-color: @nav-border-color-dark-theme;
+    }
+
+    nav, .translations {
+      a {
+        border-color: @nav-border-color-dark-theme;
+      }
+    }
+
+    article {
+      kbd {
+        background-color: #080808;
+        color: @light-grey;
+      }
+
+      *:not(pre) > code {
+        background-color: #080808;
+        border-color: #000;
+      }
+    }
+
+    footer {
+      border-top-color: @footer-border-color-dark-theme;
     }
   }
 
-  article {
-    kbd {
-      background-color: #080808;
-      color: @light-grey;
-    }
+  div.related-posts {
+    border-color: @rel-post-border-color-dark-theme;
+  }
 
-    *:not(pre) > code {
-      background-color: #080808;
-      border-color: #000;
+  // Admonition
+  div.admonition.attention {
+    p, div {
+      color: @admonition-attention-color-dark-theme;
+      background-color: @admonition-attention-bg-color-dark-theme;
     }
   }
 
-  footer {
-    border-top-color: @footer-border-color-dark-theme;
-  }
-}
-
-div.related-posts {
-  border-color: @rel-post-border-color-dark-theme;
-}
-
-// Admonition
-div.admonition.attention {
-  p, div {
-    color: @admonition-attention-color-dark-theme;
-    background-color: @admonition-attention-bg-color-dark-theme;
-  }
-}
-
-div.admonition.caution {
-  p, div {
-    color: @admonition-caution-color-dark-theme;
-    background-color: @admonition-caution-bg-color-dark-theme;
-  }
-}
-
-div.admonition.danger {
-  p, div {
-    color: @admonition-danger-color-dark-theme;
-    background-color: @admonition-danger-bg-color-dark-theme;
-  }
-}
-
-div.admonition.error {
-  p, div {
-    color: @admonition-error-color-dark-theme;
-    background-color: @admonition-error-bg-color-dark-theme;
-  }
-}
-
-div.admonition.hint {
-  p, div {
-    color: @admonition-hint-color-dark-theme;
-    background-color: @admonition-hint-bg-color-dark-theme;
-  }
-}
-
-div.admonition.important {
-  p, div {
-    color: @admonition-important-color-dark-theme;
-    background-color: @admonition-important-bg-color-dark-theme;
-  }
-}
-
-div.admonition.note {
-  p, div {
-    color: @admonition-note-color-dark-theme;
-    background-color: @admonition-note-bg-color-dark-theme;
-  }
-}
-
-div.admonition.tip {
-  p, div {
-    color: @admonition-tip-color-dark-theme;
-    background-color: @admonition-tip-bg-color-dark-theme;
-  }
-}
-
-div.admonition.warning {
-  p, div {
-    color: @admonition-warning-color-dark-theme;
-    background-color: @admonition-warning-bg-color-dark-theme;
+  div.admonition.caution {
+    p, div {
+      color: @admonition-caution-color-dark-theme;
+      background-color: @admonition-caution-bg-color-dark-theme;
+    }
+  }
+
+  div.admonition.danger {
+    p, div {
+      color: @admonition-danger-color-dark-theme;
+      background-color: @admonition-danger-bg-color-dark-theme;
+    }
+  }
+
+  div.admonition.error {
+    p, div {
+      color: @admonition-error-color-dark-theme;
+      background-color: @admonition-error-bg-color-dark-theme;
+    }
+  }
+
+  div.admonition.hint {
+    p, div {
+      color: @admonition-hint-color-dark-theme;
+      background-color: @admonition-hint-bg-color-dark-theme;
+    }
+  }
+
+  div.admonition.important {
+    p, div {
+      color: @admonition-important-color-dark-theme;
+      background-color: @admonition-important-bg-color-dark-theme;
+    }
+  }
+
+  div.admonition.note {
+    p, div {
+      color: @admonition-note-color-dark-theme;
+      background-color: @admonition-note-bg-color-dark-theme;
+    }
+  }
+
+  div.admonition.tip {
+    p, div {
+      color: @admonition-tip-color-dark-theme;
+      background-color: @admonition-tip-bg-color-dark-theme;
+    }
+  }
+
+  div.admonition.warning {
+    p, div {
+      color: @admonition-warning-color-dark-theme;
+      background-color: @admonition-warning-bg-color-dark-theme;
+    }
   }
 }
diff --git a/templates/base.html b/templates/base.html
index 37c4c5b..a93d8ca 100644
--- a/templates/base.html
+++ b/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">
diff --git a/templates/partial/flex.html b/templates/partial/flex.html
index c881e3b..c43198c 100644
--- a/templates/partial/flex.html
+++ b/templates/partial/flex.html
@@ -1,53 +1,70 @@
-<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>
+{{
+  _('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)
+}}
+{% 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')">
-    browser
   </a>
+  {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
+    |<a href="javascript:void(0)" onclick="switchTheme('browser')">
+      browser
+    </a>
+  {% endif %}
   theme
+{% endif %}
 </p>
-<script>
-  const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)');
+{% 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') {
-      theme = darkSchemeWatch.matches ? 'dark' : 'light';
-    }
-    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') }}'
-    Array.from(document.head.getElementsByTagName('link')).forEach(linkEl => {
-      if (linkEl.href.match(/\/theme\/pygments\/.*\.min\.css/)) {
-        linkEl.href = `/theme/pygments/${pygmentsTheme}.min.css`;
+    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 %}
       }
-    });
 
-    const htmlElement = document.getElementsByTagName('html')[0];
-    if (theme === 'dark') {
-      htmlElement.classList.add('dark-theme');
-      htmlElement.classList.remove('light-theme');
-    } else {
-      htmlElement.classList.add('light-theme');
-      htmlElement.classList.remove('dark-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 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`;
+        }
+      });
+
+      const htmlElement = document.getElementsByTagName('html')[0];
+      if (theme === 'dark') {
+        htmlElement.classList.add('dark-theme');
+        htmlElement.classList.remove('light-theme');
+      } else {
+        htmlElement.classList.add('light-theme');
+        htmlElement.classList.remove('dark-theme');
+      }
+    }
+
+    function switchTheme(themeOverride) {
+      localStorage.setItem('themeOverride', themeOverride);
+      detectThemeAndSwitchStyle();
     }
-  }
 
-  function switchTheme(themeOverride) {
-    localStorage.setItem('themeOverride', themeOverride);
     detectThemeAndSwitchStyle();
-  }
-
-  detectThemeAndSwitchStyle();
-  darkSchemeWatch.addListener(detectThemeAndSwitchStyle);
-</script>
+    {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
+      darkSchemeWatch.addListener(detectThemeAndSwitchStyle);
+    {% endif %}
+  </script>
+{% endif %}