balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

dark-mode-toggler.js (2245B)

      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();