add: support theme switch for giscus

This commit is contained in:
Junyi Hou 2024-03-18 16:58:43 +08:00
parent 3cd15e9a35
commit 74015da3e5
2 changed files with 56 additions and 3 deletions

View file

@ -18,7 +18,7 @@
<script>
const STORAGE_KEY = 'user-color-scheme'
const defaultTheme = {{ $colorTheme }}
const defaultTheme = "{{ $colorTheme }}"
let currentTheme
let switchButton
@ -44,7 +44,7 @@
switchButton.addEventListener('click', switchTheme, false)
}
showContent()
showContent();
})
function detectCurrentScheme() {
@ -61,11 +61,28 @@
currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme);
document.documentElement.setAttribute('data-theme', currentTheme);
changeGiscusTheme();
}
function showContent() {
document.body.style.visibility = 'visible';
document.body.style.opacity = 1;
}
function changeGiscusTheme () {
const theme = detectCurrentScheme();
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
}
});
}
</script>
{{ end }}