WordPress/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js
desrosj 634e6b16c8 Twenty Twenty-One: Sync the latest changes for 5.6 RC1.
For a full list of changes since [49574-49577], see https://github.com/WordPress/twentytwentyone/compare/aa284fd...trunk.

Props poena, luminuu, kjellr, ryelle, aristath.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49633


git-svn-id: http://core.svn.wordpress.org/trunk@49371 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-11-17 19:00:08 +00:00

67 lines
2.2 KiB
JavaScript

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 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
) {
document.getElementById( 'dark-mode-toggler' ).classList.remove( 'hide' );
} else if ( currentScroll > prevScroll && 250 < currentScroll ) {
document.getElementById( 'dark-mode-toggler' ).classList.add( 'hide' );
}
prevScroll = currentScroll;
};
window.addEventListener( 'scroll', checkScroll );
}
darkModeInitialLoad();
darkModeRepositionTogglerOnScroll();