Explorar el Código

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 hace 6 años
padre
commit
34cf1f0957
Se han modificado 2 ficheros con 12 adiciones y 2 borrados
  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 }}