Skip to content

Commit 29da589

Browse files
aaronryuaaronryu
committed
[Fix] Giscus 커스텀 CSS 적용을 위한 giscus-custom-dark/light.css 추가 후 Comment 수정
1 parent 7a5aeb3 commit 29da589

4 files changed

Lines changed: 327 additions & 21 deletions

File tree

‎public/css/giscus-custom-dark.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
main {
2+
font-family:
3+
"Ubuntu",
4+
-apple-system,
5+
BlinkMacSystemFont,
6+
"Segoe UI",
7+
Roboto,
8+
"Hiragino Sans",
9+
"Hiragino Kaku Gothic ProN",
10+
"Meiryo",
11+
"Yu Gothic",
12+
Pretendard,
13+
Arial,
14+
sans-serif;
15+
/* --- Syntax Highlighting (Dark mode compatible) --- */
16+
--color-prettylights-syntax-comment: #8b949e;
17+
--color-prettylights-syntax-constant: #79c0ff;
18+
--color-prettylights-syntax-entity: #d2a8ff;
19+
--color-prettylights-syntax-storage-modifier-import: #b6bfc8; /* Updated to match main text */
20+
--color-prettylights-syntax-entity-tag: #7ee787;
21+
--color-prettylights-syntax-keyword: #ff7b72;
22+
--color-prettylights-syntax-string: #a5d6ff;
23+
--color-prettylights-syntax-variable: #ffa657;
24+
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
25+
--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
26+
--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
27+
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
28+
--color-prettylights-syntax-carriage-return-bg: #b62324;
29+
--color-prettylights-syntax-string-regexp: #7ee787;
30+
--color-prettylights-syntax-markup-list: #f2cc60;
31+
--color-prettylights-syntax-markup-heading: #1f6feb;
32+
--color-prettylights-syntax-markup-italic: #b6bfc8;
33+
--color-prettylights-syntax-markup-bold: #b6bfc8;
34+
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
35+
--color-prettylights-syntax-markup-deleted-bg: #67060c;
36+
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
37+
--color-prettylights-syntax-markup-inserted-bg: #033a16;
38+
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
39+
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
40+
--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
41+
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
42+
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
43+
--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
44+
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
45+
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
46+
47+
/* --- Button Variations (#7f5555 base) --- */
48+
--color-btn-text: #b6bfc8;
49+
--color-btn-bg: #302a2a;
50+
--color-btn-border: #b7949440;
51+
--color-btn-shadow: 0 0 transparent;
52+
--color-btn-inset-shadow: 0 0 transparent;
53+
--color-btn-hover-bg: #3d3535;
54+
--color-btn-hover-border: #b79494;
55+
--color-btn-active-bg: #4d4343;
56+
--color-btn-active-border: #b79494;
57+
--color-btn-selected-bg: #211d1d;
58+
--color-btn-primary-text: #fff;
59+
--color-btn-primary-bg: #7f5555;
60+
--color-btn-primary-border: #b79494;
61+
--color-btn-primary-shadow: 0 0 transparent;
62+
--color-btn-primary-inset-shadow: 0 0 transparent;
63+
--color-btn-primary-hover-bg: #946666;
64+
--color-btn-primary-hover-border: #b79494;
65+
--color-btn-primary-selected-bg: #6d4949;
66+
--color-btn-primary-selected-shadow: 0 0 transparent;
67+
--color-btn-primary-disabled-text: rgba(255, 255, 255, 0.5);
68+
--color-btn-primary-disabled-bg: rgba(127, 85, 85, 0.6);
69+
--color-btn-primary-disabled-border: #b7949440;
70+
71+
--color-action-list-item-default-hover-bg: rgba(183, 148, 148, 0.12);
72+
--color-segmented-control-bg: rgb(110 118 129 / 10%);
73+
--color-segmented-control-button-bg: #0d1117;
74+
--color-segmented-control-button-selected-border: #6e7681;
75+
76+
/* --- Text Colors --- */
77+
--color-fg-default: #b6bfc8; /* 요청하신 가장 진한 텍스트 색상 */
78+
--color-fg-muted: #8b949e;
79+
--color-fg-subtle: #6e7681;
80+
81+
/* --- Canvas & Background --- */
82+
--color-canvas-default: #0d1117;
83+
--color-canvas-overlay: #161b22;
84+
--color-canvas-inset: #010409;
85+
--color-canvas-subtle: #161b22;
86+
87+
/* --- Border & Accents --- */
88+
--color-border-default: #30363d;
89+
--color-border-muted: #21262d;
90+
91+
--color-neutral-muted: rgb(110 118 129 / 40%);
92+
--color-accent-fg: #b79494;
93+
--color-accent-emphasis: #7f5555;
94+
--color-accent-muted: rgba(183, 148, 148, 0.666);
95+
--color-accent-subtle: #b7949430;
96+
97+
/* --- Feedback & Others --- */
98+
--color-success-fg: #3fb950;
99+
--color-attention-fg: #d29922;
100+
--color-attention-muted: rgb(187 128 9 / 40%);
101+
--color-attention-subtle: rgb(187 128 9 / 15%);
102+
--color-danger-fg: #f85149;
103+
--color-danger-muted: rgb(248 81 73 / 40%);
104+
--color-danger-subtle: rgb(248 81 73 / 10%);
105+
--color-primer-shadow-inset: 0 0 transparent;
106+
--color-scale-gray-7: #21262d;
107+
--color-scale-blue-8: #0c2d6b;
108+
109+
/*! Extensions from @primer/css/alerts/flash.scss */
110+
--color-social-reaction-bg-hover: var(--color-scale-gray-7);
111+
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
112+
}
113+
114+
main .pagination-loader-container {
115+
background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
116+
}
117+
118+
main .gsc-loading-image {
119+
background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
120+
}
121+
122+
.gsc-main {
123+
gap: 0.6em;
124+
}
125+
126+
.gsc-comments {
127+
gap: 0.3em;
128+
}
129+
130+
.gsc-timeline {
131+
gap: 0.3em;
132+
}
133+
134+
.gsc-comments-count {
135+
font-size: 1.1em;
136+
font-weight: 500;
137+
}
138+
139+
#__next .py-2 {
140+
padding-bottom: 0.5rem;
141+
padding-top: 0.5rem;
142+
}
143+
144+
#__next .px-4 {
145+
padding-inline-end: 1rem;
146+
padding-inline-start: 1rem;
147+
}
148+
149+
@media only screen and (max-width: 600px) {
150+
#__next .py-2 {
151+
padding-bottom: 0.4rem;
152+
padding-top: 0.4rem;
153+
}
154+
#__next .px-4 {
155+
padding-inline-end: 0.8rem;
156+
padding-inline-start: 0.8rem;
157+
}
158+
}

‎public/css/giscus-custom-light.css‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
main {
2+
font-family:
3+
"Ubuntu",
4+
-apple-system,
5+
BlinkMacSystemFont,
6+
"Segoe UI",
7+
Roboto,
8+
"Hiragino Sans",
9+
"Hiragino Kaku Gothic ProN",
10+
"Meiryo",
11+
"Yu Gothic",
12+
Pretendard,
13+
Arial,
14+
sans-serif;
15+
/* --- Syntax Highlighting (Darker tones) --- */
16+
--color-prettylights-syntax-comment: #6e7781;
17+
--color-prettylights-syntax-constant: #0550ae;
18+
--color-prettylights-syntax-entity: #8250df;
19+
--color-prettylights-syntax-storage-modifier-import: #2b2836; /* Updated */
20+
--color-prettylights-syntax-entity-tag: #116329;
21+
--color-prettylights-syntax-keyword: #cf222e;
22+
--color-prettylights-syntax-string: #0a3069;
23+
--color-prettylights-syntax-variable: #953800;
24+
--color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
25+
--color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
26+
--color-prettylights-syntax-invalid-illegal-bg: #82071e;
27+
--color-prettylights-syntax-carriage-return-text: #f6f8fa;
28+
--color-prettylights-syntax-carriage-return-bg: #cf222e;
29+
--color-prettylights-syntax-string-regexp: #116329;
30+
--color-prettylights-syntax-markup-list: #3b2300;
31+
--color-prettylights-syntax-markup-heading: #0550ae;
32+
--color-prettylights-syntax-markup-italic: #2b2836; /* Updated */
33+
--color-prettylights-syntax-markup-bold: #2b2836; /* Updated */
34+
--color-prettylights-syntax-markup-deleted-text: #82071e;
35+
--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
36+
--color-prettylights-syntax-markup-inserted-text: #116329;
37+
--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
38+
--color-prettylights-syntax-markup-changed-text: #953800;
39+
--color-prettylights-syntax-markup-changed-bg: #ffd8b5;
40+
--color-prettylights-syntax-markup-ignored-text: #eaeef2;
41+
--color-prettylights-syntax-markup-ignored-bg: #0550ae;
42+
--color-prettylights-syntax-meta-diff-range: #8250df;
43+
--color-prettylights-syntax-brackethighlighter-angle: #57606a;
44+
--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
45+
--color-prettylights-syntax-constant-other-reference-link: #0a3069;
46+
47+
/* --- Button Variations (#7f5555 based) --- */
48+
--color-btn-text: #2b2836;
49+
--color-btn-bg: #f6f8fa;
50+
--color-btn-border: rgba(127, 85, 85, 0.2);
51+
--color-btn-shadow: 0 1px 0 rgb(31 35 40 / 4%);
52+
--color-btn-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 25%);
53+
--color-btn-hover-bg: #f3f4f6;
54+
--color-btn-hover-border: rgba(127, 85, 85, 0.3);
55+
--color-btn-active-bg: hsl(220deg 14% 93% / 100%);
56+
--color-btn-active-border: rgba(127, 85, 85, 0.4);
57+
--color-btn-selected-bg: hsl(220deg 14% 94% / 100%);
58+
--color-btn-primary-bg: #7f5555;
59+
--color-btn-primary-text: #fff;
60+
--color-btn-primary-border: #7f5555;
61+
--color-btn-primary-shadow: 0 1px 0 rgb(31 35 40 / 10%);
62+
--color-btn-primary-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
63+
--color-btn-primary-hover-bg: #6d4949;
64+
--color-btn-primary-hover-border: #6d4949;
65+
--color-btn-primary-selected-bg: #5c3e3e;
66+
--color-btn-primary-selected-shadow: inset 0 1px 0 rgb(45 0 0 / 20%);
67+
--color-btn-primary-disabled-text: rgb(255 255 255 / 80%);
68+
--color-btn-primary-disabled-bg: #cbb9b9;
69+
--color-btn-primary-disabled-border: #cbb9b9;
70+
71+
--color-action-list-item-default-hover-bg: rgb(208 215 222 / 32%);
72+
--color-segmented-control-bg: #eaeef2;
73+
--color-segmented-control-button-bg: #fff;
74+
--color-segmented-control-button-selected-border: #7f5555;
75+
76+
/* --- Text Colors --- */
77+
--color-fg-default: #2b2836; /* 진한 글자색 적용 */
78+
--color-fg-muted: #656d76; /* 회색 유지 */
79+
--color-fg-subtle: #6e7781; /* 회색 유지 */
80+
81+
/* --- Canvas & Background --- */
82+
--color-canvas-default: #fff;
83+
--color-canvas-overlay: #fff;
84+
--color-canvas-inset: #f6f8fa;
85+
--color-canvas-subtle: #f6f8fa;
86+
87+
/* --- Border & Accents --- */
88+
--color-border-default: #d0d7de;
89+
--color-border-muted: hsl(210deg 18% 87% / 100%);
90+
91+
--color-neutral-muted: rgba(127, 85, 85, 0.1);
92+
--color-accent-fg: #7f5555;
93+
--color-accent-emphasis: #7f5555;
94+
--color-accent-muted: rgba(127, 85, 85, 0.595);
95+
--color-accent-subtle: #f9f5f5;
96+
97+
/* --- Feedback & Shadows --- */
98+
--color-success-fg: #1a7f37;
99+
--color-attention-fg: #9a6700;
100+
--color-attention-muted: rgb(212 167 44 / 40%);
101+
--color-attention-subtle: #fff8c5;
102+
--color-danger-fg: #d1242f;
103+
--color-danger-muted: rgb(255 129 130 / 40%);
104+
--color-danger-subtle: #ffebe9;
105+
--color-primer-shadow-inset: inset 0 1px 0 rgba(127, 85, 85, 0.2);
106+
--color-scale-gray-1: #eaeef2;
107+
--color-scale-blue-1: #b6e3ff;
108+
109+
/*! Extensions from @primer/css/alerts/flash.scss */
110+
--color-social-reaction-bg-hover: var(--color-scale-gray-1);
111+
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
112+
}
113+
114+
/* Layout adjustments */
115+
main .pagination-loader-container {
116+
background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg");
117+
}
118+
119+
main .gsc-loading-image {
120+
background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
121+
}
122+
123+
.gsc-main {
124+
gap: 0.6em;
125+
}
126+
127+
.gsc-comments {
128+
gap: 0.3em;
129+
}
130+
131+
.gsc-timeline {
132+
gap: 0.3em;
133+
}
134+
135+
.gsc-comments-count {
136+
font-size: 1.1em;
137+
font-weight: 500;
138+
}
139+
140+
#__next .py-2 {
141+
padding-bottom: 0.5rem;
142+
padding-top: 0.5rem;
143+
}
144+
145+
#__next .px-4 {
146+
padding-inline-end: 1rem;
147+
padding-inline-start: 1rem;
148+
}
149+
150+
@media only screen and (max-width: 600px) {
151+
#__next .py-2 {
152+
padding-bottom: 0.4rem;
153+
padding-top: 0.4rem;
154+
}
155+
#__next .px-4 {
156+
padding-inline-end: 0.8rem;
157+
padding-inline-start: 0.8rem;
158+
}
159+
}

‎public/css/giscus-custom.css‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎src/components/Comments.astro‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
const customCss = new URL("/css/giscus-custom.css", Astro.site).href;
2+
const siteUrl = Astro.site;
33
---
44

55
<section class="comments">
@@ -15,17 +15,22 @@ const customCss = new URL("/css/giscus-custom.css", Astro.site).href;
1515
data-reactions-enabled="1"
1616
data-emit-metadata="0"
1717
data-input-position="top"
18-
data-theme={customCss}
18+
data-theme="preferred_color_scheme"
1919
data-lang="ko"
2020
data-loading="lazy"
2121
crossorigin="anonymous"
2222
async
2323
>
2424
</script>
25-
<!-- preferred_color_scheme -->
2625
</section>
2726

28-
<script is:inline>
27+
<script is:inline define:vars={{ siteUrl }}>
28+
window.ASTRO_SITE_URL = siteUrl;
29+
30+
function getCustomCss(theme) {
31+
return new URL(`/css/giscus-custom-${theme}.css`, window.ASTRO_SITE_URL).href;
32+
}
33+
2934
function getGiscusTheme() {
3035
return document.documentElement.classList.contains("dark") ? "dark" : "light";
3136
}
@@ -35,7 +40,7 @@ const customCss = new URL("/css/giscus-custom.css", Astro.site).href;
3540
if (!iframe) return false;
3641

3742
iframe.contentWindow.postMessage(
38-
{ giscus: { setConfig: { theme: theme } } },
43+
{ giscus: { setConfig: { theme: getCustomCss(theme) } } },
3944
"https://giscus.app",
4045
);
4146
return true;

0 commit comments

Comments
 (0)