From c5b8cd38ba91e6d5ad3ef712055f67b122bef16f Mon Sep 17 00:00:00 2001 From: radishzzz Date: Fri, 30 May 2025 17:13:00 +0100 Subject: [PATCH] test: add automatic switching between light and dark themes for giscus --- astro.config.ts | 5 ++ public/vendors/giscus/theme-dark.css | 6 ++ public/vendors/giscus/theme-light.css | 6 ++ public/vendors/giscus/theme.css | 99 --------------------------- src/components/Comments/Giscus.astro | 34 ++++++++- src/config.ts | 2 +- 6 files changed, 50 insertions(+), 102 deletions(-) create mode 100644 public/vendors/giscus/theme-dark.css create mode 100644 public/vendors/giscus/theme-light.css delete mode 100644 public/vendors/giscus/theme.css diff --git a/astro.config.ts b/astro.config.ts index f0c2b9a..fd52701 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -146,4 +146,9 @@ export default defineConfig({ devToolbar: { enabled: false, }, + server: { + headers: { + 'Access-Control-Allow-Origin': 'https://giscus.app', + }, + }, }) diff --git a/public/vendors/giscus/theme-dark.css b/public/vendors/giscus/theme-dark.css new file mode 100644 index 0000000..11efacd --- /dev/null +++ b/public/vendors/giscus/theme-dark.css @@ -0,0 +1,6 @@ +/*! MIT License + * Copyright (c) 2018 GitHub Inc. + * https://github.com/primer/primitives/blob/main/LICENSE + */main{--color-prettylights-syntax-comment:#8b949e;--color-prettylights-syntax-constant:#79c0ff;--color-prettylights-syntax-entity:#d2a8ff;--color-prettylights-syntax-storage-modifier-import:#c9d1d9;--color-prettylights-syntax-entity-tag:#7ee787;--color-prettylights-syntax-keyword:#ff7b72;--color-prettylights-syntax-string:#a5d6ff;--color-prettylights-syntax-variable:#ffa657;--color-prettylights-syntax-brackethighlighter-unmatched:#f85149;--color-prettylights-syntax-invalid-illegal-text:#f0f6fc;--color-prettylights-syntax-invalid-illegal-bg:#8e1519;--color-prettylights-syntax-carriage-return-text:#f0f6fc;--color-prettylights-syntax-carriage-return-bg:#b62324;--color-prettylights-syntax-string-regexp:#7ee787;--color-prettylights-syntax-markup-list:#f2cc60;--color-prettylights-syntax-markup-heading:#1f6feb;--color-prettylights-syntax-markup-italic:#c9d1d9;--color-prettylights-syntax-markup-bold:#c9d1d9;--color-prettylights-syntax-markup-deleted-text:#ffdcd7;--color-prettylights-syntax-markup-deleted-bg:#67060c;--color-prettylights-syntax-markup-inserted-text:#aff5b4;--color-prettylights-syntax-markup-inserted-bg:#033a16;--color-prettylights-syntax-markup-changed-text:#ffdfb6;--color-prettylights-syntax-markup-changed-bg:#5a1e02;--color-prettylights-syntax-markup-ignored-text:#c9d1d9;--color-prettylights-syntax-markup-ignored-bg:#1158c7;--color-prettylights-syntax-meta-diff-range:#d2a8ff;--color-prettylights-syntax-brackethighlighter-angle:#8b949e;--color-prettylights-syntax-sublimelinter-gutter-mark:#484f58;--color-prettylights-syntax-constant-other-reference-link:#a5d6ff;--color-btn-text:#c9d1d9;--color-btn-bg:#21262d;--color-btn-border:#f0f6fc1a;--color-btn-shadow:0 0 #0000;--color-btn-inset-shadow:0 0 #0000;--color-btn-hover-bg:#30363d;--color-btn-hover-border:#8b949e;--color-btn-active-bg:#282e33;--color-btn-active-border:#6e7681;--color-btn-selected-bg:#161b22;--color-btn-primary-text:#fff;--color-btn-primary-bg:#238636;--color-btn-primary-border:#f0f6fc1a;--color-btn-primary-shadow:0 0 #0000;--color-btn-primary-inset-shadow:0 0 #0000;--color-btn-primary-hover-bg:#2ea043;--color-btn-primary-hover-border:#f0f6fc1a;--color-btn-primary-selected-bg:#238636;--color-btn-primary-selected-shadow:0 0 #0000;--color-btn-primary-disabled-text:#ffffff80;--color-btn-primary-disabled-bg:#23863699;--color-btn-primary-disabled-border:#f0f6fc1a;--color-action-list-item-default-hover-bg:#b1bac41f;--color-segmented-control-bg:#6e76811a;--color-segmented-control-button-bg:#0d1117;--color-segmented-control-button-selected-border:#6e7681;--color-fg-default:#e6edf3;--color-fg-muted:#7d8590;--color-fg-subtle:#6e7681;--color-canvas-default:#0d1117;--color-canvas-overlay:#161b22;--color-canvas-inset:#010409;--color-canvas-subtle:#161b22;--color-border-default:#30363d;--color-border-muted:#21262d;--color-neutral-muted:#6e768166;--color-accent-fg:#2f81f7;--color-accent-emphasis:#1f6feb;--color-accent-muted:#388bfd66;--color-accent-subtle:#388bfd1a;--color-success-fg:#3fb950;--color-attention-fg:#d29922;--color-attention-muted:#bb800966;--color-attention-subtle:#bb800926;--color-danger-fg:#f85149;--color-danger-muted:#f8514966;--color-danger-subtle:#f851491a;--color-primer-shadow-inset:0 0 #0000;--color-scale-gray-7:#21262d;--color-scale-blue-8:#0c2d6b; + + /*! Extensions from @primer/css/alerts/flash.scss */--color-social-reaction-bg-hover:var(--color-scale-gray-7);--color-social-reaction-bg-reacted-hover:var(--color-scale-blue-8)}main .pagination-loader-container{background-image:url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg)}main .gsc-loading-image{background-image:url(https://github.githubassets.com/images/mona-loading-dark.gif)} \ No newline at end of file diff --git a/public/vendors/giscus/theme-light.css b/public/vendors/giscus/theme-light.css new file mode 100644 index 0000000..f33c0c9 --- /dev/null +++ b/public/vendors/giscus/theme-light.css @@ -0,0 +1,6 @@ +/*! MIT License + * Copyright (c) 2018 GitHub Inc. + * https://github.com/primer/primitives/blob/main/LICENSE + */main{--color-prettylights-syntax-comment:#6e7781;--color-prettylights-syntax-constant:#0550ae;--color-prettylights-syntax-entity:#8250df;--color-prettylights-syntax-storage-modifier-import:#24292f;--color-prettylights-syntax-entity-tag:#116329;--color-prettylights-syntax-keyword:#cf222e;--color-prettylights-syntax-string:#0a3069;--color-prettylights-syntax-variable:#953800;--color-prettylights-syntax-brackethighlighter-unmatched:#82071e;--color-prettylights-syntax-invalid-illegal-text:#f6f8fa;--color-prettylights-syntax-invalid-illegal-bg:#82071e;--color-prettylights-syntax-carriage-return-text:#f6f8fa;--color-prettylights-syntax-carriage-return-bg:#cf222e;--color-prettylights-syntax-string-regexp:#116329;--color-prettylights-syntax-markup-list:#3b2300;--color-prettylights-syntax-markup-heading:#0550ae;--color-prettylights-syntax-markup-italic:#24292f;--color-prettylights-syntax-markup-bold:#24292f;--color-prettylights-syntax-markup-deleted-text:#82071e;--color-prettylights-syntax-markup-deleted-bg:#ffebe9;--color-prettylights-syntax-markup-inserted-text:#116329;--color-prettylights-syntax-markup-inserted-bg:#dafbe1;--color-prettylights-syntax-markup-changed-text:#953800;--color-prettylights-syntax-markup-changed-bg:#ffd8b5;--color-prettylights-syntax-markup-ignored-text:#eaeef2;--color-prettylights-syntax-markup-ignored-bg:#0550ae;--color-prettylights-syntax-meta-diff-range:#8250df;--color-prettylights-syntax-brackethighlighter-angle:#57606a;--color-prettylights-syntax-sublimelinter-gutter-mark:#8c959f;--color-prettylights-syntax-constant-other-reference-link:#0a3069;--color-btn-text:#24292f;--color-btn-bg:#f6f8fa;--color-btn-border:#1f232826;--color-btn-shadow:0 1px 0 #1f23280a;--color-btn-inset-shadow:inset 0 1px 0 #ffffff40;--color-btn-hover-bg:#f3f4f6;--color-btn-hover-border:#1f232826;--color-btn-active-bg:#ebecf0;--color-btn-active-border:#1f232826;--color-btn-selected-bg:#eeeff2;--color-btn-primary-text:#fff;--color-btn-primary-bg:#1f883d;--color-btn-primary-border:#1f232826;--color-btn-primary-shadow:0 1px 0 #1f23281a;--color-btn-primary-inset-shadow:inset 0 1px 0 #ffffff08;--color-btn-primary-hover-bg:#1a7f37;--color-btn-primary-hover-border:#1f232826;--color-btn-primary-selected-bg:#187733;--color-btn-primary-selected-shadow:inset 0 1px 0 #002d1133;--color-btn-primary-disabled-text:#fffc;--color-btn-primary-disabled-bg:#94d3a2;--color-btn-primary-disabled-border:#1f232826;--color-action-list-item-default-hover-bg:#d0d7de52;--color-segmented-control-bg:#eaeef2;--color-segmented-control-button-bg:#fff;--color-segmented-control-button-selected-border:#8c959f;--color-fg-default:#1f2328;--color-fg-muted:#656d76;--color-fg-subtle:#6e7781;--color-canvas-default:#fff;--color-canvas-overlay:#fff;--color-canvas-inset:#f6f8fa;--color-canvas-subtle:#f6f8fa;--color-border-default:#d0d7de;--color-border-muted:#d8dee4;--color-neutral-muted:#afb8c133;--color-accent-fg:#0969da;--color-accent-emphasis:#0969da;--color-accent-muted:#54aeff66;--color-accent-subtle:#ddf4ff;--color-success-fg:#1a7f37;--color-attention-fg:#9a6700;--color-attention-muted:#d4a72c66;--color-attention-subtle:#fff8c5;--color-danger-fg:#d1242f;--color-danger-muted:#ff818266;--color-danger-subtle:#ffebe9;--color-primer-shadow-inset:inset 0 1px 0 #d0d7de33;--color-scale-gray-1:#eaeef2;--color-scale-blue-1:#b6e3ff; + + /*! Extensions from @primer/css/alerts/flash.scss */--color-social-reaction-bg-hover:var(--color-scale-gray-1);--color-social-reaction-bg-reacted-hover:var(--color-scale-blue-1)}main .pagination-loader-container{background-image:url(https://github.com/images/modules/pulls/progressive-disclosure-line.svg)}main .gsc-loading-image{background-image:url(https://github.githubassets.com/images/mona-loading-default.gif)} \ No newline at end of file diff --git a/public/vendors/giscus/theme.css b/public/vendors/giscus/theme.css deleted file mode 100644 index 7bf1850..0000000 --- a/public/vendors/giscus/theme.css +++ /dev/null @@ -1,99 +0,0 @@ -/*! MIT License - * Copyright (c) 2018 GitHub Inc. - * https://github.com/primer/primitives/blob/main/LICENSE - */ - - main { - --color-prettylights-syntax-comment: #6e7781; - --color-prettylights-syntax-constant: #0550ae; - --color-prettylights-syntax-entity: #8250df; - --color-prettylights-syntax-storage-modifier-import: #24292f; - --color-prettylights-syntax-entity-tag: #116329; - --color-prettylights-syntax-keyword: #cf222e; - --color-prettylights-syntax-string: #0a3069; - --color-prettylights-syntax-variable: #953800; - --color-prettylights-syntax-brackethighlighter-unmatched: #82071e; - --color-prettylights-syntax-invalid-illegal-text: #f6f8fa; - --color-prettylights-syntax-invalid-illegal-bg: #82071e; - --color-prettylights-syntax-carriage-return-text: #f6f8fa; - --color-prettylights-syntax-carriage-return-bg: #cf222e; - --color-prettylights-syntax-string-regexp: #116329; - --color-prettylights-syntax-markup-list: #3b2300; - --color-prettylights-syntax-markup-heading: #0550ae; - --color-prettylights-syntax-markup-italic: #24292f; - --color-prettylights-syntax-markup-bold: #24292f; - --color-prettylights-syntax-markup-deleted-text: #82071e; - --color-prettylights-syntax-markup-deleted-bg: #ffebe9; - --color-prettylights-syntax-markup-inserted-text: #116329; - --color-prettylights-syntax-markup-inserted-bg: #dafbe1; - --color-prettylights-syntax-markup-changed-text: #953800; - --color-prettylights-syntax-markup-changed-bg: #ffd8b5; - --color-prettylights-syntax-markup-ignored-text: #eaeef2; - --color-prettylights-syntax-markup-ignored-bg: #0550ae; - --color-prettylights-syntax-meta-diff-range: #8250df; - --color-prettylights-syntax-brackethighlighter-angle: #57606a; - --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f; - --color-prettylights-syntax-constant-other-reference-link: #0a3069; - --color-btn-text: #24292f; - --color-btn-bg: #f6f8fa; - --color-btn-border: rgb(31 35 40 / 15%); - --color-btn-shadow: 0 1px 0 rgb(31 35 40 / 4%); - --color-btn-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 25%); - --color-btn-hover-bg: #f3f4f6; - --color-btn-hover-border: rgb(31 35 40 / 15%); - --color-btn-active-bg: hsl(220deg 14% 93% / 100%); - --color-btn-active-border: rgb(31 35 40 / 15%); - --color-btn-selected-bg: hsl(220deg 14% 94% / 100%); - --color-btn-primary-text: #fff; - --color-btn-primary-bg: #1f883d; - --color-btn-primary-border: rgb(31 35 40 / 15%); - --color-btn-primary-shadow: 0 1px 0 rgb(31 35 40 / 10%); - --color-btn-primary-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 3%); - --color-btn-primary-hover-bg: #1a7f37; - --color-btn-primary-hover-border: rgb(31 35 40 / 15%); - --color-btn-primary-selected-bg: hsl(137deg 66% 28% / 100%); - --color-btn-primary-selected-shadow: inset 0 1px 0 rgb(0 45 17 / 20%); - --color-btn-primary-disabled-text: rgb(255 255 255 / 80%); - --color-btn-primary-disabled-bg: #94d3a2; - --color-btn-primary-disabled-border: rgb(31 35 40 / 15%); - --color-action-list-item-default-hover-bg: rgb(208 215 222 / 32%); - --color-segmented-control-bg: #eaeef2; - --color-segmented-control-button-bg: #fff; - --color-segmented-control-button-selected-border: #8c959f; - --color-fg-default: #1F2328; - --color-fg-muted: #656d76; - --color-fg-subtle: #6e7781; - --color-canvas-default: #fff; - --color-canvas-overlay: #fff; - --color-canvas-inset: #f6f8fa; - --color-canvas-subtle: #f6f8fa; - --color-border-default: #d0d7de; - --color-border-muted: hsl(210deg 18% 87% / 100%); - --color-neutral-muted: rgb(175 184 193 / 20%); - --color-accent-fg: #0969da; - --color-accent-emphasis: #0969da; - --color-accent-muted: rgb(84 174 255 / 40%); - --color-accent-subtle: #ddf4ff; - --color-success-fg: #1a7f37; - --color-attention-fg: #9a6700; - --color-attention-muted: rgb(212 167 44 / 40%); - --color-attention-subtle: #fff8c5; - --color-danger-fg: #d1242f; - --color-danger-muted: rgb(255 129 130 / 40%); - --color-danger-subtle: #ffebe9; - --color-primer-shadow-inset: inset 0 1px 0 rgb(208 215 222 / 20%); - --color-scale-gray-1: #eaeef2; - --color-scale-blue-1: #b6e3ff; - - /*! Extensions from @primer/css/alerts/flash.scss */ - --color-social-reaction-bg-hover: var(--color-scale-gray-1); - --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1); -} - -main .pagination-loader-container { - background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg"); -} - -main .gsc-loading-image { - background-image: url("https://github.githubassets.com/images/mona-loading-default.gif"); -} \ No newline at end of file diff --git a/src/components/Comments/Giscus.astro b/src/components/Comments/Giscus.astro index b217ff2..a9e5c83 100644 --- a/src/components/Comments/Giscus.astro +++ b/src/components/Comments/Giscus.astro @@ -41,6 +41,13 @@ const shouldRender = Boolean(repo && repoID && categoryID) siteUrl, }} > + function getThemeUrl() { + const isDark = document.documentElement.classList.contains('dark') + return isDark + ? `${siteUrl}/vendors/giscus/theme-dark.css` + : `${siteUrl}/vendors/giscus/theme-light.css` + } + function setupGiscus() { const giscusContainer = document.getElementById('giscus') if (!giscusContainer) @@ -64,13 +71,14 @@ const shouldRender = Boolean(repo && repoID && categoryID) const dataAttributes = { repo, repoId: repoID, + category: undefined, categoryId: categoryID, mapping, strict, reactionsEnabled, emitMetadata, inputPosition, - theme: `${siteUrl}/vendors/giscus/theme.css`, + theme: getThemeUrl(), lang: currentGiscusLang, } @@ -81,10 +89,32 @@ const shouldRender = Boolean(repo && repoID && categoryID) // Apply all attributes Object.assign(script.dataset, dataAttributes) - giscusContainer.appendChild(script) + try { + giscusContainer.appendChild(script) + } + catch (error) { + console.error('Failed to setup Giscus:', error) + } + } + + function updateGiscusTheme() { + const iframe = document.querySelector('.giscus-frame') + if (!iframe || !iframe.contentWindow) + return + + try { + iframe.contentWindow.postMessage( + { giscus: { setConfig: { theme: getThemeUrl() } } }, + 'https://giscus.app', + ) + } + catch (error) { + console.error('Failed to update Giscus theme:', error) + } } setupGiscus() document.addEventListener('astro:page-load', setupGiscus) + document.addEventListener('theme-changed', updateGiscusTheme) )} diff --git a/src/config.ts b/src/config.ts index 2f89a34..5d78869 100644 --- a/src/config.ts +++ b/src/config.ts @@ -96,7 +96,7 @@ export const themeConfig: ThemeConfig = { categoryID: 'DIC_kwDOOy1K084CqwuZ', mapping: 'pathname', strict: '0', - reactionsEnabled: '1', + reactionsEnabled: '0', emitMetadata: '0', inputPosition: 'bottom', },