From 9ea82c5c8247d4dd220e7441be645acc00e8cf29 Mon Sep 17 00:00:00 2001
From: Zhan Shuo <trizsqwq@gmail.com>
Date: Sun, 29 May 2022 18:38:59 +0000
Subject: [PATCH] dynamic change utterances theme with coder theme (#676)
---
assets/js/coder.js | 42 +++++++++++++++++++++
layouts/partials/posts/utterances.html | 28 ++++++++++----
CONTRIBUTORS.md | 1
3 files changed, 63 insertions(+), 8 deletions(-)
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index f1249f5..badb8df 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -108,3 +108,4 @@
- [Xiaoyang Luo](https://github.com/ccviolett/)
- [Michiel Appelman](https://appelman.se)
- [Mark Wood](https://digitalnotions.net)
+- [zzsqwq](https://zzsqwq.cn)
diff --git a/assets/js/coder.js b/assets/js/coder.js
index 6daa1ef..0c12436 100644
--- a/assets/js/coder.js
+++ b/assets/js/coder.js
@@ -34,6 +34,48 @@
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 rememberTheme(theme) {
diff --git a/layouts/partials/posts/utterances.html b/layouts/partials/posts/utterances.html
index c6675de..f929cbd 100644
--- a/layouts/partials/posts/utterances.html
+++ b/layouts/partials/posts/utterances.html
@@ -1,12 +1,24 @@
{{- if isset .Site.Params "utterances" -}}
{{- if and (isset .Site.Params.utterances "repo") (not (eq .Site.Params.utterances.repo "" )) (eq (.Params.disableComments | default false) false) -}}
- <script src="https://utteranc.es/client.js"
- repo= "{{ .Site.Params.utterances.repo }}"
- issue-term="{{ default "title" .Site.Params.utterances.issueTerm }}"
- {{ if isset .Site.Params.utterances "label" }}label="{{ .Site.Params.utterances.label }}"{{ end }}
- theme="{{ default "github-light" .Site.Params.utterances.theme }}"
- crossorigin="anonymous"
- async>
- </script>
+ <div class="comments">
+ <script>
+
+ let getTheme = window.localStorage && window.localStorage.getItem("colorscheme");
+
+ getTheme = getTheme == null ? '{{$.Site.Params.utterances.theme}}' : getTheme;
+
+ let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+ let s = document.createElement('script');
+ s.src = 'https://utteranc.es/client.js';
+ s.setAttribute('repo', '{{ .Site.Params.utterances.repo }}');
+ s.setAttribute('issue-term', '{{ default "title" .Site.Params.utterances.issueTerm }}');
+ s.setAttribute('theme', theme);
+ s.setAttribute('crossorigin', 'anonymous');
+ s.setAttribute('async', '');
+ document.querySelector('div.comments').innerHTML = '';
+ document.querySelector('div.comments').appendChild(s);
+
+ </script>
+ </div>
{{- end -}}
{{- end -}}
--
Gitblit v1.10.0