Skip to content

Commit 58dfc9e

Browse files
ReenigneArcherReenigneArcher
authored
fix: theme aware giscus styles (#321)
1 parent 3aedd01 commit 58dfc9e

File tree

1 file changed

+99
-100
lines changed

1 file changed

+99
-100
lines changed

‎assets/css/giscus.css‎

Lines changed: 99 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
* https://github.com/primer/primitives/blob/main/LICENSE
44
*/
55

6-
/* Light theme variables */
7-
:root {
6+
main {
87
--color-prettylights-syntax-comment: #6a737d;
98
--color-prettylights-syntax-constant: #005cc5;
109
--color-prettylights-syntax-entity: #6f42c1;
@@ -91,108 +90,108 @@
9190
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8)
9291
}
9392

94-
/* Dark theme variables */
95-
[data-bs-theme="dark"] main {
96-
--color-prettylights-syntax-comment: #8b949e;
97-
--color-prettylights-syntax-constant: #79c0ff;
98-
--color-prettylights-syntax-entity: #d2a8ff;
99-
--color-prettylights-syntax-storage-modifier-import: #c9d1d9;
100-
--color-prettylights-syntax-entity-tag: #7ee787;
101-
--color-prettylights-syntax-keyword: #ff7b72;
102-
--color-prettylights-syntax-string: #a5d6ff;
103-
--color-prettylights-syntax-variable: #ffa657;
104-
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
105-
--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
106-
--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
107-
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
108-
--color-prettylights-syntax-carriage-return-bg: #b62324;
109-
--color-prettylights-syntax-string-regexp: #7ee787;
110-
--color-prettylights-syntax-markup-list: #f2cc60;
111-
--color-prettylights-syntax-markup-heading: #1f6feb;
112-
--color-prettylights-syntax-markup-italic: #c9d1d9;
113-
--color-prettylights-syntax-markup-bold: #c9d1d9;
114-
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
115-
--color-prettylights-syntax-markup-deleted-bg: #67060c;
116-
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
117-
--color-prettylights-syntax-markup-inserted-bg: #033a16;
118-
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
119-
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
120-
--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
121-
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
122-
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
123-
--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
124-
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
125-
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
126-
--color-btn-text: #c9d1d9;
127-
--color-btn-bg: #21262d;
128-
--color-btn-border: #f0f6fc1a;
129-
--color-btn-shadow: 0 0 #0000;
130-
--color-btn-inset-shadow: 0 0 #0000;
131-
--color-btn-hover-bg: #30363d;
132-
--color-btn-hover-border: #8b949e;
133-
--color-btn-active-bg: #282e33;
134-
--color-btn-active-border: #6e7681;
135-
--color-btn-selected-bg: #161b22;
136-
--color-btn-primary-text: #fff;
137-
--color-btn-primary-bg: #238636;
138-
--color-btn-primary-border: #f0f6fc1a;
139-
--color-btn-primary-shadow: 0 0 #0000;
140-
--color-btn-primary-inset-shadow: 0 0 #0000;
141-
--color-btn-primary-hover-bg: #2ea043;
142-
--color-btn-primary-hover-border: #f0f6fc1a;
143-
--color-btn-primary-selected-bg: #238636;
144-
--color-btn-primary-selected-shadow: 0 0 #0000;
145-
--color-btn-primary-disabled-text: #ffffff80;
146-
--color-btn-primary-disabled-bg: #23863699;
147-
--color-btn-primary-disabled-border: #f0f6fc1a;
148-
--color-action-list-item-default-hover-bg: #b1bac41f;
149-
--color-segmented-control-bg: #6e76811a;
150-
--color-segmented-control-button-bg: #0d1117;
151-
--color-segmented-control-button-selected-border: #6e7681;
152-
--color-fg-default: #e6edf3;
153-
--color-fg-muted: #7d8590;
154-
--color-fg-subtle: #6e7681;
155-
--color-canvas-default: #242526;
156-
--color-canvas-overlay: #161b22;
157-
--color-canvas-inset: #151515;
158-
--color-canvas-subtle: #303436;
159-
--color-border-default: #30363d;
160-
--color-border-muted: #21262d;
161-
--color-neutral-muted: #6e768166;
162-
--color-accent-fg: #2f81f7;
163-
--color-accent-emphasis: #1f6feb;
164-
--color-accent-muted: #388bfd66;
165-
--color-accent-subtle: #388bfd1a;
166-
--color-success-fg: #3fb950;
167-
--color-attention-fg: #d29922;
168-
--color-attention-muted: #bb800966;
169-
--color-attention-subtle: #bb800926;
170-
--color-danger-fg: #f85149;
171-
--color-danger-muted: #f8514966;
172-
--color-danger-subtle: #f851491a;
173-
--color-primer-shadow-inset: 0 0 #0000;
174-
--color-scale-gray-7: #21262d;
175-
--color-scale-blue-8: #0c2d6b;
176-
177-
/*! Extensions from @primer/css/alerts/flash.scss */
178-
--color-social-reaction-bg-hover: var(--color-scale-gray-7);
179-
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8)
93+
main .pagination-loader-container {
94+
background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg");
18095
}
18196

182-
/* Dark theme images */
183-
[data-bs-theme="dark"] main .pagination-loader-container {
184-
background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg)
97+
main .gsc-loading-image {
98+
background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
18599
}
186100

187-
[data-bs-theme="dark"] main .gsc-loading-image {
188-
background-image: url(https://github.githubassets.com/images/mona-loading-dark.gif)
189-
}
101+
/*! Dark mode */
102+
@media (prefers-color-scheme: dark) {
103+
main {
104+
--color-prettylights-syntax-comment: #8b949e;
105+
--color-prettylights-syntax-constant: #79c0ff;
106+
--color-prettylights-syntax-entity: #d2a8ff;
107+
--color-prettylights-syntax-storage-modifier-import: #c9d1d9;
108+
--color-prettylights-syntax-entity-tag: #7ee787;
109+
--color-prettylights-syntax-keyword: #ff7b72;
110+
--color-prettylights-syntax-string: #a5d6ff;
111+
--color-prettylights-syntax-variable: #ffa657;
112+
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
113+
--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
114+
--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
115+
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
116+
--color-prettylights-syntax-carriage-return-bg: #b62324;
117+
--color-prettylights-syntax-string-regexp: #7ee787;
118+
--color-prettylights-syntax-markup-list: #f2cc60;
119+
--color-prettylights-syntax-markup-heading: #1f6feb;
120+
--color-prettylights-syntax-markup-italic: #c9d1d9;
121+
--color-prettylights-syntax-markup-bold: #c9d1d9;
122+
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
123+
--color-prettylights-syntax-markup-deleted-bg: #67060c;
124+
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
125+
--color-prettylights-syntax-markup-inserted-bg: #033a16;
126+
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
127+
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
128+
--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
129+
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
130+
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
131+
--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
132+
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
133+
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
134+
--color-btn-text: #c9d1d9;
135+
--color-btn-bg: #21262d;
136+
--color-btn-border: #f0f6fc1a;
137+
--color-btn-shadow: 0 0 #0000;
138+
--color-btn-inset-shadow: 0 0 #0000;
139+
--color-btn-hover-bg: #30363d;
140+
--color-btn-hover-border: #8b949e;
141+
--color-btn-active-bg: #282e33;
142+
--color-btn-active-border: #6e7681;
143+
--color-btn-selected-bg: #161b22;
144+
--color-btn-primary-text: #fff;
145+
--color-btn-primary-bg: #238636;
146+
--color-btn-primary-border: #f0f6fc1a;
147+
--color-btn-primary-shadow: 0 0 #0000;
148+
--color-btn-primary-inset-shadow: 0 0 #0000;
149+
--color-btn-primary-hover-bg: #2ea043;
150+
--color-btn-primary-hover-border: #f0f6fc1a;
151+
--color-btn-primary-selected-bg: #238636;
152+
--color-btn-primary-selected-shadow: 0 0 #0000;
153+
--color-btn-primary-disabled-text: #ffffff80;
154+
--color-btn-primary-disabled-bg: #23863699;
155+
--color-btn-primary-disabled-border: #f0f6fc1a;
156+
--color-action-list-item-default-hover-bg: #b1bac41f;
157+
--color-segmented-control-bg: #6e76811a;
158+
--color-segmented-control-button-bg: #0d1117;
159+
--color-segmented-control-button-selected-border: #6e7681;
160+
--color-fg-default: #e6edf3;
161+
--color-fg-muted: #7d8590;
162+
--color-fg-subtle: #6e7681;
163+
--color-canvas-default: #242526;
164+
--color-canvas-overlay: #161b22;
165+
--color-canvas-inset: #151515;
166+
--color-canvas-subtle: #303436;
167+
--color-border-default: #30363d;
168+
--color-border-muted: #21262d;
169+
--color-neutral-muted: #6e768166;
170+
--color-accent-fg: #2f81f7;
171+
--color-accent-emphasis: #1f6feb;
172+
--color-accent-muted: #388bfd66;
173+
--color-accent-subtle: #388bfd1a;
174+
--color-success-fg: #3fb950;
175+
--color-attention-fg: #d29922;
176+
--color-attention-muted: #bb800966;
177+
--color-attention-subtle: #bb800926;
178+
--color-danger-fg: #f85149;
179+
--color-danger-muted: #f8514966;
180+
--color-danger-subtle: #f851491a;
181+
--color-primer-shadow-inset: 0 0 #0000;
182+
--color-scale-gray-7: #21262d;
183+
--color-scale-blue-8: #0c2d6b;
190184

191-
/* Light theme images */
192-
main .pagination-loader-container {
193-
background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line.svg)
194-
}
185+
/*! Extensions from @primer/css/alerts/flash.scss */
186+
--color-social-reaction-bg-hover: var(--color-scale-gray-7);
187+
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8)
188+
}
195189

196-
main .gsc-loading-image {
197-
background-image: url(https://github.githubassets.com/images/mona-loading-default.gif)
190+
main .pagination-loader-container {
191+
background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
192+
}
193+
194+
main .gsc-loading-image {
195+
background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
196+
}
198197
}

0 commit comments

Comments
 (0)