Update giscus themes (#1879)

* Update giscus themes

* Adjust giscus dark button
This commit is contained in:
Yudong Jin
2026-04-01 01:23:44 +08:00
committed by GitHub
parent dcd4db3f54
commit edd13d4c86
3 changed files with 110 additions and 15 deletions

View File

@@ -43,28 +43,35 @@
<script>
var giscus = document.querySelector("script[src*=giscus]")
/* Set palette on initial load */
var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate" ? "noborder_dark" : "light"
giscus.setAttribute("data-theme", theme)
function getGiscusThemeHref() {
var palette = __md_get("__palette")
var isDark = palette && typeof palette.color === "object" && palette.color.scheme === "slate"
var extraStylesheet = document.querySelector("link[href*='stylesheets/extra.css']")
if (!extraStylesheet) {
return isDark ? "noborder_dark" : "light"
}
var filename = isDark ? "giscus-dark.css" : "giscus-light.css"
return new URL(filename, extraStylesheet.href).href
}
/* Set palette on initial load */
giscus.setAttribute("data-theme", getGiscusThemeHref())
/* Register event handlers after documented loaded */
document.addEventListener("DOMContentLoaded", function() {
var ref = document.querySelector("[data-md-component=palette]")
if (!ref) return
ref.addEventListener("change", function() {
var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate" ? "noborder_dark" : "light"
var theme = getGiscusThemeHref()
/* Instruct Giscus to change theme */
var frame = document.querySelector(".giscus-frame")
frame.contentWindow.postMessage(
{ giscus: { setConfig: { theme } } },
"https://giscus.app"
)
}
/* Instruct Giscus to change theme */
var frame = document.querySelector(".giscus-frame")
if (!frame) return
frame.contentWindow.postMessage(
{ giscus: { setConfig: { theme } } },
"https://giscus.app"
)
})
})
</script>

View File

@@ -0,0 +1,30 @@
@import url("https://giscus.app/themes/noborder_dark.css");
.gsc-comment-box-buttons .btn-primary {
border-radius: 999px !important;
}
/* Limit long giscus comments so they don't dominate the page. */
.gsc-comment-content,
.gsc-reply-content {
max-height: 32rem;
overflow-y: auto;
overscroll-behavior: contain;
padding-inline-end: 0.5rem;
}
.gsc-comment-content::-webkit-scrollbar,
.gsc-reply-content::-webkit-scrollbar {
width: 0.35rem;
}
.gsc-comment-content::-webkit-scrollbar-thumb,
.gsc-reply-content::-webkit-scrollbar-thumb {
background: rgba(230, 237, 243, 0.24);
border-radius: 999px;
}
.gsc-comment-content::-webkit-scrollbar-track,
.gsc-reply-content::-webkit-scrollbar-track {
background: transparent;
}

View File

@@ -0,0 +1,58 @@
@import url("https://giscus.app/themes/light.css");
main {
--color-border-default: rgba(29, 29, 32, 0.08);
--color-border-muted: rgba(29, 29, 32, 0.05);
--color-accent-fg: #349890;
--color-btn-primary-text: #ffffff;
--color-btn-primary-bg: #52bbb1;
--color-btn-primary-hover-bg: #7acfc7;
--color-btn-primary-border: rgba(52, 152, 144, 0.2);
--color-btn-primary-hover-border: rgba(52, 152, 144, 0.24);
}
.border,
.color-border-primary {
border-color: rgba(29, 29, 32, 0.07) !important;
}
.gsc-comment-box-buttons .btn-primary {
border-radius: 999px !important;
border-color: transparent !important;
background-color: #52bbb1 !important;
color: #ffffff !important;
box-shadow: none !important;
}
.gsc-comment-box-buttons .btn-primary:hover:not(:disabled) {
background-color: #7acfc7 !important;
}
.gsc-comment-box-buttons .btn-primary:disabled {
opacity: 0.62;
}
/* Limit long giscus comments so they don't dominate the page. */
.gsc-comment-content,
.gsc-reply-content {
max-height: 32rem;
overflow-y: auto;
overscroll-behavior: contain;
padding-inline-end: 0.5rem;
}
.gsc-comment-content::-webkit-scrollbar,
.gsc-reply-content::-webkit-scrollbar {
width: 0.35rem;
}
.gsc-comment-content::-webkit-scrollbar-thumb,
.gsc-reply-content::-webkit-scrollbar-thumb {
background: rgba(31, 35, 40, 0.22);
border-radius: 999px;
}
.gsc-comment-content::-webkit-scrollbar-track,
.gsc-reply-content::-webkit-scrollbar-track {
background: transparent;
}