Updated Giscus example to support theme change without reload

This commit is contained in:
squidfunk 2022-01-23 12:33:35 +01:00
parent 6816aa8cd0
commit e6bcb8100f
3 changed files with 23 additions and 3 deletions

View File

@ -74,7 +74,17 @@ calling the `super()` function at the beginning of the block:
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
var ref = document.querySelector("[data-md-component=palette]") var ref = document.querySelector("[data-md-component=palette]")
ref.addEventListener("change", function() { ref.addEventListener("change", function() {
location.reload() var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate" ? "dark" : "light"
/* Instruct Giscus to change theme */
var frame = document.querySelector(".giscus-frame")
frame.contentWindow.postMessage(
{ giscus: { setConfig: { theme } } },
"https://giscus.app"
)
}
}) })
}) })
</script> </script>

View File

@ -6,5 +6,5 @@
{{ super() }} {{ super() }}
<h2 id="__comments">{{ lang.t("meta.comments") }}</h2> <h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
<script src="https://giscus.app/client.js" data-repo="squidfunk/mkdocs-material" data-repo-id="MDEwOlJlcG9zaXRvcnk1MDYxNzQyOA==" data-category="_" data-category-id="DIC_kwDOAwRcVM4CAtJY" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="1" data-theme="light" data-lang="en" crossorigin="anonymous" async></script> <script src="https://giscus.app/client.js" data-repo="squidfunk/mkdocs-material" data-repo-id="MDEwOlJlcG9zaXRvcnk1MDYxNzQyOA==" data-category="_" data-category-id="DIC_kwDOAwRcVM4CAtJY" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="1" data-theme="light" data-lang="en" crossorigin="anonymous" async></script>
<script>var giscus,palette=__md_get("__palette");palette&&"object"==typeof palette.color&&"slate"===palette.color.scheme&&(giscus=document.querySelector("script[src*=giscus]")).setAttribute("data-theme","dark"),document.addEventListener("DOMContentLoaded",function(){document.querySelector("[data-md-component=palette]").addEventListener("change",function(){location.reload()})})</script> <script>var giscus,palette=__md_get("__palette");palette&&"object"==typeof palette.color&&"slate"===palette.color.scheme&&(giscus=document.querySelector("script[src*=giscus]")).setAttribute("data-theme","dark"),document.addEventListener("DOMContentLoaded",function(){document.querySelector("[data-md-component=palette]").addEventListener("change",function(){var e=__md_get("__palette");e&&"object"==typeof e.color&&(e="slate"===e.color.scheme?"dark":"light",document.querySelector(".giscus-frame").contentWindow.postMessage({giscus:{setConfig:{theme:e}}},"https://giscus.app"))})})</script>
{% endblock %} {% endblock %}

View File

@ -57,7 +57,17 @@
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
var ref = document.querySelector("[data-md-component=palette]") var ref = document.querySelector("[data-md-component=palette]")
ref.addEventListener("change", function() { ref.addEventListener("change", function() {
location.reload() var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate" ? "dark" : "light"
/* Instruct Giscus to change theme */
var frame = document.querySelector(".giscus-frame")
frame.contentWindow.postMessage(
{ giscus: { setConfig: { theme } } },
"https://giscus.app"
)
}
}) })
}) })
</script> </script>