fix(js): day/night mode when `highlight=false` or `highlight_style` is set

Fix JQuery error when `day_night=true` and (`highlight=false` or `highlight_style` is set)

Fix #1040
Fix #952

assets/js/academic.js

@@ -306,22 +306,24 @@
   * Toggle day/night mode.
   * --------------------------------------------------------------------------- */
 
-  function toggleDarkMode() {
+  function toggleDarkMode(codeHlEnabled, codeHlLight, codeHlDark) {
     if ($('body').hasClass('dark')) {
       $('body').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 500);
       $('body').removeClass('dark');
-      $('link[title=hl-light]')[0].disabled = false;
-      $('link[title=hl-dark]')[0].disabled = true;
-      $('.js-dark-toggle i').removeClass('fa-sun');
-      $('.js-dark-toggle i').addClass('fa-moon');
+      if (codeHlEnabled) {
+        codeHlLight.disabled = false;
+        codeHlDark.disabled = true;
+      }
+      $('.js-dark-toggle i').removeClass('fa-sun').addClass('fa-moon');
       localStorage.setItem('dark_mode', '0');
     } else {
       $('body').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 500);
       $('body').addClass('dark');
-      $('link[title=hl-light]')[0].disabled = true;
-      $('link[title=hl-dark]')[0].disabled = false;
-      $('.js-dark-toggle i').removeClass('fa-moon');
-      $('.js-dark-toggle i').addClass('fa-sun');
+      if (codeHlEnabled) {
+        codeHlLight.disabled = true;
+        codeHlDark.disabled = false;
+      }
+      $('.js-dark-toggle i').removeClass('fa-moon').addClass('fa-sun');
       localStorage.setItem('dark_mode', '1');
     }
   }
@@ -337,19 +339,33 @@
       default_mode = 1;
     }
     let dark_mode = parseInt(localStorage.getItem('dark_mode') || default_mode);
+
+    // Is code highlighting enabled in site config?
+    const codeHlEnabled = $('link[title=hl-light]').length > 0;
+    const codeHlLight = $('link[title=hl-light]')[0];
+    const codeHlDark = $('link[title=hl-dark]')[0];
+
     if (dark_mode) {
       $('body').addClass('dark');
-      $('link[title=hl-light]')[0].disabled = true;
-      $('link[title=hl-dark]')[0].disabled = false;
-      $('.js-dark-toggle i').removeClass('fa-moon');
-      $('.js-dark-toggle i').addClass('fa-sun');
+      if (codeHlEnabled) {
+        codeHlLight.disabled = true;
+        codeHlDark.disabled = false;
+      }
+      $('.js-dark-toggle i').removeClass('fa-moon').addClass('fa-sun');
     } else {
       $('body').removeClass('dark');
-      $('link[title=hl-light]')[0].disabled = false;
-      $('link[title=hl-dark]')[0].disabled = true;
-      $('.js-dark-toggle i').removeClass('fa-sun');
-      $('.js-dark-toggle i').addClass('fa-moon');
+      if (codeHlEnabled) {
+        codeHlLight.disabled = false;
+        codeHlDark.disabled = true;
+      }
+      $('.js-dark-toggle i').removeClass('fa-sun').addClass('fa-moon');
     }
+
+    // Toggle day/night mode.
+    $('.js-dark-toggle').click(function(e) {
+      e.preventDefault();
+      toggleDarkMode(codeHlEnabled, codeHlLight, codeHlDark);
+    });
   });
 
   /* ---------------------------------------------------------------------------
@@ -491,12 +507,6 @@
       }
     });
 
-    // Toggle day/night mode.
-    $('.js-dark-toggle').click(function(e) {
-      e.preventDefault();
-      toggleDarkMode();
-    });
-
   });
 
 })(jQuery);

layouts/partials/header.html

@@ -73,7 +73,8 @@
     {{ if ($scr.Get "highlight_enabled") }}
       {{ $v := $css.highlight.version }}
       {{ with .Site.Params.highlight_style }}
-        {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\">" (printf $css.highlight.url $css.highlight.version .) | safeHTML }}
+        {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-light\">" (printf $css.highlight.url $css.highlight.version .) | safeHTML }}
+        {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-dark\" disabled>" (printf $css.highlight.url $css.highlight.version .) | safeHTML }}
       {{ else }}
         {{ if eq ($scr.Get "light") true }}
           {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-light\">" (printf $css.highlight.url $css.highlight.version "github") | safeHTML }}