diff options
author | ache <ache@ache.one> | 2022-09-11 01:54:26 +0200 |
---|---|---|
committer | ache <ache@ache.one> | 2022-09-11 09:06:34 +0200 |
commit | 8c88ef53b980baa1cd4a2e87631aa13fb3c8e3c7 (patch) | |
tree | a827093727b6a3547f06963a84513e96ee8edb8f | |
parent | Add theme switch to tag (diff) |
Set theme on localStorage
-rw-r--r-- | src/js/theme.js | 19 |
1 files changed, 19 insertions, 0 deletions
diff --git a/src/js/theme.js b/src/js/theme.js index 687574e..fd0b755 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -1,5 +1,7 @@ window.addEventListener('DOMContentLoaded', () => { + const storageTheme = window.localStorage?.getItem('theme'); const preferesDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + let isDark = preferesDark; const hid = document.querySelector('#hid'); @@ -8,6 +10,20 @@ window.addEventListener('DOMContentLoaded', () => { const sidenotes = document.querySelector('.sidenotes'); const harr = document.querySelector('#harr'); + if (storageTheme === 'dark' || storageTheme === 'light') { + const theme = storageTheme; + isDark = storageTheme === 'dark'; + hid.classList.add(theme); + html.classList.add(theme); + aside.classList.add(theme); + sidenotes.classList.add(theme); + harr.classList.add(theme); + + for (const article of document.querySelectorAll('article')) { + article.classList.add(theme); + } + } + function toogleTheme() { const arg = isDark ? ['dark', 'light'] : ['light', 'dark']; const theme = arg[1]; @@ -39,6 +55,9 @@ window.addEventListener('DOMContentLoaded', () => { } isDark = !isDark; + if (window.localStorage) { + window.localStorage.setItem('theme', isDark ? 'dark' : 'light'); + } } const sun = document.querySelector('.sun'); |