Procházet zdrojové kódy

fix: when toggling day/night mode, also toggle code highlighting theme

Fix case where code highlighting can be difficult to read after night
mode is toggled by user as the highlight theme remained unchanged.
George Cushen před 6 roky
rodič
revize
34cf1f0957
2 změnil soubory, kde provedl 12 přidání a 2 odebrání
  1. 8 0
      assets/js/academic.js
  2. 4 2
      layouts/partials/header.html

+ 8 - 0
assets/js/academic.js

@@ -274,12 +274,16 @@
     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');
       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');
       localStorage.setItem('dark_mode', '1');
@@ -299,10 +303,14 @@
     let dark_mode = parseInt(localStorage.getItem('dark_mode') || default_mode);
     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');
     } 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');
     }

+ 4 - 2
layouts/partials/header.html

@@ -77,9 +77,11 @@
         {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\">" (printf $css.highlight.url $css.highlight.version .) | safeHTML }}
       {{ else }}
         {{ if eq ($scr.Get "light") true }}
-          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\">" (printf $css.highlight.url $css.highlight.version "github") | safeHTML }}
+          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-light\">" (printf $css.highlight.url $css.highlight.version "github") | safeHTML }}
+          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-dark\" disabled>" (printf $css.highlight.url $css.highlight.version "dracula") | safeHTML }}
         {{ else }}
-          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\">" (printf $css.highlight.url $css.highlight.version "dracula") | safeHTML }}
+          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-light\" disabled>" (printf $css.highlight.url $css.highlight.version "github") | safeHTML }}
+          {{ printf "<link rel=\"stylesheet\" href=\"%s\" crossorigin=\"anonymous\" title=\"hl-dark\">" (printf $css.highlight.url $css.highlight.version "dracula") | safeHTML }}
         {{ end }}
       {{ end }}
     {{ end }}