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

Move dark mode script to site.js

Browse source
This commit is contained in:
Eryn Wells 2022-09-18 13:41:29 -07:00
parent ea43893d4a
commit c3bf9b61dd
2 changed files with 17 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

15
layouts/_default/baseof.html
View file

@ -39,18 +39,5 @@
{{ block "scripts" . }}{{ end }} {{ block "scripts" . }}{{ end }}
<script> <script src="{{ `scripts/site.js` | absURL }}"></script>
const bodyClasses = document.body.classList;
const systemDarkModeMatch = window.matchMedia('(prefers-color-scheme: dark)');
const localStorageDarkMode = localStorage.getItem('dark');
const setDark = isDark => {
bodyClasses[isDark ? 'add' : 'remove']('dark');
localStorage.setItem('dark', isDark ? 'yes' : 'no');
};
setDark(localStorageDarkMode ? localStorageDarkMode === 'yes' : systemDarkModeMatch.matches);
requestAnimationFrame(() => bodyClasses.remove('not-ready'));
systemDarkModeMatch.addEventListener('change', (event) => setDark(event.matches));
</script>
</html> </html>

16
static/scripts/site.js Normal file
View file

@ -0,0 +1,16 @@
function setupDarkMode() {
const bodyClasses = document.body.classList;
const systemDarkModeMatch = window.matchMedia('(prefers-color-scheme: dark)');
const localStorageDarkMode = localStorage.getItem('dark');
const setDark = isDark => {
bodyClasses[isDark ? 'add' : 'remove']('dark');
localStorage.setItem('dark', isDark ? 'yes' : 'no');
};
setDark(localStorageDarkMode ? localStorageDarkMode === 'yes' : systemDarkModeMatch.matches);
requestAnimationFrame(() => bodyClasses.remove('not-ready'));
systemDarkModeMatch.addEventListener('change', (event) => setDark(event.matches));
}
document.addEventListener("load", setupDarkMode);