Skip to content

Commit 0de1e04

Browse files
JHWelchJHWelch
committed
Create modified github theme for demo
1 parent 4b42e4b commit 0de1e04

File tree

2 files changed

+333
-1
lines changed

2 files changed

+333
-1
lines changed

‎website/templates/pages/demo/demo.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Diff2HtmlUI, defaultDiff2HtmlUIConfig, Diff2HtmlUIConfig } from '../../
22

33
import '../../../main.ts';
44
import '../../../main.css';
5-
import 'highlight.js/styles/github.css';
5+
import './github-highlights.css';
66
import '../../../../src/ui/css/diff2html.css';
77
import './demo.css';
88
import { colorSchemeToCss } from '../../../../src/render-utils';

‎website/templates/pages/demo/github-highlights.css‎

Lines changed: 332 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,332 @@
1+
/*!
2+
Theme Adapted from highlight.js github theme
3+
Theme: Modified GitHub Dark
4+
Description: Dark theme as seen on github.com, modified for diff2html demo
5+
Author: github.com
6+
Maintainer: @Hirse
7+
Updated: 2021-05-15
8+
9+
Outdated base version: https://github.com/primer/github-syntax-dark
10+
Current colors taken from GitHub's CSS
11+
*/
12+
13+
pre code.hljs {
14+
display: block;
15+
overflow-x: auto;
16+
padding: 1em;
17+
}
18+
code.hljs {
19+
padding: 3px 5px;
20+
}
21+
22+
.hljs {
23+
color: #24292e;
24+
}
25+
.hljs-doctag,
26+
.hljs-keyword,
27+
.hljs-meta .hljs-keyword,
28+
.hljs-template-tag,
29+
.hljs-template-variable,
30+
.hljs-type,
31+
.hljs-variable.language_ {
32+
color: #d73a49;
33+
}
34+
.hljs-title,
35+
.hljs-title.class_,
36+
.hljs-title.class_.inherited__,
37+
.hljs-title.function_ {
38+
color: #6f42c1;
39+
}
40+
.hljs-attr,
41+
.hljs-attribute,
42+
.hljs-literal,
43+
.hljs-meta,
44+
.hljs-number,
45+
.hljs-operator,
46+
.hljs-selector-attr,
47+
.hljs-selector-class,
48+
.hljs-selector-id,
49+
.hljs-variable {
50+
color: #005cc5;
51+
}
52+
.hljs-meta .hljs-string,
53+
.hljs-regexp,
54+
.hljs-string {
55+
color: #032f62;
56+
}
57+
.hljs-built_in,
58+
.hljs-symbol {
59+
color: #e36209;
60+
}
61+
.hljs-code,
62+
.hljs-comment,
63+
.hljs-formula {
64+
color: #6a737d;
65+
}
66+
.hljs-name,
67+
.hljs-quote,
68+
.hljs-selector-pseudo,
69+
.hljs-selector-tag {
70+
color: #22863a;
71+
}
72+
.hljs-subst {
73+
color: #24292e;
74+
}
75+
.hljs-section {
76+
color: #005cc5;
77+
font-weight: 700;
78+
}
79+
.hljs-bullet {
80+
color: #735c0f;
81+
}
82+
.hljs-emphasis {
83+
color: #24292e;
84+
font-style: italic;
85+
}
86+
.hljs-strong {
87+
color: #24292e;
88+
font-weight: 700;
89+
}
90+
.hljs-addition {
91+
color: #22863a;
92+
background-color: #f0fff4;
93+
}
94+
.hljs-deletion {
95+
color: #b31d28;
96+
background-color: #ffeef0;
97+
}
98+
99+
.d2h-dark-color-scheme .hljs {
100+
color: #c9d1d9;
101+
}
102+
.d2h-dark-color-scheme .hljs-doctag,
103+
.d2h-dark-color-scheme .hljs-keyword,
104+
.d2h-dark-color-scheme .hljs-meta .hljs-keyword,
105+
.d2h-dark-color-scheme .hljs-template-tag,
106+
.d2h-dark-color-scheme .hljs-template-variable,
107+
.d2h-dark-color-scheme .hljs-type,
108+
.d2h-dark-color-scheme .hljs-variable.language_ {
109+
color: #ff7b72;
110+
}
111+
.d2h-dark-color-scheme .hljs-title,
112+
.d2h-dark-color-scheme .hljs-title.class_,
113+
.d2h-dark-color-scheme .hljs-title.class_.inherited__,
114+
.d2h-dark-color-scheme .hljs-title.function_ {
115+
color: #d2a8ff;
116+
}
117+
.d2h-dark-color-scheme .hljs-attr,
118+
.d2h-dark-color-scheme .hljs-attribute,
119+
.d2h-dark-color-scheme .hljs-literal,
120+
.d2h-dark-color-scheme .hljs-meta,
121+
.d2h-dark-color-scheme .hljs-number,
122+
.d2h-dark-color-scheme .hljs-operator,
123+
.d2h-dark-color-scheme .hljs-selector-attr,
124+
.d2h-dark-color-scheme .hljs-selector-class,
125+
.d2h-dark-color-scheme .hljs-selector-id,
126+
.d2h-dark-color-scheme .hljs-variable {
127+
color: #79c0ff;
128+
}
129+
.d2h-dark-color-scheme .hljs-meta .hljs-string,
130+
.d2h-dark-color-scheme .hljs-regexp,
131+
.d2h-dark-color-scheme .hljs-string {
132+
color: #a5d6ff;
133+
}
134+
.d2h-dark-color-scheme .hljs-built_in,
135+
.d2h-dark-color-scheme .hljs-symbol {
136+
color: #ffa657;
137+
}
138+
.d2h-dark-color-scheme .hljs-code,
139+
.d2h-dark-color-scheme .hljs-comment,
140+
.d2h-dark-color-scheme .hljs-formula {
141+
color: #8b949e;
142+
}
143+
.d2h-dark-color-scheme .hljs-name,
144+
.d2h-dark-color-scheme .hljs-quote,
145+
.d2h-dark-color-scheme .hljs-selector-pseudo,
146+
.d2h-dark-color-scheme .hljs-selector-tag {
147+
color: #7ee787;
148+
}
149+
.d2h-dark-color-scheme .hljs-subst {
150+
color: #c9d1d9;
151+
}
152+
.d2h-dark-color-scheme .hljs-section {
153+
color: #1f6feb;
154+
font-weight: 700;
155+
}
156+
.d2h-dark-color-scheme .hljs-bullet {
157+
color: #f2cc60;
158+
}
159+
.d2h-dark-color-scheme .hljs-emphasis {
160+
color: #c9d1d9;
161+
font-style: italic;
162+
}
163+
.d2h-dark-color-scheme .hljs-strong {
164+
color: #c9d1d9;
165+
font-weight: 700;
166+
}
167+
.d2h-dark-color-scheme .hljs-addition {
168+
color: #aff5b4;
169+
background-color: #033a16;
170+
}
171+
.d2h-dark-color-scheme .hljs-deletion {
172+
color: #ffdcd7;
173+
background-color: #67060c;
174+
}
175+
176+
@media (prefers-color-scheme: dark) {
177+
.d2h-auto-color-scheme .hljs {
178+
color: #c9d1d9;
179+
}
180+
.d2h-auto-color-scheme .hljs-doctag,
181+
.d2h-auto-color-scheme .hljs-keyword,
182+
.d2h-auto-color-scheme .hljs-meta .hljs-keyword,
183+
.d2h-auto-color-scheme .hljs-template-tag,
184+
.d2h-auto-color-scheme .hljs-template-variable,
185+
.d2h-auto-color-scheme .hljs-type,
186+
.d2h-auto-color-scheme .hljs-variable.language_ {
187+
color: #ff7b72;
188+
}
189+
.d2h-auto-color-scheme .hljs-title,
190+
.d2h-auto-color-scheme .hljs-title.class_,
191+
.d2h-auto-color-scheme .hljs-title.class_.inherited__,
192+
.d2h-auto-color-scheme .hljs-title.function_ {
193+
color: #d2a8ff;
194+
}
195+
.d2h-auto-color-scheme .hljs-attr,
196+
.d2h-auto-color-scheme .hljs-attribute,
197+
.d2h-auto-color-scheme .hljs-literal,
198+
.d2h-auto-color-scheme .hljs-meta,
199+
.d2h-auto-color-scheme .hljs-number,
200+
.d2h-auto-color-scheme .hljs-operator,
201+
.d2h-auto-color-scheme .hljs-selector-attr,
202+
.d2h-auto-color-scheme .hljs-selector-class,
203+
.d2h-auto-color-scheme .hljs-selector-id,
204+
.d2h-auto-color-scheme .hljs-variable {
205+
color: #79c0ff;
206+
}
207+
.d2h-auto-color-scheme .hljs-meta .hljs-string,
208+
.d2h-auto-color-scheme .hljs-regexp,
209+
.d2h-auto-color-scheme .hljs-string {
210+
color: #a5d6ff;
211+
}
212+
.d2h-auto-color-scheme .hljs-built_in,
213+
.d2h-auto-color-scheme .hljs-symbol {
214+
color: #ffa657;
215+
}
216+
.d2h-auto-color-scheme .hljs-code,
217+
.d2h-auto-color-scheme .hljs-comment,
218+
.d2h-auto-color-scheme .hljs-formula {
219+
color: #8b949e;
220+
}
221+
.d2h-auto-color-scheme .hljs-name,
222+
.d2h-auto-color-scheme .hljs-quote,
223+
.d2h-auto-color-scheme .hljs-selector-pseudo,
224+
.d2h-auto-color-scheme .hljs-selector-tag {
225+
color: #7ee787;
226+
}
227+
.d2h-auto-color-scheme .hljs-subst {
228+
color: #c9d1d9;
229+
}
230+
.d2h-auto-color-scheme .hljs-section {
231+
color: #1f6feb;
232+
font-weight: 700;
233+
}
234+
.d2h-auto-color-scheme .hljs-bullet {
235+
color: #f2cc60;
236+
}
237+
.d2h-auto-color-scheme .hljs-emphasis {
238+
color: #c9d1d9;
239+
font-style: italic;
240+
}
241+
.d2h-auto-color-scheme .hljs-strong {
242+
color: #c9d1d9;
243+
font-weight: 700;
244+
}
245+
.d2h-auto-color-scheme .hljs-addition {
246+
color: #aff5b4;
247+
background-color: #033a16;
248+
}
249+
.d2h-auto-color-scheme .hljs-deletion {
250+
color: #ffdcd7;
251+
background-color: #67060c;
252+
}
253+
}
254+
255+
@media (prefers-color-scheme: light) {
256+
.d2h-auto-color-scheme .hljs {
257+
color: #24292e;
258+
}
259+
.d2h-auto-color-scheme .hljs-doctag,
260+
.d2h-auto-color-scheme .hljs-keyword,
261+
.d2h-auto-color-scheme .hljs-meta .hljs-keyword,
262+
.d2h-auto-color-scheme .hljs-template-tag,
263+
.d2h-auto-color-scheme .hljs-template-variable,
264+
.d2h-auto-color-scheme .hljs-type,
265+
.d2h-auto-color-scheme .hljs-variable.language_ {
266+
color: #d73a49;
267+
}
268+
.d2h-auto-color-scheme .hljs-title,
269+
.d2h-auto-color-scheme .hljs-title.class_,
270+
.d2h-auto-color-scheme .hljs-title.class_.inherited__,
271+
.d2h-auto-color-scheme .hljs-title.function_ {
272+
color: #6f42c1;
273+
}
274+
.d2h-auto-color-scheme .hljs-attr,
275+
.d2h-auto-color-scheme .hljs-attribute,
276+
.d2h-auto-color-scheme .hljs-literal,
277+
.d2h-auto-color-scheme .hljs-meta,
278+
.d2h-auto-color-scheme .hljs-number,
279+
.d2h-auto-color-scheme .hljs-operator,
280+
.d2h-auto-color-scheme .hljs-selector-attr,
281+
.d2h-auto-color-scheme .hljs-selector-class,
282+
.d2h-auto-color-scheme .hljs-selector-id,
283+
.d2h-auto-color-scheme .hljs-variable {
284+
color: #005cc5;
285+
}
286+
.d2h-auto-color-scheme .hljs-meta .hljs-string,
287+
.d2h-auto-color-scheme .hljs-regexp,
288+
.d2h-auto-color-scheme .hljs-string {
289+
color: #032f62;
290+
}
291+
.d2h-auto-color-scheme .hljs-built_in,
292+
.d2h-auto-color-scheme .hljs-symbol {
293+
color: #e36209;
294+
}
295+
.d2h-auto-color-scheme .hljs-code,
296+
.d2h-auto-color-scheme .hljs-comment,
297+
.d2h-auto-color-scheme .hljs-formula {
298+
color: #6a737d;
299+
}
300+
.d2h-auto-color-scheme .hljs-name,
301+
.d2h-auto-color-scheme .hljs-quote,
302+
.d2h-auto-color-scheme .hljs-selector-pseudo,
303+
.d2h-auto-color-scheme .hljs-selector-tag {
304+
color: #22863a;
305+
}
306+
.d2h-auto-color-scheme .hljs-subst {
307+
color: #24292e;
308+
}
309+
.d2h-auto-color-scheme .hljs-section {
310+
color: #005cc5;
311+
font-weight: 700;
312+
}
313+
.d2h-auto-color-scheme .hljs-bullet {
314+
color: #735c0f;
315+
}
316+
.d2h-auto-color-scheme .hljs-emphasis {
317+
color: #24292e;
318+
font-style: italic;
319+
}
320+
.d2h-auto-color-scheme .hljs-strong {
321+
color: #24292e;
322+
font-weight: 700;
323+
}
324+
.d2h-auto-color-scheme .hljs-addition {
325+
color: #22863a;
326+
background-color: #f0fff4;
327+
}
328+
.d2h-auto-color-scheme .hljs-deletion {
329+
color: #b31d28;
330+
background-color: #ffeef0;
331+
}
332+
}

0 commit comments

Comments
 (0)