Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-28 19:43:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(darkmode): listen to browser color preference change

Browse Source 
If no color preference is set by user
This commit is contained in:
Jimmy Cai 2020-09-19 00:43:52 +02:00
parent 0f9682e4b4
commit 7e1c7b94bf
No known key found for this signature in database
GPG Key ID: 3EA408E527F37B18
1 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
assets/ts/darkmode.ts
View File

@ -1,29 +1,57 @@
export default () => {
const toggleDarkMode = document.getElementById('dark-mode-toggle');
const darkModeKey = 'StackDarkMode';
const darkModeItem = localStorage.getItem(darkModeKey);
const darkModeEnabled = localStorage.getItem(darkModeKey) === 'true';
const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
const mql = window.matchMedia('(prefers-color-scheme: dark)');
let darkMode = false;
if (darkModeEnabled) {
if (darkModeItem && darkModeEnabled || !darkModeItem && supportDarkMode) {
/**
* Enable dark mode if:
* 1. If dark mode is set already (in local storage)
* 2. No color scheme preference is set in localstorage, and user's browser indicates preference for dark mode
*/
darkMode = true;
}
else {
darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
}
document.body.style.setProperty('transition', 'background-color .3s ease');
toggleDarkMode.addEventListener('click', (e) => {
darkMode = !darkMode;
const setBodyClass = () => {
if (darkMode) {
document.body.classList.add('theme-dark');
}
else {
document.body.classList.remove('theme-dark');
}
}
const mediaQueryListener = (e) => {
darkMode = e.matches;
setBodyClass();
}
let listening = false;
if (!darkModeItem) {
/**
* If no dark mode preference is set in local storage, listen to browser color preference change
*/
mql.addEventListener('change', mediaQueryListener);
listening = true;
}
document.body.style.setProperty('transition', 'background-color .3s ease');
toggleDarkMode.addEventListener('click', (e) => {
darkMode = !darkMode;
setBodyClass();
localStorage.setItem(darkModeKey, darkMode.toString());
if (listening) {
/**
* Remove listener once user set color preference in website
*/
mql.removeEventListener('change', mediaQueryListener);
}
})
}