Skip to content

Commit 9675b1c

Browse files
zenHeartclaude
zenHeart
and
claude
committed
fix(comments): point Giscus theme prop to custom CSS files
Replace built-in 'light'/'dark_dimmed' theme names with the custom /giscus-zen-{light,dark}.css URLs so Giscus iframe styles respect the site's warm paper palette (--paper, --seal, --ink) instead of GitHub's default cold-white/green. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 parent c80b36e commit 9675b1c

3 files changed

Lines changed: 252 additions & 2 deletions

File tree

‎packages/vitepress-theme-zen/theme/components/Comments.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,13 @@ const term = computed(() => {
2525
return last.replace(/^\d{4}-\d{2}-\d{2}-/, '') || last || 'home'
2626
})
2727
28+
// theme prop accepts a URL (custom CSS) or built-in theme name.
29+
// Custom CSS files live in docs/public — served at root as /giscus-zen-{light,dark}.css.
2830
const giscusTheme = computed(() => {
29-
const t = config.value?.theme || {}
30-
return isDark.value ? (t.dark || 'dark_dimmed') : (t.light || 'light')
31+
if (isDark.value) {
32+
return 'https://blog.zenheart.site/giscus-zen-dark.css'
33+
}
34+
return 'https://blog.zenheart.site/giscus-zen-light.css'
3135
})
3236
</script>
3337

‎packages/zen-sites/docs/public/giscus-zen-dark.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
/* Giscus custom theme — zen / warm-paper dark
2+
* 站点暗模式（深蓝灰 paper + 偏暖红 seal）适配。
3+
*/
4+
main {
5+
--color-prettylights-syntax-comment: #7a7570;
6+
--color-prettylights-syntax-constant: #e0a392;
7+
--color-prettylights-syntax-entity: #c4a8e0;
8+
--color-prettylights-syntax-storage-modifier-import: #ece8e0;
9+
--color-prettylights-syntax-entity-tag: #a8d0a0;
10+
--color-prettylights-syntax-keyword: #e0735c;
11+
--color-prettylights-syntax-string: #a8d0a0;
12+
--color-prettylights-syntax-variable: #e0b878;
13+
--color-prettylights-syntax-brackethighlighter-unmatched: #82858a;
14+
--color-prettylights-syntax-invalid-illegal-text: #ece8e0;
15+
--color-prettylights-syntax-invalid-illegal-bg: #6f2a22;
16+
--color-prettylights-syntax-carriage-return-text: #ece8e0;
17+
--color-prettylights-syntax-carriage-return-bg: #6f2a22;
18+
--color-prettylights-syntax-string-regexp: #a8d0a0;
19+
--color-prettylights-syntax-markup-list: #e0c082;
20+
--color-prettylights-syntax-markup-heading: #ece8e0;
21+
--color-prettylights-syntax-markup-italic: #ece8e0;
22+
--color-prettylights-syntax-markup-bold: #ece8e0;
23+
--color-prettylights-syntax-markup-deleted-text: #f5b8ad;
24+
--color-prettylights-syntax-markup-deleted-bg: #4a1f18;
25+
--color-prettylights-syntax-markup-inserted-text: #c4e0b8;
26+
--color-prettylights-syntax-markup-inserted-bg: #1f3a1f;
27+
--color-prettylights-syntax-markup-changed-text: #f0d8a0;
28+
--color-prettylights-syntax-markup-changed-bg: #4a3a1a;
29+
--color-prettylights-syntax-markup-ignored-text: #b8babe;
30+
--color-prettylights-syntax-markup-ignored-bg: #292c33;
31+
--color-prettylights-syntax-meta-diff-range: #c4a8e0;
32+
--color-prettylights-syntax-brackethighlighter-angle: #82858a;
33+
--color-prettylights-syntax-sublimelinter-gutter-mark: #4a4d54;
34+
--color-prettylights-syntax-constant-other-reference-link: #88b8e0;
35+
36+
--color-btn-text: #ece8e0;
37+
--color-btn-bg: #292c33;
38+
--color-btn-border: #3f424a;
39+
--color-btn-shadow: 0 0 transparent;
40+
--color-btn-inset-shadow: 0 0 transparent;
41+
--color-btn-hover-bg: #34373e;
42+
--color-btn-hover-border: #4a4d54;
43+
--color-btn-active-bg: #3f424a;
44+
--color-btn-active-border: #5a5d64;
45+
--color-btn-selected-bg: #34373e;
46+
47+
/* primary button — site seal red (lighter for dark bg) */
48+
--color-btn-primary-text: #1f2229;
49+
--color-btn-primary-bg: #e0735c;
50+
--color-btn-primary-border: rgba(255, 255, 255, 0.05);
51+
--color-btn-primary-shadow: 0 0 transparent;
52+
--color-btn-primary-inset-shadow: 0 0 transparent;
53+
--color-btn-primary-hover-bg: #e88670;
54+
--color-btn-primary-hover-border: rgba(255, 255, 255, 0.08);
55+
--color-btn-primary-selected-bg: #c4624e;
56+
--color-btn-primary-selected-shadow: 0 0 transparent;
57+
--color-btn-primary-disabled-text: rgba(31, 34, 41, 0.5);
58+
--color-btn-primary-disabled-bg: rgba(224, 115, 92, 0.5);
59+
--color-btn-primary-disabled-border: rgba(255, 255, 255, 0.04);
60+
--color-btn-primary-icon: #1f2229;
61+
--color-btn-primary-counter-bg: rgba(31, 34, 41, 0.2);
62+
63+
--color-action-list-item-default-hover-bg: #34373e;
64+
65+
--color-segmented-control-bg: #292c33;
66+
--color-segmented-control-button-bg-selected: #1f2229;
67+
--color-segmented-control-button-selected-border: #4a4d54;
68+
69+
--color-fg-default: #ece8e0;
70+
--color-fg-muted: #c4bfb6;
71+
--color-fg-subtle: #82858a;
72+
--color-fg-on-emphasis: #1f2229;
73+
74+
--color-canvas-default: #1f2229;
75+
--color-canvas-overlay: #292c33;
76+
--color-canvas-inset: #1a1d24;
77+
--color-canvas-subtle: #292c33;
78+
79+
--color-border-default: #3f424a;
80+
--color-border-muted: #34373e;
81+
82+
--color-neutral-muted: rgba(140, 140, 140, 0.2);
83+
--color-neutral-emphasis: #82858a;
84+
--color-neutral-emphasis-plus: #ece8e0;
85+
86+
--color-accent-fg: #e0735c;
87+
--color-accent-emphasis: #c4624e;
88+
--color-accent-muted: rgba(224, 115, 92, 0.4);
89+
--color-accent-subtle: rgba(224, 115, 92, 0.15);
90+
91+
--color-success-fg: #a8d0a0;
92+
--color-success-emphasis: #4a6f3a;
93+
--color-attention-fg: #e0c082;
94+
--color-attention-muted: rgba(224, 192, 130, 0.4);
95+
--color-attention-subtle: rgba(224, 192, 130, 0.15);
96+
--color-danger-fg: #f5a597;
97+
--color-danger-muted: rgba(224, 115, 92, 0.4);
98+
--color-danger-subtle: rgba(224, 115, 92, 0.15);
99+
100+
--color-primer-shadow-inset: 0 0 transparent;
101+
--color-scale-gray-1: #292c33;
102+
}
103+
104+
main .pagination-loader-container {
105+
background-image: url('https://github.com/images/modules/pulls/progressive-disclosure-line.svg');
106+
filter: hue-rotate(330deg) saturate(0.4) brightness(0.7);
107+
}
108+
109+
main .gsc-loading-image {
110+
background-image: url('https://github.githubassets.com/images/mona-loading-dimmed.gif');
111+
}
112+
113+
main .gsc-reactions-count { display: none; }
114+
115+
main .markdown a { color: #e0735c; }
116+
main .markdown a:hover { color: #e88670; text-decoration: underline; }
117+
118+
main .gsc-comments > .gsc-header {
119+
border-bottom: 1px solid #34373e;
120+
}

‎packages/zen-sites/docs/public/giscus-zen-light.css‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/* Giscus custom theme — zen / warm-paper light
2+
* 站点暖米调（paper + clay seal）适配，覆盖 Giscus 默认 light 主题中冷白与绿色按钮。
3+
* 参考：https://github.com/giscus/giscus/tree/main/styles/themes
4+
*/
5+
main {
6+
--color-prettylights-syntax-comment: #8a8377;
7+
--color-prettylights-syntax-constant: #8a4a3a;
8+
--color-prettylights-syntax-entity: #6f4f8a;
9+
--color-prettylights-syntax-storage-modifier-import: #2a2d33;
10+
--color-prettylights-syntax-entity-tag: #4a6f3a;
11+
--color-prettylights-syntax-keyword: #b04a3a;
12+
--color-prettylights-syntax-string: #4a6f3a;
13+
--color-prettylights-syntax-variable: #b07a3a;
14+
--color-prettylights-syntax-brackethighlighter-unmatched: #82858a;
15+
--color-prettylights-syntax-invalid-illegal-text: #f8f4ee;
16+
--color-prettylights-syntax-invalid-illegal-bg: #b04a3a;
17+
--color-prettylights-syntax-carriage-return-text: #f8f4ee;
18+
--color-prettylights-syntax-carriage-return-bg: #b04a3a;
19+
--color-prettylights-syntax-string-regexp: #4a6f3a;
20+
--color-prettylights-syntax-markup-list: #6e5a2a;
21+
--color-prettylights-syntax-markup-heading: #2a2d33;
22+
--color-prettylights-syntax-markup-italic: #2a2d33;
23+
--color-prettylights-syntax-markup-bold: #2a2d33;
24+
--color-prettylights-syntax-markup-deleted-text: #6f2a22;
25+
--color-prettylights-syntax-markup-deleted-bg: #f5d6cf;
26+
--color-prettylights-syntax-markup-inserted-text: #2a4a2a;
27+
--color-prettylights-syntax-markup-inserted-bg: #d6e8cf;
28+
--color-prettylights-syntax-markup-changed-text: #6e4f1a;
29+
--color-prettylights-syntax-markup-changed-bg: #f5e8c7;
30+
--color-prettylights-syntax-markup-ignored-text: #f1ede5;
31+
--color-prettylights-syntax-markup-ignored-bg: #4a4d54;
32+
--color-prettylights-syntax-meta-diff-range: #6f4f8a;
33+
--color-prettylights-syntax-brackethighlighter-angle: #82858a;
34+
--color-prettylights-syntax-sublimelinter-gutter-mark: #b8babe;
35+
--color-prettylights-syntax-constant-other-reference-link: #4a6f8a;
36+
37+
--color-btn-text: #292c33;
38+
--color-btn-bg: #f1ede5;
39+
--color-btn-border: #d8d2c4;
40+
--color-btn-shadow: 0 1px 0 rgba(41, 44, 51, 0.04);
41+
--color-btn-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
42+
--color-btn-hover-bg: #ede8de;
43+
--color-btn-hover-border: #c4bda9;
44+
--color-btn-active-bg: hsla(40, 18%, 78%, 0.7);
45+
--color-btn-active-border: #b8b09a;
46+
--color-btn-selected-bg: #e8e2d8;
47+
48+
/* primary button — site seal red instead of GitHub green */
49+
--color-btn-primary-text: #fbf7f0;
50+
--color-btn-primary-bg: #b04a3a;
51+
--color-btn-primary-border: #9a3f31;
52+
--color-btn-primary-shadow: 0 1px 0 rgba(41, 44, 51, 0.1);
53+
--color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
54+
--color-btn-primary-hover-bg: #9a3f31;
55+
--color-btn-primary-hover-border: #87362a;
56+
--color-btn-primary-selected-bg: #87362a;
57+
--color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
58+
--color-btn-primary-disabled-text: rgba(251, 247, 240, 0.7);
59+
--color-btn-primary-disabled-bg: #d4a399;
60+
--color-btn-primary-disabled-border: rgba(176, 74, 58, 0.4);
61+
--color-btn-primary-icon: #fbf7f0;
62+
--color-btn-primary-counter-bg: rgba(255, 255, 255, 0.2);
63+
64+
--color-action-list-item-default-hover-bg: #ede8de;
65+
66+
/* tabs (input / preview) */
67+
--color-segmented-control-bg: #ede8de;
68+
--color-segmented-control-button-bg-selected: #f8f4ee;
69+
--color-segmented-control-button-selected-border: #d8d2c4;
70+
71+
--color-fg-default: #292c33;
72+
--color-fg-muted: #4f5258;
73+
--color-fg-subtle: #82858a;
74+
--color-fg-on-emphasis: #fbf7f0;
75+
76+
--color-canvas-default: #f8f4ee; /* main bg = paper */
77+
--color-canvas-overlay: #fbf7f0;
78+
--color-canvas-inset: #ede8de; /* input bg */
79+
--color-canvas-subtle: #f1ede5; /* tab bg, hover */
80+
81+
--color-border-default: #d8d2c4;
82+
--color-border-muted: #e2dccf;
83+
84+
--color-neutral-muted: rgba(176, 165, 140, 0.2);
85+
--color-neutral-emphasis: #82858a;
86+
--color-neutral-emphasis-plus: #292c33;
87+
88+
--color-accent-fg: #b04a3a; /* links use seal */
89+
--color-accent-emphasis: #b04a3a;
90+
--color-accent-muted: rgba(176, 74, 58, 0.4);
91+
--color-accent-subtle: rgba(176, 74, 58, 0.12);
92+
93+
--color-success-fg: #4a6f3a;
94+
--color-success-emphasis: #4a6f3a;
95+
--color-attention-fg: #8a6a1a;
96+
--color-attention-muted: rgba(178, 134, 41, 0.4);
97+
--color-attention-subtle: rgba(245, 232, 199, 0.6);
98+
--color-danger-fg: #8a3422;
99+
--color-danger-muted: rgba(176, 74, 58, 0.4);
100+
--color-danger-subtle: #f5d6cf;
101+
102+
--color-primer-shadow-inset: 0 1px 0 rgba(41, 44, 51, 0.04);
103+
--color-scale-gray-1: #ede8de;
104+
}
105+
106+
main .pagination-loader-container {
107+
background-image: url('https://github.com/images/modules/pulls/progressive-disclosure-line.svg');
108+
filter: hue-rotate(330deg) saturate(0.5);
109+
}
110+
111+
main .gsc-loading-image {
112+
background-image: url('https://github.githubassets.com/images/mona-loading-default.gif');
113+
}
114+
115+
main .gsc-reactions-count {
116+
display: none;
117+
}
118+
119+
/* tame the cold blue link hue inside markdown */
120+
main .markdown a { color: #b04a3a; }
121+
main .markdown a:hover { color: #9a3f31; text-decoration: underline; }
122+
123+
/* the giscus footer "powered by giscus" — italic + faint */
124+
main .gsc-comments > .gsc-header {
125+
border-bottom: 1px solid #e2dccf;
126+
}

0 commit comments

Comments
 (0)