The Trans Directory
feat(comments): support custom giscus themes (#1526)
Co-authored-by: Aaron Pham <Aaronpham0103@gmail.com>
Co-authored-by: Aaron Pham <contact@aarnphm.xyz>
authored by
Emile Bangma
Aaron Pham
Aaron Pham
and committed by
GitHub
67e1beea
3aa11357
+265
-2
+33
docs/features/comments.md
+33
docs/features/comments.md
···
63
63
category: string
64
64
categoryId: string
65
65
66
+
// Url to folder with custom themes
67
+
// defaults to 'https://${cfg.baseUrl}/static/giscus'
68
+
themeUrl?: string
69
+
70
+
// filename for light theme .css file
71
+
// defaults to 'light'
72
+
lightTheme?: string
73
+
74
+
// filename for dark theme .css file
75
+
// defaults to 'dark'
76
+
darkTheme?: string
77
+
66
78
// how to map pages -> discussions
67
79
// defaults to 'url'
68
80
mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
···
81
93
}
82
94
}
83
95
```
96
+
97
+
#### Custom CSS theme
98
+
99
+
Quartz supports custom theme for Giscus. To use a custom CSS theme, place the `.css` file inside the `quartz/static` folder and set the configuration values.
100
+
101
+
For example, if you have a light theme `light-theme.css`, a dark theme `dark-theme.css`, and your Quartz site is hosted at `https://example.com/`:
102
+
103
+
```ts
104
+
afterBody: [
105
+
Component.Comments({
106
+
provider: 'giscus',
107
+
options: {
108
+
// Other options
109
+
110
+
themeUrl: "https://example.com/static/giscus", // corresponds to quartz/static/giscus/
111
+
lightTheme: "light-theme", // corresponds to light-theme.css in quartz/static/giscus/
112
+
darkTheme: "dark-theme", // corresponds to dark-theme.css quartz/static/giscus/
113
+
}
114
+
}),
115
+
],
116
+
```
+8
quartz/components/Comments.tsx
+8
quartz/components/Comments.tsx
···
10
10
repoId: string
11
11
category: string
12
12
categoryId: string
13
+
themeUrl?: string
14
+
lightTheme?: string
15
+
darkTheme?: string
13
16
mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
14
17
strict?: boolean
15
18
reactionsEnabled?: boolean
···
34
37
data-strict={boolToStringBool(opts.options.strict ?? true)}
35
38
data-reactions-enabled={boolToStringBool(opts.options.reactionsEnabled ?? true)}
36
39
data-input-position={opts.options.inputPosition ?? "bottom"}
40
+
data-light-theme={opts.options.lightTheme ?? "light"}
41
+
data-dark-theme={opts.options.darkTheme ?? "dark"}
42
+
data-theme-url={
43
+
opts.options.themeUrl ?? `https://${cfg.baseUrl ?? "example.com"}/static/giscus`
44
+
}
37
45
></div>
38
46
)
39
47
}
+26
-2
quartz/components/scripts/comments.inline.ts
+26
-2
quartz/components/scripts/comments.inline.ts
···
13
13
{
14
14
giscus: {
15
15
setConfig: {
16
-
theme: theme,
16
+
theme: getThemeUrl(getThemeName(theme)),
17
17
},
18
18
},
19
19
},
···
21
21
)
22
22
}
23
23
24
+
const getThemeName = (theme: string) => {
25
+
if (theme !== "dark" && theme !== "light") {
26
+
return theme
27
+
}
28
+
const giscusContainer = document.querySelector(".giscus") as GiscusElement
29
+
if (!giscusContainer) {
30
+
return theme
31
+
}
32
+
const darkGiscus = giscusContainer.dataset.darkTheme ?? "dark"
33
+
const lightGiscus = giscusContainer.dataset.lightTheme ?? "light"
34
+
return theme === "dark" ? darkGiscus : lightGiscus
35
+
}
36
+
37
+
const getThemeUrl = (theme: string) => {
38
+
const giscusContainer = document.querySelector(".giscus") as GiscusElement
39
+
if (!giscusContainer) {
40
+
return `https://giscus.app/themes/${theme}.css`
41
+
}
42
+
return `${giscusContainer.dataset.themeUrl ?? "https://giscus.app/themes"}/${theme}.css`
43
+
}
44
+
24
45
type GiscusElement = Omit<HTMLElement, "dataset"> & {
25
46
dataset: DOMStringMap & {
26
47
repo: `${string}/${string}`
27
48
repoId: string
28
49
category: string
29
50
categoryId: string
51
+
themeUrl: string
52
+
lightTheme: string
53
+
darkTheme: string
30
54
mapping: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
31
55
strict: string
32
56
reactionsEnabled: string
···
57
81
58
82
const theme = document.documentElement.getAttribute("saved-theme")
59
83
if (theme) {
60
-
giscusScript.setAttribute("data-theme", theme)
84
+
giscusScript.setAttribute("data-theme", getThemeUrl(getThemeName(theme)))
61
85
}
62
86
63
87
giscusContainer.appendChild(giscusScript)
+99
quartz/static/giscus/dark.css
+99
quartz/static/giscus/dark.css
···
1
+
/*! MIT License
2
+
* Copyright (c) 2018 GitHub Inc.
3
+
* https://github.com/primer/primitives/blob/main/LICENSE
4
+
*/
5
+
6
+
main {
7
+
--color-prettylights-syntax-comment: #8b949e;
8
+
--color-prettylights-syntax-constant: #79c0ff;
9
+
--color-prettylights-syntax-entity: #d2a8ff;
10
+
--color-prettylights-syntax-storage-modifier-import: #c9d1d9;
11
+
--color-prettylights-syntax-entity-tag: #7ee787;
12
+
--color-prettylights-syntax-keyword: #ff7b72;
13
+
--color-prettylights-syntax-string: #a5d6ff;
14
+
--color-prettylights-syntax-variable: #ffa657;
15
+
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
16
+
--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
17
+
--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
18
+
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
19
+
--color-prettylights-syntax-carriage-return-bg: #b62324;
20
+
--color-prettylights-syntax-string-regexp: #7ee787;
21
+
--color-prettylights-syntax-markup-list: #f2cc60;
22
+
--color-prettylights-syntax-markup-heading: #1f6feb;
23
+
--color-prettylights-syntax-markup-italic: #c9d1d9;
24
+
--color-prettylights-syntax-markup-bold: #c9d1d9;
25
+
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
26
+
--color-prettylights-syntax-markup-deleted-bg: #67060c;
27
+
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
28
+
--color-prettylights-syntax-markup-inserted-bg: #033a16;
29
+
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
30
+
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
31
+
--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
32
+
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
33
+
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
34
+
--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
35
+
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
36
+
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
37
+
--color-btn-text: #d4d4d4; /* --darkgray */
38
+
--color-btn-bg: #161618; /* --light */
39
+
--color-btn-border: rgb(240, 246, 252 / 10%); /* --dark */
40
+
--color-btn-shadow: 0 0 transparent;
41
+
--color-btn-inset-shadow: 0 0 transparent;
42
+
--color-btn-hover-bg: #30363d;
43
+
--color-btn-hover-border: #8b949e;
44
+
--color-btn-active-bg: hsl(212deg 12% 18% / 100%);
45
+
--color-btn-active-border: #6e7681;
46
+
--color-btn-selected-bg: #161b22;
47
+
--color-btn-primary-text: #fff;
48
+
--color-btn-primary-bg: #84a59d; /* --tertiary */
49
+
--color-btn-primary-border: rgb(240, 246, 252 / 10%); /* --dark */
50
+
--color-btn-primary-shadow: 0 0 transparent;
51
+
--color-btn-primary-inset-shadow: 0 0 transparent;
52
+
--color-btn-primary-hover-bg: #7b97aa; /* --secondary */
53
+
--color-btn-primary-hover-border: rgb(240, 246, 252 / 10%); /* --dark */
54
+
--color-btn-primary-selected-bg: #7b97aa; /* --secondary */
55
+
--color-btn-primary-selected-shadow: 0 0 transparent;
56
+
--color-btn-primary-disabled-text: rgba(33, 32, 32, 0.5);
57
+
--color-btn-primary-disabled-bg: rgb(35 134 54 / 60%);
58
+
--color-btn-primary-disabled-border: rgb(240 246 252 / 10%);
59
+
--color-action-list-item-default-hover-bg: rgb(177 186 196 / 12%);
60
+
--color-segmented-control-bg: rgb(110 118 129 / 10%);
61
+
--color-segmented-control-button-bg: #0d1117;
62
+
--color-segmented-control-button-selected-border: #6e7681;
63
+
--color-fg-default: #ebebec; /* --dark */
64
+
--color-fg-muted: #d4d4d4; /* --darkgray */
65
+
--color-fg-subtle: #d4d4d4; /* --darkgray */
66
+
--color-canvas-default: #0d1117;
67
+
--color-canvas-overlay: #161b22;
68
+
--color-canvas-inset: #010409;
69
+
--color-canvas-subtle: #161b22;
70
+
--color-border-default: #30363d;
71
+
--color-border-muted: #21262d;
72
+
--color-neutral-muted: rgb(110 118 129 / 40%);
73
+
--color-accent-fg: #2f81f7;
74
+
--color-accent-emphasis: #1f6feb;
75
+
--color-accent-muted: rgb(56 139 253 / 40%);
76
+
--color-accent-subtle: rgb(56 139 253 / 10%);
77
+
--color-success-fg: #3fb950;
78
+
--color-attention-fg: #d29922;
79
+
--color-attention-muted: rgb(187 128 9 / 40%);
80
+
--color-attention-subtle: rgb(187 128 9 / 15%);
81
+
--color-danger-fg: #f85149;
82
+
--color-danger-muted: rgb(248 81 73 / 40%);
83
+
--color-danger-subtle: rgb(248 81 73 / 10%);
84
+
--color-primer-shadow-inset: 0 0 transparent;
85
+
--color-scale-gray-7: #21262d;
86
+
--color-scale-blue-8: #0c2d6b;
87
+
88
+
/*! Extensions from @primer/css/alerts/flash.scss */
89
+
--color-social-reaction-bg-hover: var(--color-scale-gray-7);
90
+
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
91
+
}
92
+
93
+
main .pagination-loader-container {
94
+
background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
95
+
}
96
+
97
+
main .gsc-loading-image {
98
+
background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
99
+
}
+99
quartz/static/giscus/light.css
+99
quartz/static/giscus/light.css
···
1
+
/*! MIT License
2
+
* Copyright (c) 2018 GitHub Inc.
3
+
* https://github.com/primer/primitives/blob/main/LICENSE
4
+
*/
5
+
6
+
main {
7
+
--color-prettylights-syntax-comment: #6e7781;
8
+
--color-prettylights-syntax-constant: #0550ae;
9
+
--color-prettylights-syntax-entity: #8250df;
10
+
--color-prettylights-syntax-storage-modifier-import: #24292f;
11
+
--color-prettylights-syntax-entity-tag: #116329;
12
+
--color-prettylights-syntax-keyword: #cf222e;
13
+
--color-prettylights-syntax-string: #0a3069;
14
+
--color-prettylights-syntax-variable: #953800;
15
+
--color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
16
+
--color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
17
+
--color-prettylights-syntax-invalid-illegal-bg: #82071e;
18
+
--color-prettylights-syntax-carriage-return-text: #f6f8fa;
19
+
--color-prettylights-syntax-carriage-return-bg: #cf222e;
20
+
--color-prettylights-syntax-string-regexp: #116329;
21
+
--color-prettylights-syntax-markup-list: #3b2300;
22
+
--color-prettylights-syntax-markup-heading: #0550ae;
23
+
--color-prettylights-syntax-markup-italic: #24292f;
24
+
--color-prettylights-syntax-markup-bold: #24292f;
25
+
--color-prettylights-syntax-markup-deleted-text: #82071e;
26
+
--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
27
+
--color-prettylights-syntax-markup-inserted-text: #116329;
28
+
--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
29
+
--color-prettylights-syntax-markup-changed-text: #953800;
30
+
--color-prettylights-syntax-markup-changed-bg: #ffd8b5;
31
+
--color-prettylights-syntax-markup-ignored-text: #eaeef2;
32
+
--color-prettylights-syntax-markup-ignored-bg: #0550ae;
33
+
--color-prettylights-syntax-meta-diff-range: #8250df;
34
+
--color-prettylights-syntax-brackethighlighter-angle: #57606a;
35
+
--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
36
+
--color-prettylights-syntax-constant-other-reference-link: #0a3069;
37
+
--color-btn-text: #4e4e4e; /* --darkgray */
38
+
--color-btn-bg: #faf8f8; /* --light */
39
+
--color-btn-border: rgb(43, 43, 43 / 15%); /* --dark */
40
+
--color-btn-shadow: 0 1px 0 rgb(31 35 40 / 4%);
41
+
--color-btn-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 25%);
42
+
--color-btn-hover-bg: #f3f4f6;
43
+
--color-btn-hover-border: rgb(43, 43, 43 / 15%); /* --dark */
44
+
--color-btn-active-bg: hsl(220deg 14% 93% / 100%);
45
+
--color-btn-active-border: rgb(31 35 40 / 15%);
46
+
--color-btn-selected-bg: hsl(220deg 14% 94% / 100%);
47
+
--color-btn-primary-text: #fff;
48
+
--color-btn-primary-bg: #84a59d; /* --tertiary */
49
+
--color-btn-primary-border: rgb(43, 43, 43 / 15%); /* --dark */
50
+
--color-btn-primary-shadow: 0 1px 0 rgb(31 35 40 / 10%);
51
+
--color-btn-primary-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
52
+
--color-btn-primary-hover-bg: #284b63; /* --secondary */
53
+
--color-btn-primary-hover-border: rgb(43, 43, 43 / 15%); /* --dark */
54
+
--color-btn-primary-selected-bg: #284b63; /* --secondary */
55
+
--color-btn-primary-selected-shadow: inset 0 1px 0 rgb(0 45 17 / 20%);
56
+
--color-btn-primary-disabled-text: rgb(255 255 255 / 80%);
57
+
--color-btn-primary-disabled-bg: #94d3a2;
58
+
--color-btn-primary-disabled-border: rgb(31 35 40 / 15%);
59
+
--color-action-list-item-default-hover-bg: rgb(208 215 222 / 32%);
60
+
--color-segmented-control-bg: #eaeef2;
61
+
--color-segmented-control-button-bg: #fff;
62
+
--color-segmented-control-button-selected-border: #8c959f;
63
+
--color-fg-default: #2b2b2b; /* --dark */
64
+
--color-fg-muted: #4e4e4e; /* --darkgray */
65
+
--color-fg-subtle: #4e4e4e; /* --darkgray */
66
+
--color-canvas-default: #fff;
67
+
--color-canvas-overlay: #fff;
68
+
--color-canvas-inset: #f6f8fa;
69
+
--color-canvas-subtle: #f6f8fa;
70
+
--color-border-default: #d0d7de;
71
+
--color-border-muted: hsl(210deg 18% 87% / 100%);
72
+
--color-neutral-muted: rgb(175 184 193 / 20%);
73
+
--color-accent-fg: #0969da;
74
+
--color-accent-emphasis: #0969da;
75
+
--color-accent-muted: rgb(84 174 255 / 40%);
76
+
--color-accent-subtle: #ddf4ff;
77
+
--color-success-fg: #1a7f37;
78
+
--color-attention-fg: #9a6700;
79
+
--color-attention-muted: rgb(212 167 44 / 40%);
80
+
--color-attention-subtle: #fff8c5;
81
+
--color-danger-fg: #d1242f;
82
+
--color-danger-muted: rgb(255 129 130 / 40%);
83
+
--color-danger-subtle: #ffebe9;
84
+
--color-primer-shadow-inset: inset 0 1px 0 rgb(208 215 222 / 20%);
85
+
--color-scale-gray-1: #eaeef2;
86
+
--color-scale-blue-1: #b6e3ff;
87
+
88
+
/*! Extensions from @primer/css/alerts/flash.scss */
89
+
--color-social-reaction-bg-hover: var(--color-scale-gray-1);
90
+
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
91
+
}
92
+
93
+
main .pagination-loader-container {
94
+
background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg");
95
+
}
96
+
97
+
main .gsc-loading-image {
98
+
background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
99
+
}