Skip to content

Commit 7f6ce7d

Browse files
GuillaumeGomezGuillaumeGomez
committed
Simplify CSS theming by setting CSS variables
1 parent a518b3a commit 7f6ce7d

File tree

4 files changed

+73
-199
lines changed

4 files changed

+73
-199
lines changed

‎src/librustdoc/html/static/css/rustdoc.css

+55
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,9 @@ body {
114114
-webkit-font-feature-settings: "kern", "liga";
115115
-moz-font-feature-settings: "kern", "liga";
116116
font-feature-settings: "kern", "liga";
117+
118+
background-color: var(--main-background-color);
119+
color: var(--main-color);
117120
}
118121

119122
h1 {
@@ -214,6 +217,26 @@ a.srclink,
214217
font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif;
215218
}
216219

220+
h1, h2, h3, h4,
221+
a#toggle-all-docs,
222+
a.anchor,
223+
.small-section-header a,
224+
#source-sidebar a,
225+
pre.rust a,
226+
.sidebar h2 a,
227+
.sidebar h3 a,
228+
.mobile-topbar h2 a,
229+
.in-band a,
230+
.search-results a,
231+
.module-item .stab,
232+
.import-item .stab,
233+
.result-name .primitive > i, .result-name .keyword > i,
234+
.content .method .where,
235+
.content .fn .where,
236+
.content .where.fmt-newline {
237+
color: var(--main-color);
238+
}
239+
217240
ol, ul {
218241
padding-left: 24px;
219242
}
@@ -391,6 +414,14 @@ nav.sub {
391414
display: none;
392415
}
393416

417+
.source .sidebar, #sidebar-toggle, #source-sidebar {
418+
background-color: var(--sidebar-background-color);
419+
}
420+
421+
#sidebar-toggle:hover {
422+
background-color: var(--sidebar-background-color-hover);
423+
}
424+
394425
.source .sidebar > *:not(#sidebar-toggle) {
395426
opacity: 0;
396427
visibility: hidden;
@@ -1003,6 +1034,11 @@ table,
10031034
top: -5px;
10041035
}
10051036

1037+
.popover, .popover::before {
1038+
background-color: var(--main-background-color);
1039+
color: var(--main-color);
1040+
}
1041+
10061042
#help-button .popover {
10071043
max-width: 600px;
10081044
}
@@ -1423,6 +1459,25 @@ pre.rust {
14231459
animation: rotating 2s linear infinite;
14241460
}
14251461

1462+
.setting-line .radio-line input:checked {
1463+
box-shadow: inset 0 0 0 3px var(--main-background-color);
1464+
background-color: var(--settings-input-color);
1465+
}
1466+
.setting-line .radio-line input:focus {
1467+
box-shadow: 0 0 1px 1px var(--settings-input-color);
1468+
}
1469+
/* In here we combine both `:focus` and `:checked` properties. */
1470+
.setting-line .radio-line input:checked:focus {
1471+
box-shadow: inset 0 0 0 3px var(--main-background-color),
1472+
0 0 2px 2px var(--settings-input-color);
1473+
}
1474+
.setting-line .radio-line input:hover {
1475+
border-color: var(--settings-input-color) !important;
1476+
}
1477+
input:checked + .slider {
1478+
background-color: var(--settings-input-color);
1479+
}
1480+
14261481
#help-button > button {
14271482
font-family: "Fira Sans", Arial, sans-serif;
14281483
text-align: center;

‎src/librustdoc/html/static/css/themes/ayu.css

+6-57
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,12 @@ Based off of the Ayu theme
33
Original by Dempfi (https://github.com/dempfi/ayu)
44
*/
55

6-
/* General structure and fonts */
7-
8-
body, .popover, .popover::before {
9-
background-color: #0f1419;
10-
color: #c5c5c5;
11-
}
12-
13-
.setting-line .radio-line input {
14-
border-color: #c5c5c5;
15-
}
16-
.setting-line .radio-line input:checked {
17-
box-shadow: inset 0 0 0 3px #0f1419;
18-
background-color: #ffb454;
19-
}
20-
.setting-line .radio-line input:focus {
21-
box-shadow: 0 0 1px 1px #ffb454;
22-
}
23-
/* In here we combine both `:focus` and `:checked` properties. */
24-
.setting-line .radio-line input:checked:focus {
25-
box-shadow: inset 0 0 0 3px 0f1419,
26-
0 0 2px 2px #ffb454;
27-
}
28-
.setting-line .radio-line input:hover {
29-
border-color: #ffb454 !important;
6+
:root {
7+
--main-background-color: #0f1419;
8+
--main-color: #c5c5c5;
9+
--settings-input-color: #ffb454;
10+
--sidebar-background-color: #14191f;
11+
--sidebar-background-color-hover: rgba(70, 70, 70, 0.33);
3012
}
3113

3214
.slider {
@@ -35,9 +17,6 @@ body, .popover, .popover::before {
3517
.slider:before {
3618
background-color: white;
3719
}
38-
input:checked + .slider {
39-
background-color: #ffb454;
40-
}
4120
input:focus + .slider {
4221
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
4322
}
@@ -125,10 +104,6 @@ pre, .rustdoc.source .example-wrap {
125104
color: #ffb44c;
126105
}
127106

128-
.source .sidebar {
129-
background-color: #14191f;
130-
}
131-
132107
.sidebar-elems .location {
133108
color: #ff7733;
134109
}
@@ -149,12 +124,6 @@ pre, .rustdoc.source .example-wrap {
149124
border-color: #5c6773;
150125
}
151126

152-
.content .method .where,
153-
.content .fn .where,
154-
.content .where.fmt-newline {
155-
color: #c5c5c5;
156-
}
157-
158127
.search-results a:hover {
159128
background-color: #777;
160129
}
@@ -229,17 +198,6 @@ a {
229198
color: #39AFD7;
230199
}
231200

232-
a#toggle-all-docs,
233-
a.anchor,
234-
.small-section-header a,
235-
#source-sidebar a,
236-
pre.rust a,
237-
.sidebar h2 a,
238-
.sidebar h3 a,
239-
.mobile-topbar h2 a,
240-
.in-band a {
241-
color: #c5c5c5;
242-
}
243201
.sidebar h2 a,
244202
.sidebar h3 a {
245203
color: white;
@@ -613,15 +571,6 @@ kbd {
613571
color: #999;
614572
}
615573

616-
#sidebar-toggle {
617-
background-color: #14191f;
618-
}
619-
#sidebar-toggle:hover {
620-
background-color: rgba(70, 70, 70, 0.33);
621-
}
622-
#source-sidebar {
623-
background-color: #14191f;
624-
}
625574
#source-sidebar > .title {
626575
color: #fff;
627576
border-bottom-color: #5c6773;

‎src/librustdoc/html/static/css/themes/dark.css

+6-70
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,9 @@
1-
body, .popover, .popover::before {
2-
background-color: #353535;
3-
color: #ddd;
4-
}
5-
6-
.setting-line .radio-line input {
7-
border-color: #ddd;
8-
}
9-
.setting-line .radio-line input:checked {
10-
box-shadow: inset 0 0 0 3px #353535;
11-
background-color: #2196f3;
12-
}
13-
.setting-line .radio-line input:focus {
14-
box-shadow: 0 0 1px 1px #2196f3;
15-
}
16-
/* In here we combine both `:focus` and `:checked` properties. */
17-
.setting-line .radio-line input:checked:focus {
18-
box-shadow: inset 0 0 0 3px #353535,
19-
0 0 2px 2px #2196f3;
20-
}
21-
.setting-line .radio-line input:hover {
22-
border-color: #2196f3 !important;
1+
:root {
2+
--main-background-color: #353535;
3+
--main-color: #ddd;
4+
--settings-input-color: #2196f3;
5+
--sidebar-background-color: #565656;
6+
--sidebar-background-color-hover: #676767;
237
}
248

259
.slider {
@@ -28,16 +12,10 @@ body, .popover, .popover::before {
2812
.slider:before {
2913
background-color: white;
3014
}
31-
input:checked + .slider {
32-
background-color: #2196F3;
33-
}
3415
input:focus + .slider {
3516
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
3617
}
3718

38-
h1, h2, h3, h4 {
39-
color: #ddd;
40-
}
4119
h1.fqn {
4220
border-bottom-color: #d2d2d2;
4321
}
@@ -94,10 +72,6 @@ pre, .rustdoc.source .example-wrap {
9472
background: #444;
9573
}
9674

97-
.source .sidebar {
98-
background-color: #565656;
99-
}
100-
10175
.line-numbers span { color: #3B91E2; }
10276
.line-numbers .line-highlighted {
10377
background-color: #0a042f !important;
@@ -111,12 +85,6 @@ pre, .rustdoc.source .example-wrap {
11185
border-color: #ddd;
11286
}
11387

114-
.content .method .where,
115-
.content .fn .where,
116-
.content .where.fmt-newline {
117-
color: #ddd;
118-
}
119-
12088
.search-results a:hover {
12189
background-color: #777;
12290
}
@@ -210,20 +178,6 @@ a {
210178
color: #D2991D;
211179
}
212180

213-
a#toggle-all-docs,
214-
a.anchor,
215-
.small-section-header a,
216-
#source-sidebar a,
217-
pre.rust a,
218-
.sidebar h2 a,
219-
.sidebar h3 a,
220-
.mobile-topbar h2 a,
221-
.in-band a {
222-
color: #ddd;
223-
}
224-
.search-results a {
225-
color: #ddd;
226-
}
227181
a.test-arrow {
228182
color: #dedede;
229183
}
@@ -257,11 +211,6 @@ details.undocumented > summary::before {
257211
border-color: #008dfd;
258212
}
259213

260-
.module-item .stab,
261-
.import-item .stab {
262-
color: #ddd;
263-
}
264-
265214
.stab.empty-impl { background: #FFF5D6; border-color: #FFC600; color: #2f2f2f; }
266215
.stab.unstable { background: #FFF5D6; border-color: #FFC600; color: #2f2f2f; }
267216
.stab.deprecated { background: #ffc4c4; border-color: #db7b7b; color: #2f2f2f; }
@@ -287,10 +236,6 @@ details.undocumented > summary::before {
287236
color: grey;
288237
}
289238

290-
.result-name .primitive > i, .result-name .keyword > i {
291-
color: #ddd;
292-
}
293-
294239
.line-numbers :target { background-color: transparent; }
295240

296241
/* Code highlighting */
@@ -484,15 +429,6 @@ kbd {
484429
color: #ccc;
485430
}
486431

487-
#sidebar-toggle {
488-
background-color: #565656;
489-
}
490-
#sidebar-toggle:hover {
491-
background-color: #676767;
492-
}
493-
#source-sidebar {
494-
background-color: #565656;
495-
}
496432
#source-sidebar > .title {
497433
border-bottom-color: #ccc;
498434
}

0 commit comments

Comments
 (0)