98 lines
3.1 KiB
JavaScript
98 lines
3.1 KiB
JavaScript
const body = document.body;
|
|
const darkModeToggle = document.getElementById('dark-mode-toggle');
|
|
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
|
|
// Check if user preference is set, if not check value of body class for light or dark else it means that colorscheme = auto
|
|
if (localStorage.getItem("colorscheme")) {
|
|
setTheme(localStorage.getItem("colorscheme"));
|
|
} else if (body.classList.contains('colorscheme-light') || body.classList.contains('colorscheme-dark')) {
|
|
setTheme(body.classList.contains("colorscheme-dark") ? "dark" : "light");
|
|
} else {
|
|
setTheme(darkModeMediaQuery.matches ? "dark" : "light");
|
|
}
|
|
|
|
if (darkModeToggle) {
|
|
darkModeToggle.addEventListener('click', () => {
|
|
let theme = body.classList.contains("colorscheme-dark") ? "light" : "dark";
|
|
setTheme(theme);
|
|
rememberTheme(theme);
|
|
});
|
|
}
|
|
|
|
darkModeMediaQuery.addListener((event) => {
|
|
setTheme(event.matches ? "dark" : "light");
|
|
});
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
let node = document.querySelector('.preload-transitions');
|
|
node.classList.remove('preload-transitions');
|
|
});
|
|
|
|
function setTheme(theme) {
|
|
body.classList.remove('colorscheme-auto');
|
|
let inverse = theme === 'dark' ? 'light' : 'dark';
|
|
body.classList.remove('colorscheme-' + inverse);
|
|
body.classList.add('colorscheme-' + theme);
|
|
document.documentElement.style['color-scheme'] = theme;
|
|
|
|
function waitForElm(selector) {
|
|
return new Promise(resolve => {
|
|
if (document.querySelector(selector)) {
|
|
return resolve(document.querySelector(selector));
|
|
}
|
|
|
|
const observer = new MutationObserver(mutations => {
|
|
if (document.querySelector(selector)) {
|
|
resolve(document.querySelector(selector));
|
|
observer.disconnect();
|
|
}
|
|
});
|
|
|
|
observer.observe(document.body, {
|
|
childList: true,
|
|
subtree: true
|
|
});
|
|
});
|
|
}
|
|
|
|
if (theme === 'dark') {
|
|
const message = {
|
|
type: 'set-theme',
|
|
theme: 'github-dark'
|
|
};
|
|
waitForElm('.utterances-frame').then((iframe) => {
|
|
iframe.contentWindow.postMessage(message, 'https://utteranc.es');
|
|
})
|
|
|
|
}
|
|
else {
|
|
const message = {
|
|
type: 'set-theme',
|
|
theme: 'github-light'
|
|
};
|
|
waitForElm('.utterances-frame').then((iframe) => {
|
|
iframe.contentWindow.postMessage(message, 'https://utteranc.es');
|
|
})
|
|
|
|
}
|
|
|
|
function sendMessage(message) {
|
|
const iframe = document.querySelector('iframe.giscus-frame');
|
|
if (!iframe) return;
|
|
iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
|
|
}
|
|
sendMessage({
|
|
setConfig: {
|
|
theme: theme,
|
|
},
|
|
});
|
|
|
|
// Create and send event
|
|
const event = new Event('themeChanged');
|
|
document.dispatchEvent(event);
|
|
}
|
|
|
|
function rememberTheme(theme) {
|
|
localStorage.setItem('colorscheme', theme);
|
|
}
|