Greatly simplified all of the logic; moved the JS to a separate file

gulpfile.js

@@ -1,22 +1,31 @@
 var gulp = require('gulp'),
     less = require('gulp-less'),
     rename = require('gulp-rename'),
-    minify = require('gulp-cssnano');
+    cssnano = require('gulp-cssnano'),
+    uglify = require('gulp-uglify');
 
 gulp.task('less', function () {
     return gulp.src([
-            './static/stylesheet/dark-theme-has-class.less',
+            './static/stylesheet/dark-theme.less',
-            './static/stylesheet/dark-theme-not-overridden.less',
             './static/stylesheet/style.less',
         ])
         .pipe(less())
-        .pipe(minify())
+        .pipe(cssnano())
         .pipe(rename({
             extname: '.min.css'
         }))
         .pipe(gulp.dest('./static/stylesheet'));
 });
 
+gulp.task('uglify', function () {
+    return gulp.src('./static/dark_theme/dark_theme.js')
+        .pipe(uglify())
+        .pipe(rename({
+            extname: '.min.js'
+        }))
+        .pipe(gulp.dest('./static/dark_theme'));
+});
+
 gulp.task('cp', function () {
     return gulp.src('./node_modules/font-awesome/**/*.{min.css,otf,eot,svg,ttf,woff,woff2}')
         .pipe(gulp.dest('./static/font-awesome'));
@@ -24,7 +33,7 @@ gulp.task('cp', function () {
 
 gulp.task('pygments', function () {
     return gulp.src(['./static/pygments/*.css', '!./static/pygments/*min.css'])
-        .pipe(minify())
+        .pipe(cssnano())
         .pipe(rename({
             extname: '.min.css'
         }))
@@ -32,4 +41,4 @@ gulp.task('pygments', function () {
 });
 
 
-gulp.task('default', gulp.series(['less', 'cp', 'pygments']));
+gulp.task('default', gulp.series(['less', 'uglify', 'cp', 'pygments']));

package.json

@@ -28,6 +28,7 @@
     "gulp": "^4.0.1",
     "gulp-cssnano": "^2.1.3",
     "gulp-less": "^3.5.0",
-    "gulp-rename": "^1.3.0"
+    "gulp-rename": "^1.3.0",
+    "gulp-uglify": "^3.0.2"
   }
 }

static/dark_theme/dark_theme.js

@@ -0,0 +1,58 @@
+function ThemeManager(options) {
+  var defaultTheme = options.defaultTheme;
+  var enableAutoDetectTheme = options.enableAutoDetectTheme.toLowerCase() === 'true';
+
+  var darkThemeMatch = window.matchMedia(
+    defaultTheme === 'light' ?
+      '(prefers-color-scheme: dark)' :
+      '(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)'
+  );
+
+  function setEnabledAndDisableMediaQuery(elementId, enabled) {
+    var element = document.getElementById(elementId);
+    element.disabled = !enabled;
+    element.media = '';
+  }
+
+  function detectThemeAndSwitchStyle() {
+    var theme = localStorage.getItem('themeOverride');
+    if (theme !== 'light' && theme !== 'dark') {
+      if (theme === 'browser' || enableAutoDetectTheme) {
+        theme = darkThemeMatch.matches ? 'dark' : 'light';
+      } else {
+        theme = defaultTheme;
+      }
+    }
+
+    // (Dis|En)able the styles according to the user's desired theme.  Get rid
+    // of the media queries, since we are handling it in JS.
+    setEnabledAndDisableMediaQuery('dark-theme-style', theme === 'dark');
+    setEnabledAndDisableMediaQuery('pygments-dark-theme', theme === 'dark');
+    setEnabledAndDisableMediaQuery('pygments-light-theme', theme === 'light');
+
+    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');
+    }
+  }
+
+  this.switch = function(themeOverride) {
+    localStorage.setItem('themeOverride', themeOverride);
+    detectThemeAndSwitchStyle();
+  };
+
+  // If there's an override, then apply it, otherwise, don't incur the
+  // overhead of determining whether or not to switch themes.
+  var themeOverride = localStorage.getItem('themeOverride');
+  if (themeOverride === 'light' || themeOverride === 'dark') {
+    detectThemeAndSwitchStyle();
+  }
+
+  // If theme auto-detection is enabled, then add a listenr on the matchMedia.
+  darkThemeMatch.addListener(detectThemeAndSwitchStyle);
+}
+
+window.theme = new ThemeManager(document.getElementById('dark-theme-script').dataset);

static/dark_theme/dark_theme.min.js

@@ -0,0 +1 @@
+function ThemeManager(e){var t=e.defaultTheme,r="true"===e.enableAutoDetectTheme.toLowerCase(),a=window.matchMedia("light"===t?"(prefers-color-scheme: dark)":"(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)");function d(e,t){var r=document.getElementById(e);r.disabled=!t,r.media=""}function m(){var e=localStorage.getItem("themeOverride");"light"!==e&&"dark"!==e&&(e="browser"===e||r?a.matches?"dark":"light":t),d("dark-theme-style","dark"===e),d("pygments-dark-theme","dark"===e),d("pygments-light-theme","light"===e),"dark"===e?(document.body.classList.add("dark-theme"),document.body.classList.remove("light-theme")):(document.body.classList.add("light-theme"),document.body.classList.remove("dark-theme"))}this.switch=function(e){localStorage.setItem("themeOverride",e),m()};var o=localStorage.getItem("themeOverride");"light"!==o&&"dark"!==o||m(),a.addListener(m)}window.theme=new ThemeManager(document.getElementById("dark-theme-script").dataset);

static/stylesheet/dark-theme-has-class.less

@@ -1,14 +0,0 @@
-//
-// Dark Theme CSS that gets activated when the <html> element has the
-// .dark-theme class.
-//
-// To use this, add the .dark-theme class to the <html> element, and add the
-// following <link>:
-//
-// <link rel="stylesheet" type="text/css"
-//       href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-class.min.css">
-//
-
-html.dark-theme {
-  @import (multiple) "dark-theme-styles.less";
-}

static/stylesheet/dark-theme-not-overridden.less

@@ -1,15 +0,0 @@
-//
-// Dark Theme CSS for use inside of a media query. This will apply the dark
-// style except when overriden by a .light-theme class on the <html> tag.
-//
-// To use this, add a <link> like the following (change the media query how you
-// want):
-//
-// <link rel="stylesheet" type="text/css"
-//       media="(prefers-color-scheme: dark)"
-//       href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-class.min.css">
-//
-
-html:not(.light-theme) {
-  @import (multiple) "dark-theme-styles.less";
-}

static/stylesheet/dark-theme.less

@@ -1,9 +1,6 @@
 //
 // Dark Theme CSS styles.
 //
-// Don't directly include this file, instead, use the `dark-theme-class` or
-// `dark-theme-override` files.
-//
 
 @import "variables.less";
 

static/stylesheet/dark-theme.min.css

@@ -0,0 +1 @@
+body{background-color:#333;color:#eee}hr{color:#222}aside,hr{background-color:#222}aside{color:#fff}aside form.navbar-search input#tipue_search_input{background-color:#1a1a1a;color:#eee}main nav{border-bottom-color:#222}main .translations a,main nav a{border-color:#222}main article kbd{background-color:#080808;color:#eee}main article blockquote,main article pre{border-left:8px solid #ffffff33}main article :not(pre)>code{background-color:#080808;border-color:#000}main article div#tipue_search_content .tipue_search_result span.tipue_search_content_bold{color:#fff}main article section#isso-thread .auth-section p.input-wrapper input,main article section#isso-thread .notification-section input,main article section#isso-thread div.textarea{background:#1a1a1a;color:#eee}main article section#isso-thread>h4{color:#eee}main article section#isso-thread .isso-postbox>.form-wrapper .preview{background:repeating-linear-gradient(-45deg,#222,#222 10px,#1a1a1a 0,#1a1a1a 20px)}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .author{color:#eee}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .note,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .spacer,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.parent,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.permalink{color:#999}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .note:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .spacer:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.parent:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.permalink:hover{color:#eee}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-footer a:hover{text-shadow:#242121 0 0 1px!important}main footer{border-top-color:#222}div.related-posts{border-color:#222}div.admonition.attention,div.admonition.caution{color:#fbda7a;background-color:#4a3900}div.admonition.danger,div.admonition.error{color:#ebadb3;background-color:#28070a}div.admonition.hint{color:#7abaff;background-color:#001933}div.admonition.important,div.admonition.note{color:#a8eab7;background-color:#122b18}div.admonition.tip{color:#7abaff;background-color:#001933}div.admonition.warning{color:#fbda7a;background-color:#4a3900}

static/stylesheet/style.less

@@ -134,10 +134,6 @@ main {
       border-right: @nav-border-color 1px solid;
     }
 
-    :first-child {
-      border-left: none;
-    }
-
     :last-child {
       border-right: none;
     }

templates/base.html

@@ -5,11 +5,7 @@
 {% 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" />
@@ -33,40 +29,36 @@
   {% endif %}
 
   {# DARK THEME STYLES #}
-  {% if not THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE and not THEME_COLOR_ENABLE_USER_OVERRIDE and THEME_COLOR == "dark" %}
+  {% if THEME_COLOR == "dark" or THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR_ENABLE_USER_OVERRIDE %}
-    <link rel="stylesheet" type="text/css"
+    <link id="dark-theme-style" rel="stylesheet" type="text/css"
-        href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-not-overridden.min.css">
-  {% endif %}
       {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
-    {# Enable dark mode when media query matches and .light-theme class does not exist on <html> tag #}
-    <link rel="stylesheet" type="text/css"
         {% if THEME_COLOR|default("light") == "dark" %}
           media="(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)"
         {% else %}
           media="(prefers-color-scheme: dark)"
         {% endif %}
-    href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-not-overridden.min.css">
+      {% elif THEME_COLOR_ENABLE_USER_OVERRIDE and THEME_COLOR|default("light") == "light" %}
+        disabled="disabled"
       {% endif %}
-  {% if THEME_COLOR_ENABLE_USER_OVERRIDE %}
+    href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme.min.css">
-    {# Enable dark mode when .dark-theme class exists on <html> tag #}
-    <link rel="stylesheet" type="text/css"
-        href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-has-class.min.css">
   {% endif %}
 
   {# PYGMENTS STYLES #}
-  {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR == "dark" %}
+  {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR_ENABLE_USER_OVERRIDE or THEME_COLOR == "dark" %}
-    <link rel="stylesheet" type="text/css"
+    <link id="pygments-dark-theme" 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 %}
+          {% elif THEME_COLOR_ENABLE_USER_OVERRIDE and THEME_COLOR|default("light") == "light" %}
+            disabled="disabled"
           {% 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"
+    <link id="pygments-light-theme" rel="stylesheet" type="text/css"
           {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
             {% if THEME_COLOR|default("light") == "dark" %}
               media="(prefers-color-scheme: light)"
@@ -143,7 +135,11 @@
     {% include "partial/gtm.html" %}
   {% endif %}
 </head>
-<body>
+<body
+  {% if not THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
+    class="{{ THEME_COLOR|default('light') }}-theme"
+  {% endif %}
+>
   {% if GOOGLE_TAG_MANAGER %}
     {% include "partial/gtm_noscript.html" %}
   {% endif %}

templates/partial/flex.html

@@ -12,57 +12,11 @@
       light_url='<a href="javascript:void(0)" onclick="theme.switch(`light`)">light</a>',
       browser_url='<a href="javascript:void(0)" onclick="theme.switch(`browser`)">browser</a>'|safe)
   }}
-{% endif %}
+  <script id="dark-theme-script"
-</p>
+          src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/dark_theme/dark_theme.min.js"
-{% if THEME_COLOR_ENABLE_USER_OVERRIDE %}
+          data-enable-auto-detect-theme="{{ THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE|default('false') }}"
-  <script>
+          data-default-theme="{{ THEME_COLOR|default('light') }}"
-    {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
+          type="text/javascript">
-      {% if THEME_COLOR|default("light") == "dark" %}
-        const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)');
-      {% else %}
-        const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)');
-      {% endif %}
-    {% 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 %}
-      }
-
-      // 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();
-    }
-
-    detectThemeAndSwitchStyle();
-    {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
-      darkSchemeWatch.addListener(detectThemeAndSwitchStyle);
-    {% endif %}
   </script>
 {% endif %}
+</p>