You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.2 KiB
JavaScript
72 lines
2.2 KiB
JavaScript
7 months ago
|
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();
|