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