https://teresabuecker.de/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js?ver=1.0.0

1function 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
17function 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
29function 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
46function 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
70darkModeInitialLoad();
71darkModeRepositionTogglerOnScroll();