[Summary view] [Print] [Text view]

   1  function toggleDarkMode() { // jshint ignore:line
   2      var toggler = document.getElementById( 'dark-mode-toggler' );
   3  
   4      if ( 'false' === toggler.getAttribute( 'aria-pressed' ) ) {
   5          toggler.setAttribute( 'aria-pressed', 'true' );
   6          document.documentElement.classList.add( 'is-dark-theme' );
   7          document.body.classList.add( 'is-dark-theme' );
   8          window.localStorage.setItem( 'twentytwentyoneDarkMode', 'yes' );
   9      } else {
  10          toggler.setAttribute( 'aria-pressed', 'false' );
  11          document.documentElement.classList.remove( 'is-dark-theme' );
  12          document.body.classList.remove( 'is-dark-theme' );
  13          window.localStorage.setItem( 'twentytwentyoneDarkMode', 'no' );
  14      }
  15  }
  16  
  17  function twentytwentyoneIsDarkMode() {
  18      var isDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches;
  19  
  20      if ( 'yes' === window.localStorage.getItem( 'twentytwentyoneDarkMode' ) ) {
  21          isDarkMode = true;
  22      } else if ( 'no' === window.localStorage.getItem( 'twentytwentyoneDarkMode' ) ) {
  23          isDarkMode = false;
  24      }
  25  
  26      return isDarkMode;
  27  }
  28  
  29  function darkModeInitialLoad() {
  30      var toggler = document.getElementById( 'dark-mode-toggler' ),
  31          isDarkMode = twentytwentyoneIsDarkMode();
  32  
  33      if ( isDarkMode ) {
  34          document.documentElement.classList.add( 'is-dark-theme' );
  35          document.body.classList.add( 'is-dark-theme' );
  36      } else {
  37          document.documentElement.classList.remove( 'is-dark-theme' );
  38          document.body.classList.remove( 'is-dark-theme' );
  39      }
  40  
  41      if ( toggler && isDarkMode ) {
  42          toggler.setAttribute( 'aria-pressed', 'true' );
  43      }
  44  }
  45  
  46  function darkModeRepositionTogglerOnScroll() {
  47  
  48      var toggler = document.getElementById( 'dark-mode-toggler' ),
  49          prevScroll = window.scrollY || document.documentElement.scrollTop,
  50          currentScroll,
  51  
  52          checkScroll = function() {
  53              currentScroll = window.scrollY || document.documentElement.scrollTop;
  54              if (
  55                  currentScroll + ( window.innerHeight * 1.5 ) > document.body.clientHeight ||
  56                  currentScroll < prevScroll
  57              ) {
  58                  toggler.classList.remove( 'hide' );
  59              } else if ( currentScroll > prevScroll && 250 < currentScroll ) {
  60                  toggler.classList.add( 'hide' );
  61              }
  62              prevScroll = currentScroll;
  63          };
  64  
  65      if ( toggler ) {
  66          window.addEventListener( 'scroll', checkScroll );
  67      }
  68  }
  69  
  70  darkModeInitialLoad();
  71  darkModeRepositionTogglerOnScroll();