Skip to content

Commit 3044ece

Browse files
tchebbtchebb
committed
Add a dark theme for code blocks
Now that code highlighting is just a normal stylesheet, it's easy to add a separate set of dark-mode rules. Do so and update the documentation. Fixes #24
1 parent 4a81476 commit 3044ece

File tree

3 files changed

+127
-4
lines changed

3 files changed

+127
-4
lines changed

‎_config.yml‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -156,13 +156,20 @@ yat:
156156
# use. This setting affects both Markdown code blocks and Liquid `highlight`
157157
# blocks. You can set it to `none` to disable highlighting.
158158
#
159-
# By default, we highlight code with Rouge's "github.light" theme. If you want
160-
# to change that, you can override `assets/css/code-highlight-rouge.css` with a
161-
# different stylesheet generated with Rouge's `rougify` command. If you do so,
162-
# you must set the CSS scope to `.highlight pre` for proper rendering:
159+
# By default, we highlight code with Rouge's "github.light" and `github.dark`
160+
# themes for light and dark mode, respectively. If you want to change that, you
161+
# can override `assets/css/code-highlight-rouge.css` with a different
162+
# stylesheet generated with Rouge's `rougify` command. If you do so, you must
163+
# set the CSS scope to `.highlight pre` for your light-mode theme:
163164
#
164165
# $ mkdir -p assets/css
165166
# $ bundle exec rougify style --scope '.highlight pre' <THEME> >assets/css/code-highlight-rouge.css
167+
#
168+
# ...and to `html[data-theme="dark"] .highlight pre` for your dark-mode theme.
169+
# A dark-mode theme is optional, but if you want one just append its stylesheet
170+
# to the same CSS file (note the >>):
171+
#
172+
# $ bundle exec rougify style --scope 'html[data-theme="dark"] .highlight pre' <DARK_THEME> >>assets/css/code-highlight-rouge.css
166173
# highlighter: rouge
167174

168175
# If you want to link only specific pages in your header, uncomment

‎_sass/yat/_dark.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ html[data-theme="dark"] {
3030
background-color: #454545;
3131
}
3232

33+
pre {
34+
background-color: #222;
35+
}
36+
3337
blockquote {
3438
border-left: 4px solid #484848;
3539
}

‎assets/css/code-highlight-rouge.css‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,3 +110,115 @@
110110
color: #24292f;
111111
font-weight: bold;
112112
}
113+
html[data-theme="dark"] .highlight pre table td { padding: 5px; }
114+
html[data-theme="dark"] .highlight pre table pre { margin: 0; }
115+
html[data-theme="dark"] .highlight pre, html[data-theme="dark"] .highlight pre .w {
116+
color: #c9d1d9;
117+
background-color: #161b22;
118+
}
119+
html[data-theme="dark"] .highlight pre .k, html[data-theme="dark"] .highlight pre .kd, html[data-theme="dark"] .highlight pre .kn, html[data-theme="dark"] .highlight pre .kp, html[data-theme="dark"] .highlight pre .kr, html[data-theme="dark"] .highlight pre .kt, html[data-theme="dark"] .highlight pre .kv {
120+
color: #ff7b72;
121+
}
122+
html[data-theme="dark"] .highlight pre .gr {
123+
color: #f0f6fc;
124+
}
125+
html[data-theme="dark"] .highlight pre .gd {
126+
color: #ffdcd7;
127+
background-color: #67060c;
128+
}
129+
html[data-theme="dark"] .highlight pre .nb {
130+
color: #ffa657;
131+
}
132+
html[data-theme="dark"] .highlight pre .nc {
133+
color: #ffa657;
134+
}
135+
html[data-theme="dark"] .highlight pre .no {
136+
color: #ffa657;
137+
}
138+
html[data-theme="dark"] .highlight pre .nn {
139+
color: #ffa657;
140+
}
141+
html[data-theme="dark"] .highlight pre .sr {
142+
color: #7ee787;
143+
}
144+
html[data-theme="dark"] .highlight pre .na {
145+
color: #7ee787;
146+
}
147+
html[data-theme="dark"] .highlight pre .nt {
148+
color: #7ee787;
149+
}
150+
html[data-theme="dark"] .highlight pre .gi {
151+
color: #aff5b4;
152+
background-color: #033a16;
153+
}
154+
html[data-theme="dark"] .highlight pre .kc {
155+
color: #79c0ff;
156+
}
157+
html[data-theme="dark"] .highlight pre .l, html[data-theme="dark"] .highlight pre .ld, html[data-theme="dark"] .highlight pre .m, html[data-theme="dark"] .highlight pre .mb, html[data-theme="dark"] .highlight pre .mf, html[data-theme="dark"] .highlight pre .mh, html[data-theme="dark"] .highlight pre .mi, html[data-theme="dark"] .highlight pre .il, html[data-theme="dark"] .highlight pre .mo, html[data-theme="dark"] .highlight pre .mx {
158+
color: #79c0ff;
159+
}
160+
html[data-theme="dark"] .highlight pre .sb {
161+
color: #79c0ff;
162+
}
163+
html[data-theme="dark"] .highlight pre .bp {
164+
color: #79c0ff;
165+
}
166+
html[data-theme="dark"] .highlight pre .ne {
167+
color: #79c0ff;
168+
}
169+
html[data-theme="dark"] .highlight pre .nl {
170+
color: #79c0ff;
171+
}
172+
html[data-theme="dark"] .highlight pre .py {
173+
color: #79c0ff;
174+
}
175+
html[data-theme="dark"] .highlight pre .nv, html[data-theme="dark"] .highlight pre .vc, html[data-theme="dark"] .highlight pre .vg, html[data-theme="dark"] .highlight pre .vi, html[data-theme="dark"] .highlight pre .vm {
176+
color: #79c0ff;
177+
}
178+
html[data-theme="dark"] .highlight pre .o, html[data-theme="dark"] .highlight pre .ow {
179+
color: #79c0ff;
180+
}
181+
html[data-theme="dark"] .highlight pre .gh {
182+
color: #1f6feb;
183+
font-weight: bold;
184+
}
185+
html[data-theme="dark"] .highlight pre .gu {
186+
color: #1f6feb;
187+
font-weight: bold;
188+
}
189+
html[data-theme="dark"] .highlight pre .s, html[data-theme="dark"] .highlight pre .sa, html[data-theme="dark"] .highlight pre .sc, html[data-theme="dark"] .highlight pre .dl, html[data-theme="dark"] .highlight pre .sd, html[data-theme="dark"] .highlight pre .s2, html[data-theme="dark"] .highlight pre .se, html[data-theme="dark"] .highlight pre .sh, html[data-theme="dark"] .highlight pre .sx, html[data-theme="dark"] .highlight pre .s1, html[data-theme="dark"] .highlight pre .ss {
190+
color: #a5d6ff;
191+
}
192+
html[data-theme="dark"] .highlight pre .nd {
193+
color: #d2a8ff;
194+
}
195+
html[data-theme="dark"] .highlight pre .nf, html[data-theme="dark"] .highlight pre .fm {
196+
color: #d2a8ff;
197+
}
198+
html[data-theme="dark"] .highlight pre .err {
199+
color: #f0f6fc;
200+
background-color: #8e1519;
201+
}
202+
html[data-theme="dark"] .highlight pre .c, html[data-theme="dark"] .highlight pre .ch, html[data-theme="dark"] .highlight pre .cd, html[data-theme="dark"] .highlight pre .cm, html[data-theme="dark"] .highlight pre .cp, html[data-theme="dark"] .highlight pre .cpf, html[data-theme="dark"] .highlight pre .c1, html[data-theme="dark"] .highlight pre .cs {
203+
color: #8b949e;
204+
}
205+
html[data-theme="dark"] .highlight pre .gl {
206+
color: #8b949e;
207+
}
208+
html[data-theme="dark"] .highlight pre .gt {
209+
color: #8b949e;
210+
}
211+
html[data-theme="dark"] .highlight pre .ni {
212+
color: #c9d1d9;
213+
}
214+
html[data-theme="dark"] .highlight pre .si {
215+
color: #c9d1d9;
216+
}
217+
html[data-theme="dark"] .highlight pre .ge {
218+
color: #c9d1d9;
219+
font-style: italic;
220+
}
221+
html[data-theme="dark"] .highlight pre .gs {
222+
color: #c9d1d9;
223+
font-weight: bold;
224+
}

0 commit comments

Comments
 (0)