eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Clean up the dark mode script block

Browse source
This commit is contained in:
Eryn Wells 2021-12-26 12:43:26 -07:00
parent b6a9e36cb9
commit 265734bfe1
1 changed files with 10 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
layouts/_default/baseof.html
View file

@ -4,23 +4,23 @@
<body class="not-ready" data-menu="{{ isset site.Menus `main` }}"> <body class="not-ready" data-menu="{{ isset site.Menus `main` }}">
{{ partial "header.html" . }} {{ partial "header.html" . }}
<main class="main">
<main class="main">{{ block "main" . }}{{ end }}</main> {{ block "main" . }}{{ end }}
</main>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
</body> </body>
<script> <script>
let bodyClx = document.body.classList; let bodyClasses = document.body.classList;
let sysDark = window.matchMedia('(prefers-color-scheme: dark)'); let systemDarkModeMatch = window.matchMedia('(prefers-color-scheme: dark)');
let darkVal = localStorage.getItem('dark'); let localStorageDarkMode = localStorage.getItem('dark');
let setDark = (isDark) => { let setDark = (isDark) => {
bodyClx[isDark ? 'add' : 'remove']('dark'); bodyClasses[isDark ? 'add' : 'remove']('dark');
localStorage.setItem('dark', isDark ? 'yes' : 'no'); localStorage.setItem('dark', isDark ? 'yes' : 'no');
}; };
setDark(darkVal ? darkVal === 'yes' : sysDark.matches); setDark(localStorageDarkMode ? localStorageDarkMode === 'yes' : systemDarkModeMatch.matches);
requestAnimationFrame(() => bodyClx.remove('not-ready')); requestAnimationFrame(() => bodyClasses.remove('not-ready'));
sysDark.addEventListener('change', (event) => setDark(event.matches)); systemDarkModeMatch.addEventListener('change', (event) => setDark(event.matches));
</script> </script>
</html> </html>