Skip to content

Commit d34b313

Browse files
nginx-jacknginx-jack
committed
Theme: Chroma code dark mode
Use https://xyproto.github.io/splash/docs/github-dark.html as Theme for dark mode light-dark css merge handled by chad
1 parent 8f2c7cf commit d34b313

File tree

2 files changed

+292
-89
lines changed

2 files changed

+292
-89
lines changed

‎assets/css/v2/highlight.css‎

Lines changed: 291 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,291 @@
1-
/* Generated using: hugo gen chromastyles --style=tango */
2-
3-
/* Background */ .bg { background-color:#f8f8f8; }
4-
/* PreWrapper */ .chroma { background-color:#f8f8f8; }
5-
/* Other */ .chroma .x { color:#000 }
6-
/* Error */ .chroma .err { color:#a40000 }
7-
/* CodeLine */ .chroma .cl { }
8-
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
9-
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
10-
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
11-
/* LineHighlight */ .chroma .hl { background-color:#dfdfdf }
12-
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
13-
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
14-
/* Line */ .chroma .line { display:flex; }
15-
/* Keyword */ .chroma .k { color:#204a87;font-weight:bold }
16-
/* KeywordConstant */ .chroma .kc { color:#204a87;font-weight:bold }
17-
/* KeywordDeclaration */ .chroma .kd { color:#204a87;font-weight:bold }
18-
/* KeywordNamespace */ .chroma .kn { color:#204a87;font-weight:bold }
19-
/* KeywordPseudo */ .chroma .kp { color:#204a87;font-weight:bold }
20-
/* KeywordReserved */ .chroma .kr { color:#204a87;font-weight:bold }
21-
/* KeywordType */ .chroma .kt { color:#204a87;font-weight:bold }
22-
/* Name */ .chroma .n { color:#000 }
23-
/* NameAttribute */ .chroma .na { color:#c4a000 }
24-
/* NameBuiltin */ .chroma .nb { color:#204a87 }
25-
/* NameBuiltinPseudo */ .chroma .bp { color:#3465a4 }
26-
/* NameClass */ .chroma .nc { color:#000 }
27-
/* NameConstant */ .chroma .no { color:#000 }
28-
/* NameDecorator */ .chroma .nd { color:#5c35cc;font-weight:bold }
29-
/* NameEntity */ .chroma .ni { color:#ce5c00 }
30-
/* NameException */ .chroma .ne { color:#c00;font-weight:bold }
31-
/* NameFunction */ .chroma .nf { color:#000 }
32-
/* NameFunctionMagic */ .chroma .fm { color:#000 }
33-
/* NameLabel */ .chroma .nl { color:#f57900 }
34-
/* NameNamespace */ .chroma .nn { color:#000 }
35-
/* NameOther */ .chroma .nx { color:#000 }
36-
/* NameProperty */ .chroma .py { color:#000 }
37-
/* NameTag */ .chroma .nt { color:#204a87;font-weight:bold }
38-
/* NameVariable */ .chroma .nv { color:#000 }
39-
/* NameVariableClass */ .chroma .vc { color:#000 }
40-
/* NameVariableGlobal */ .chroma .vg { color:#000 }
41-
/* NameVariableInstance */ .chroma .vi { color:#000 }
42-
/* NameVariableMagic */ .chroma .vm { color:#000 }
43-
/* Literal */ .chroma .l { color:#000 }
44-
/* LiteralDate */ .chroma .ld { color:#000 }
45-
/* LiteralString */ .chroma .s { color:#4e9a06 }
46-
/* LiteralStringAffix */ .chroma .sa { color:#4e9a06 }
47-
/* LiteralStringBacktick */ .chroma .sb { color:#4e9a06 }
48-
/* LiteralStringChar */ .chroma .sc { color:#4e9a06 }
49-
/* LiteralStringDelimiter */ .chroma .dl { color:#4e9a06 }
50-
/* LiteralStringDoc */ .chroma .sd { color:#8f5902;font-style:italic }
51-
/* LiteralStringDouble */ .chroma .s2 { color:#4e9a06 }
52-
/* LiteralStringEscape */ .chroma .se { color:#4e9a06 }
53-
/* LiteralStringHeredoc */ .chroma .sh { color:#4e9a06 }
54-
/* LiteralStringInterpol */ .chroma .si { color:#4e9a06 }
55-
/* LiteralStringOther */ .chroma .sx { color:#4e9a06 }
56-
/* LiteralStringRegex */ .chroma .sr { color:#4e9a06 }
57-
/* LiteralStringSingle */ .chroma .s1 { color:#4e9a06 }
58-
/* LiteralStringSymbol */ .chroma .ss { color:#4e9a06 }
59-
/* LiteralNumber */ .chroma .m { color:#0000cf;font-weight:bold }
60-
/* LiteralNumberBin */ .chroma .mb { color:#0000cf;font-weight:bold }
61-
/* LiteralNumberFloat */ .chroma .mf { color:#0000cf;font-weight:bold }
62-
/* LiteralNumberHex */ .chroma .mh { color:#0000cf;font-weight:bold }
63-
/* LiteralNumberInteger */ .chroma .mi { color:#0000cf;font-weight:bold }
64-
/* LiteralNumberIntegerLong */ .chroma .il { color:#0000cf;font-weight:bold }
65-
/* LiteralNumberOct */ .chroma .mo { color:#0000cf;font-weight:bold }
66-
/* Operator */ .chroma .o { color:#ce5c00;font-weight:bold }
67-
/* OperatorWord */ .chroma .ow { color:#204a87;font-weight:bold }
68-
/* Punctuation */ .chroma .p { color:#000;font-weight:bold }
69-
/* Comment */ .chroma .c { color:#8f5902;font-style:italic }
70-
/* CommentHashbang */ .chroma .ch { color:#8f5902;font-style:italic }
71-
/* CommentMultiline */ .chroma .cm { color:#8f5902;font-style:italic }
72-
/* CommentSingle */ .chroma .c1 { color:#8f5902;font-style:italic }
73-
/* CommentSpecial */ .chroma .cs { color:#8f5902;font-style:italic }
74-
/* CommentPreproc */ .chroma .cp { color:#8f5902;font-style:italic }
75-
/* CommentPreprocFile */ .chroma .cpf { color:#8f5902;font-style:italic }
76-
/* Generic */ .chroma .g { color:#000 }
77-
/* GenericDeleted */ .chroma .gd { color:#a40000 }
78-
/* GenericEmph */ .chroma .ge { color:#000;font-style:italic }
79-
/* GenericError */ .chroma .gr { color:#ef2929 }
80-
/* GenericHeading */ .chroma .gh { color:#000080;font-weight:bold }
81-
/* GenericInserted */ .chroma .gi { color:#00a000 }
82-
/* GenericOutput */ .chroma .go { color:#000;font-style:italic }
83-
/* GenericPrompt */ .chroma .gp { color:#8f5902 }
84-
/* GenericStrong */ .chroma .gs { color:#000;font-weight:bold }
85-
/* GenericSubheading */ .chroma .gu { color:#800080;font-weight:bold }
86-
/* GenericTraceback */ .chroma .gt { color:#a40000;font-weight:bold }
87-
/* GenericUnderline */ .chroma .gl { color:#000;text-decoration:underline }
88-
/* TextWhitespace */ .chroma .w { color:#f8f8f8;text-decoration:underline }
1+
/* Background */
2+
.bg {
3+
background-color: light-dark(#f8f8f8, #0d1117);
4+
}
5+
6+
/* PreWrapper */
7+
.chroma {
8+
color: light-dark(#000, #e6edf3);
9+
background-color: light-dark(#f8f8f8, #0d1117);
10+
}
11+
12+
/* Other */
13+
.chroma .x {
14+
color: light-dark(#000, inherit);
15+
}
16+
17+
/* Error */
18+
.chroma .err {
19+
color: light-dark(#a40000, #f85149);
20+
}
21+
22+
/* CodeLine */
23+
.chroma .cl { }
24+
25+
/* LineLink */
26+
.chroma .lnlinks {
27+
outline: none;
28+
text-decoration: none;
29+
color: inherit;
30+
}
31+
32+
/* LineTableTD */
33+
.chroma .lntd {
34+
vertical-align: top;
35+
padding: 0;
36+
margin: 0;
37+
border: 0;
38+
}
39+
40+
/* LineTable */
41+
.chroma .lntable {
42+
border-spacing: 0;
43+
padding: 0;
44+
margin: 0;
45+
border: 0;
46+
}
47+
48+
/* LineHighlight */
49+
.chroma .hl {
50+
background-color: light-dark(#dfdfdf, #6e7681);
51+
}
52+
53+
/* LineNumbersTable */
54+
.chroma .lnt {
55+
white-space: pre;
56+
-webkit-user-select: none;
57+
user-select: none;
58+
margin-right: 0.4em;
59+
padding: 0 0.4em 0 0.4em;
60+
color: light-dark(#7f7f7f, #737679);
61+
}
62+
63+
/* LineNumbers */
64+
.chroma .ln {
65+
white-space: pre;
66+
-webkit-user-select: none;
67+
user-select: none;
68+
margin-right: 0.4em;
69+
padding: 0 0.4em 0 0.4em;
70+
color: light-dark(#7f7f7f, #6e7681);
71+
}
72+
73+
/* Line */
74+
.chroma .line {
75+
display: flex;
76+
}
77+
78+
/* Keyword */
79+
.chroma .k,
80+
.chroma .kc,
81+
.chroma .kd,
82+
.chroma .kn,
83+
.chroma .kp,
84+
.chroma .kr,
85+
.chroma .kt {
86+
color: light-dark(#204a87, #ff7b72);
87+
font-weight: bold;
88+
}
89+
90+
/* Name */
91+
.chroma .n,
92+
.chroma .nc,
93+
.chroma .no,
94+
.chroma .nf,
95+
.chroma .fm,
96+
.chroma .nn,
97+
.chroma .nx,
98+
.chroma .py,
99+
.chroma .nv,
100+
.chroma .vc,
101+
.chroma .vg,
102+
.chroma .vi,
103+
.chroma .vm {
104+
color: light-dark(#000, #79c0ff);
105+
}
106+
107+
/* NameAttribute */
108+
.chroma .na {
109+
color: light-dark(#c4a000, inherit);
110+
}
111+
112+
/* NameBuiltin */
113+
.chroma .nb {
114+
color: light-dark(#204a87, inherit);
115+
}
116+
117+
/* NameBuiltinPseudo */
118+
.chroma .bp {
119+
color: light-dark(#3465a4, inherit);
120+
}
121+
122+
/* NameClass */
123+
.chroma .nc {
124+
font-weight: light-dark(normal, bold);
125+
}
126+
127+
/* NameConstant */
128+
.chroma .no {
129+
font-weight: light-dark(normal, bold);
130+
}
131+
132+
/* NameDecorator */
133+
.chroma .nd {
134+
color: light-dark(#5c35cc, #d2a8ff);
135+
font-weight: bold;
136+
}
137+
138+
/* NameEntity */
139+
.chroma .ni {
140+
color: light-dark(#ce5c00, #ffa657);
141+
}
142+
143+
/* NameException */
144+
.chroma .ne {
145+
color: light-dark(#c00, #f0883e);
146+
font-weight: bold;
147+
}
148+
149+
/* NameLabel */
150+
.chroma .nl {
151+
color: light-dark(#f57900, #79c0ff);
152+
font-weight: light-dark(normal, bold);
153+
}
154+
155+
/* NameTag */
156+
.chroma .nt {
157+
color: light-dark(#204a87, #7ee787);
158+
font-weight: bold;
159+
}
160+
161+
/* LiteralString */
162+
.chroma .s,
163+
.chroma .sa,
164+
.chroma .sb,
165+
.chroma .sc,
166+
.chroma .dl,
167+
.chroma .sd,
168+
.chroma .s2,
169+
.chroma .se,
170+
.chroma .sh,
171+
.chroma .si,
172+
.chroma .sx,
173+
.chroma .sr,
174+
.chroma .s1,
175+
.chroma .ss {
176+
color: light-dark(#4e9a06, #a5d6ff);
177+
}
178+
179+
/* LiteralNumber */
180+
.chroma .m,
181+
.chroma .mb,
182+
.chroma .mf,
183+
.chroma .mh,
184+
.chroma .mi,
185+
.chroma .il,
186+
.chroma .mo {
187+
color: light-dark(#0000cf, #a5d6ff);
188+
font-weight: bold;
189+
}
190+
191+
/* Operator */
192+
.chroma .o,
193+
.chroma .ow {
194+
color: light-dark(#ce5c00, #ff7b72);
195+
font-weight: bold;
196+
}
197+
198+
/* Punctuation */
199+
.chroma .p {
200+
color: light-dark(#000, inherit);
201+
font-weight: bold;
202+
}
203+
204+
/* Comment */
205+
.chroma .c,
206+
.chroma .ch,
207+
.chroma .cm,
208+
.chroma .c1,
209+
.chroma .cs,
210+
.chroma .cp,
211+
.chroma .cpf {
212+
color: light-dark(#8f5902, #8b949e);
213+
font-style: italic;
214+
}
215+
216+
/* CommentSpecial */
217+
.chroma .cs,
218+
.chroma .cp,
219+
.chroma .cpf {
220+
font-weight: light-dark(normal, bold);
221+
}
222+
223+
/* GenericDeleted */
224+
.chroma .gd {
225+
color: light-dark(#a40000, #ffa198);
226+
background-color: light-dark(inherit, #490202);
227+
}
228+
229+
/* GenericEmph */
230+
.chroma .ge {
231+
color: light-dark(#000, inherit);
232+
font-style: italic;
233+
}
234+
235+
/* GenericError */
236+
.chroma .gr {
237+
color: light-dark(#ef2929, #ffa198);
238+
}
239+
240+
/* GenericHeading */
241+
.chroma .gh {
242+
color: light-dark(#000080, #79c0ff);
243+
font-weight: bold;
244+
}
245+
246+
/* GenericInserted */
247+
.chroma .gi {
248+
color: light-dark(#00a000, #56d364);
249+
background-color: light-dark(inherit, #0f5323);
250+
}
251+
252+
/* GenericOutput */
253+
.chroma .go {
254+
color: light-dark(#000, #8b949e);
255+
font-style: italic;
256+
}
257+
258+
/* GenericPrompt */
259+
.chroma .gp {
260+
color: light-dark(#8f5902, #8b949e);
261+
}
262+
263+
/* GenericStrong */
264+
.chroma .gs {
265+
color: light-dark(#000, inherit);
266+
font-weight: bold;
267+
}
268+
269+
/* GenericSubheading */
270+
.chroma .gu {
271+
color: light-dark(#800080, #79c0ff);
272+
font-weight: bold;
273+
}
274+
275+
/* GenericTraceback */
276+
.chroma .gt {
277+
color: light-dark(#a40000, #ff7b72);
278+
font-weight: bold;
279+
}
280+
281+
/* GenericUnderline */
282+
.chroma .gl {
283+
color: light-dark(#000, inherit);
284+
text-decoration: underline;
285+
}
286+
287+
/* TextWhitespace */
288+
.chroma .w {
289+
color: light-dark(#f8f8f8, #6e7681);
290+
text-decoration: underline;
291+
}

‎assets/css/v2/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ textarea:not([rows]) {
198198
--color-background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
199199
--color-foreground: light-dark(oklch(0 0 0), oklch(1 0 0));
200200
--color-shadow: 0.86 0 0;
201-
--code-color: oklch(0 0 0);
201+
--code-color: light-dark(oklch(0 0 0), oklch(1 0 0));
202202

203203
--color-footer-text: light-dark(oklch(0 0 0 / 65%), oklch(1 0 0 / 65%));
204204
--color-product-title: 0.64 0 0;

0 commit comments

Comments
 (0)