| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- function toggleDarkMode() { // jshint ignore:line
- var toggler = document.getElementById( 'dark-mode-toggler' );
- if ( 'false' === toggler.getAttribute( 'aria-pressed' ) ) {
- toggler.setAttribute( 'aria-pressed', 'true' );
- document.documentElement.classList.add( 'is-dark-theme' );
- document.body.classList.add( 'is-dark-theme' );
- window.localStorage.setItem( 'twentytwentyoneDarkMode', 'yes' );
- } else {
- toggler.setAttribute( 'aria-pressed', 'false' );
- document.documentElement.classList.remove( 'is-dark-theme' );
- document.body.classList.remove( 'is-dark-theme' );
- window.localStorage.setItem( 'twentytwentyoneDarkMode', 'no' );
- }
- }
- function twentytwentyoneIsDarkMode() {
- var isDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches;
- if ( 'yes' === window.localStorage.getItem( 'twentytwentyoneDarkMode' ) ) {
- isDarkMode = true;
- } else if ( 'no' === window.localStorage.getItem( 'twentytwentyoneDarkMode' ) ) {
- isDarkMode = false;
- }
- return isDarkMode;
- }
- function darkModeInitialLoad() {
- var toggler = document.getElementById( 'dark-mode-toggler' ),
- isDarkMode = twentytwentyoneIsDarkMode();
- if ( isDarkMode ) {
- document.documentElement.classList.add( 'is-dark-theme' );
- document.body.classList.add( 'is-dark-theme' );
- } else {
- document.documentElement.classList.remove( 'is-dark-theme' );
- document.body.classList.remove( 'is-dark-theme' );
- }
- if ( toggler && isDarkMode ) {
- toggler.setAttribute( 'aria-pressed', 'true' );
- }
- }
- function darkModeRepositionTogglerOnScroll() {
- var toggler = document.getElementById( 'dark-mode-toggler' ),
- prevScroll = window.scrollY || document.documentElement.scrollTop,
- currentScroll,
- checkScroll = function() {
- currentScroll = window.scrollY || document.documentElement.scrollTop;
- if (
- currentScroll + ( window.innerHeight * 1.5 ) > document.body.clientHeight ||
- currentScroll < prevScroll
- ) {
- toggler.classList.remove( 'hide' );
- } else if ( currentScroll > prevScroll && 250 < currentScroll ) {
- toggler.classList.add( 'hide' );
- }
- prevScroll = currentScroll;
- };
- if ( toggler ) {
- window.addEventListener( 'scroll', checkScroll );
- }
- }
- darkModeInitialLoad();
- darkModeRepositionTogglerOnScroll();
|