fix(utterances): set color scheme on load (#138)

* fix(utterances): set color scheme on load

Remove utterances.theme option from config.yaml

* fix(utterances): restore async tag
This commit is contained in:
Jimmy Cai 2021-02-11 18:46:23 +01:00 committed by GitHub
parent 70cc14fcbe
commit a8718592df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 6 deletions

View File

@ -50,7 +50,6 @@ params:
repo: repo:
issueTerm: pathname issueTerm: pathname
label: label:
theme: preferred-color-scheme
widgets: widgets:
enabled: enabled:

View File

@ -1,12 +1,12 @@
<script src="https://utteranc.es/client.js" <script src="https://utteranc.es/client.js"
repo="{{ .Site.Params.comments.utterances.repo }}" repo="{{ .Site.Params.comments.utterances.repo }}"
issue-term="{{ .Site.Params.comments.utterances.issueTerm }}" issue-term="{{ .Site.Params.comments.utterances.issueTerm }}"
theme="{{ .Site.Params.comments.utterances.theme }}"
{{ with .Site.Params.comments.utterances.label }} {{ with .Site.Params.comments.utterances.label }}
label="{{ . }}" label="{{ . }}"
{{ end }} {{ end }}
crossorigin="anonymous" crossorigin="anonymous"
async> async
>
</script> </script>
<style> <style>
@ -16,16 +16,25 @@
</style> </style>
<script> <script>
window.addEventListener('onColorSchemeChange', (e) => { function setUtterancesTheme(theme) {
let utterances = document.querySelector('.utterances iframe'); let utterances = document.querySelector('.utterances iframe');
if (utterances) { if (utterances) {
utterances.contentWindow.postMessage( utterances.contentWindow.postMessage(
{ {
type: 'set-theme', type: 'set-theme',
theme: `github-${e.detail}` theme: `github-${theme}`
}, },
'https://utteranc.es' 'https://utteranc.es'
); );
} }
}
addEventListener('message', event => {
if (event.origin !== 'https://utteranc.es') return;
setUtterancesTheme(document.body.dataset.scheme)
});
window.addEventListener('onColorSchemeChange', (e) => {
setUtterancesTheme(e.detail)
}) })
</script> </script>