Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 003b2bc

Browse files
committedJan 21, 2018
Add possibility to have multiple themes
1 parent 3001ab1 commit 003b2bc

File tree

6 files changed

+537
-8
lines changed

6 files changed

+537
-8
lines changed
 

‎src/librustdoc/html/layout.rs

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ r##"<!DOCTYPE html>
4747
<title>{title}</title>
4848
4949
<link rel="stylesheet" type="text/css" href="{root_path}normalize.css">
50-
<link rel="stylesheet" type="text/css" href="{root_path}rustdoc.css">
51-
<link rel="stylesheet" type="text/css" href="{root_path}main.css">
50+
<link rel="stylesheet" type="text/css" href="{root_path}rustdoc.css" id="mainThemeStyle">
51+
<link rel="stylesheet" type="text/css" href="{root_path}main.css" id="themeStyle">
5252
{css_extension}
5353
5454
{favicon}
@@ -70,6 +70,10 @@ r##"<!DOCTYPE html>
7070
{sidebar}
7171
</nav>
7272
73+
<div id="theme-picker">&#x1f58c;
74+
<div id="theme-choices"></div>
75+
</div>
76+
<script src="{root_path}theme.js"></script>
7377
<nav class="sub">
7478
<form class="search-form js-only">
7579
<div class="search-container">

‎src/librustdoc/html/render.rs

Lines changed: 78 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,17 @@ impl Error {
219219
}
220220
}
221221

222+
macro_rules! try_none {
223+
($e:expr, $file:expr) => ({
224+
use std::io;
225+
match $e {
226+
Some(e) => e,
227+
None => return Err(Error::new(io::Error::new(io::ErrorKind::Other, "not found"),
228+
$file))
229+
}
230+
})
231+
}
232+
222233
macro_rules! try_err {
223234
($e:expr, $file:expr) => ({
224235
match $e {
@@ -859,12 +870,75 @@ fn write_shared(cx: &Context,
859870
// Add all the static files. These may already exist, but we just
860871
// overwrite them anyway to make sure that they're fresh and up-to-date.
861872

862-
write(cx.dst.join("main.js"),
863-
include_bytes!("static/main.js"))?;
864873
write(cx.dst.join("rustdoc.css"),
865874
include_bytes!("static/rustdoc.css"))?;
866-
write(cx.dst.join("main.css"),
867-
include_bytes!("static/styles/main.css"))?;
875+
let path = cx.shared.src_root.join("../librustdoc/html/static/themes");
876+
let mut themes: Vec<String> = Vec::new();
877+
for entry in try_err!(fs::read_dir(path.clone()), &path) {
878+
let entry = try_err!(entry, &path);
879+
let mut content = Vec::with_capacity(100000);
880+
881+
let mut f = try_err!(File::open(entry.path()), &entry.path());
882+
try_err!(f.read_to_end(&mut content), &entry.path());
883+
write(cx.dst.join(entry.file_name()), content.as_slice())?;
884+
themes.push(try_none!(
885+
try_none!(entry.path().file_stem(), &entry.path()).to_str(),
886+
&entry.path()).to_owned());
887+
}
888+
themes.sort();
889+
// To avoid theme switch latencies as much as possible, we put everything theme related
890+
// at the beginning of the html files into another js file.
891+
write(cx.dst.join("theme.js"), format!(
892+
r#"var themes = document.getElementById("theme-choices");
893+
var themePicker = document.getElementById("theme-picker");
894+
themePicker.onclick = function() {{
895+
if (themes.style.display === "block") {{
896+
themes.style.display = "none";
897+
themePicker.style.borderBottomRightRadius = "3px";
898+
themePicker.style.borderBottomLeftRadius = "3px";
899+
}} else {{
900+
themes.style.display = "block";
901+
themePicker.style.borderBottomRightRadius = "0";
902+
themePicker.style.borderBottomLeftRadius = "0";
903+
}}
904+
}};
905+
var currentTheme = document.getElementById("themeStyle");
906+
var mainTheme = document.getElementById("mainThemeStyle");
907+
[{}].forEach(function(item) {{
908+
var div = document.createElement('div');
909+
div.innerHTML = item;
910+
div.onclick = function(el) {{
911+
switchTheme(currentTheme, mainTheme, item);
912+
}};
913+
themes.appendChild(div);
914+
}});
915+
916+
function updateLocalStorage(theme) {{
917+
if (typeof(Storage) !== "undefined") {{
918+
localStorage.theme = theme;
919+
}} else {{
920+
// No Web Storage support so we do nothing
921+
}}
922+
}}
923+
function switchTheme(styleElem, mainStyleElem, newTheme) {{
924+
styleElem.href = mainStyleElem.href.replace("rustdoc.css", newTheme + ".css");
925+
updateLocalStorage(newTheme);
926+
}}
927+
function getCurrentTheme() {{
928+
if (typeof(Storage) !== "undefined" && localStorage.theme !== undefined) {{
929+
return localStorage.theme;
930+
}}
931+
return "main";
932+
}}
933+
934+
switchTheme(currentTheme, mainTheme, getCurrentTheme());
935+
"#, themes.iter()
936+
.map(|s| format!("\"{}\"", s))
937+
.collect::<Vec<String>>()
938+
.join(",")).as_bytes())?;
939+
940+
write(cx.dst.join("main.js"), include_bytes!("static/main.js"))?;
941+
868942
if let Some(ref css) = cx.shared.css_file_extension {
869943
let out = cx.dst.join("theme.css");
870944
try_err!(fs::copy(css, out), css);

‎src/librustdoc/html/static/main.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,10 @@
122122
}
123123
}
124124
document.getElementsByTagName("body")[0].style.marginTop = '45px';
125+
var themePicker = document.getElementById("theme-picker");
126+
if (themePicker) {
127+
themePicker.style.position = "fixed";
128+
}
125129
}
126130

127131
function hideSidebar() {
@@ -136,6 +140,10 @@
136140
filler.remove();
137141
}
138142
document.getElementsByTagName("body")[0].style.marginTop = '';
143+
var themePicker = document.getElementById("theme-picker");
144+
if (themePicker) {
145+
themePicker.style.position = "absolute";
146+
}
139147
}
140148

141149
// used for special search precedence
@@ -1532,7 +1540,9 @@
15321540
ul.appendChild(li);
15331541
}
15341542
div.appendChild(ul);
1535-
sidebar.appendChild(div);
1543+
if (sidebar) {
1544+
sidebar.appendChild(div);
1545+
}
15361546
}
15371547

15381548
block("primitive", "Primitive Types");

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

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,8 @@ ul.item-list > li > .out-of-band {
360360
}
361361

362362
h4 > code, h3 > code, .invisible > code {
363-
position: inherit;
363+
max-width: calc(100% - 41px);
364+
display: block;
364365
}
365366

366367
.in-band, code {
@@ -376,6 +377,7 @@ h4 > code, h3 > code, .invisible > code {
376377
margin: 0px;
377378
padding: 0px;
378379
display: inline-block;
380+
max-width: calc(100% - 43px);
379381
}
380382

381383
.in-band > code {
@@ -1140,3 +1142,37 @@ kbd {
11401142
border-radius: 3px;
11411143
box-shadow: inset 0 -1px 0;
11421144
}
1145+
1146+
#theme-picker {
1147+
position: absolute;
1148+
left: 211px;
1149+
top: 17px;
1150+
padding: 4px;
1151+
border: 1px solid;
1152+
border-radius: 3px;
1153+
cursor: pointer;
1154+
}
1155+
1156+
#theme-choices {
1157+
display: none;
1158+
position: absolute;
1159+
left: -1px;
1160+
top: 30px;
1161+
border: 1px solid;
1162+
border-radius: 3px;
1163+
z-index: 1;
1164+
}
1165+
1166+
#theme-choices > div {
1167+
border-top: 1px solid;
1168+
padding: 4px;
1169+
text-align: center;
1170+
}
1171+
1172+
@media (max-width: 700px) {
1173+
#theme-picker {
1174+
left: 109px;
1175+
top: 7px;
1176+
z-index: 1;
1177+
}
1178+
}
Lines changed: 382 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,382 @@
1+
/**
2+
* Copyright 2015 The Rust Project Developers. See the COPYRIGHT
3+
* file at the top-level directory of this distribution and at
4+
* http://rust-lang.org/COPYRIGHT.
5+
*
6+
* Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
7+
* http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
8+
* <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
9+
* option. This file may not be copied, modified, or distributed
10+
* except according to those terms.
11+
*/
12+
13+
body {
14+
background-color: #353535;
15+
color: #ddd;
16+
}
17+
18+
h1, h2, h3:not(.impl):not(.method):not(.type):not(.tymethod), h4:not(.method):not(.type):not(.tymethod) {
19+
color: #ddd;
20+
}
21+
h1.fqn {
22+
border-bottom-color: #d2d2d2;
23+
}
24+
h2, h3:not(.impl):not(.method):not(.type):not(.tymethod), h4:not(.method):not(.type):not(.tymethod) {
25+
border-bottom-color: #d2d2d2;
26+
}
27+
28+
.in-band {
29+
background-color: #353535;
30+
}
31+
32+
.invisible {
33+
background: rgba(0, 0, 0, 0);
34+
}
35+
36+
.docblock code, .docblock-short code {
37+
background-color: #2A2A2A;
38+
}
39+
pre {
40+
background-color: #2A2A2A;
41+
}
42+
43+
.sidebar {
44+
background-color: #505050;
45+
}
46+
47+
.sidebar .current {
48+
background-color: #333;
49+
}
50+
51+
.source .sidebar {
52+
background-color: #353535;
53+
}
54+
55+
.sidebar .location {
56+
border-color: #fff;
57+
background: #575757;
58+
color: #DDD;
59+
}
60+
61+
.sidebar .version {
62+
border-bottom-color: #DDD;
63+
}
64+
65+
.sidebar-title {
66+
border-top-color: #777;
67+
border-bottom-color: #777;
68+
}
69+
70+
.block a:hover {
71+
background: #444;
72+
}
73+
74+
.line-numbers span { color: #3B91E2; }
75+
.line-numbers .line-highlighted {
76+
background-color: #0a042f !important;
77+
}
78+
79+
.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5 {
80+
border-bottom-color: #DDD;
81+
}
82+
83+
.docblock table {
84+
border-color: #ddd;
85+
}
86+
87+
.docblock table td {
88+
border-top-color: #ddd;
89+
border-bottom-color: #ddd;
90+
}
91+
92+
.docblock table th {
93+
border-top-color: #ddd;
94+
border-bottom-color: #ddd;
95+
}
96+
97+
:target { background: #494a3d; }
98+
99+
:target > .in-band {
100+
background: #494a3d;
101+
}
102+
103+
.content .method .where,
104+
.content .fn .where,
105+
.content .where.fmt-newline {
106+
color: #ddd;
107+
}
108+
109+
.content .highlighted {
110+
color: #eee !important;
111+
background-color: #333;
112+
}
113+
.content .highlighted a, .content .highlighted span { color: #eee !important; }
114+
.content .highlighted.trait { background-color: #013191; }
115+
.content .highlighted.mod { background-color: #803a1b; }
116+
.content .highlighted.externcrate { background-color: #afc6e4; }
117+
.content .highlighted.enum { background-color: #5b4e68; }
118+
.content .highlighted.struct { background-color: #194e9f; }
119+
.content .highlighted.fn,
120+
.content .highlighted.method,
121+
.content .highlighted.tymethod { background-color: #4950ed; }
122+
.content .highlighted.type { background-color: #38902c; }
123+
.content .highlighted.foreigntype { background-color: #f5c4ff; }
124+
.content .highlighted.macro { background-color: #8ce488; }
125+
.content .highlighted.constant,
126+
.content .highlighted.static { background-color: #c3e0ff; }
127+
.content .highlighted.primitive { background-color: #9aecff; }
128+
129+
.content span.enum, .content a.enum, .block a.current.enum { color: #508157; }
130+
.content span.struct, .content a.struct, .block a.current.struct { color: #df3600; }
131+
.content span.type, .content a.type, .block a.current.type { color: #ba5d00; }
132+
.content span.foreigntype, .content a.foreigntype, .block a.current.foreigntype { color: #cd00e2; }
133+
.content span.macro, .content a.macro, .block a.current.macro { color: #068000; }
134+
.content span.union, .content a.union, .block a.current.union { color: #767b27; }
135+
.content span.constant, .content a.constant, .block a.current.constant,
136+
.content span.static, .content a.static, .block a.current.static { color: #546e8a; }
137+
.content span.primitive, .content a.primitive, .block a.current.primitive { color: #2c8093; }
138+
.content span.externcrate,
139+
.content span.mod, .content a.mod, .block a.current.mod { color: #967F00; }
140+
.content span.trait, .content a.trait, .block a.current.trait { color: #7c5af3; }
141+
.content span.fn, .content a.fn, .block a.current.fn,
142+
.content span.method, .content a.method, .block a.current.method,
143+
.content span.tymethod, .content a.tymethod, .block a.current.tymethod,
144+
.content .fnname{ color: #2BAB63; }
145+
146+
pre.rust .comment { color: #4D4D4C; }
147+
pre.rust .doccomment { color: #8E908C; }
148+
149+
nav {
150+
border-bottom-color: #4e4e4e;
151+
}
152+
nav.main .current {
153+
border-top-color: #eee;
154+
border-bottom-color: #eee;
155+
}
156+
nav.main .separator {
157+
border-color: #eee;
158+
}
159+
a {
160+
color: #ddd;
161+
}
162+
163+
.docblock a, .docblock-short a, .stability a {
164+
color: #D2991D;
165+
}
166+
167+
a.test-arrow {
168+
color: #dedede;
169+
}
170+
171+
.collapse-toggle {
172+
color: #999;
173+
}
174+
175+
.search-input {
176+
color: #111;
177+
box-shadow: 0 0 0 1px #000, 0 0 0 2px transparent;
178+
background-color: #f0f0f0;
179+
}
180+
181+
.search-input:focus {
182+
border-color: #008dfd;
183+
}
184+
185+
.stab.unstable { background: #FFF5D6; border-color: #FFC600; color: #404040; }
186+
.stab.deprecated { background: #F3DFFF; border-color: #7F0087; color: #404040; }
187+
.stab.portability { background: #C4ECFF; border-color: #7BA5DB; color: #404040; }
188+
189+
.module-item .stab {
190+
color: #ddd;
191+
}
192+
193+
#help > div {
194+
background: #e9e9e9;
195+
border-color: #bfbfbf;
196+
}
197+
198+
#help dt {
199+
border-color: #bfbfbf;
200+
background: #fff;
201+
}
202+
203+
.since {
204+
color: grey;
205+
}
206+
207+
tr.result span.primitive::after {
208+
color: black;
209+
}
210+
211+
.line-numbers :target { background-color: transparent; }
212+
213+
/* Code highlighting */
214+
pre.rust .kw { color: #8959A8; }
215+
pre.rust .kw-2, pre.rust .prelude-ty { color: #4271AE; }
216+
pre.rust .number, pre.rust .string { color: #718C00; }
217+
pre.rust .self, pre.rust .bool-val, pre.rust .prelude-val,
218+
pre.rust .attribute, pre.rust .attribute .ident { color: #C82829; }
219+
pre.rust .macro, pre.rust .macro-nonterminal { color: #3E999F; }
220+
pre.rust .lifetime { color: #B76514; }
221+
pre.rust .question-mark {
222+
color: #ff9011;
223+
}
224+
225+
a.test-arrow {
226+
background-color: rgba(78, 139, 202, 0.2);
227+
}
228+
229+
a.test-arrow:hover{
230+
background-color: #4e8bca;
231+
}
232+
233+
.toggle-label {
234+
color: #999;
235+
}
236+
237+
:target > code {
238+
background: #FDFFD3;
239+
}
240+
241+
pre.compile_fail {
242+
border-left: 2px solid rgba(255,0,0,.6);
243+
}
244+
245+
pre.compile_fail:hover, .information:hover + pre.compile_fail {
246+
border-left: 2px solid #f00;
247+
}
248+
249+
pre.ignore {
250+
border-left: 2px solid rgba(255,142,0,.6);
251+
}
252+
253+
pre.ignore:hover, .information:hover + pre.ignore {
254+
border-left: 2px solid #ff9200;
255+
}
256+
257+
.tooltip.compile_fail {
258+
color: rgba(255,0,0,.6);
259+
}
260+
261+
.information > .compile_fail:hover {
262+
color: #f00;
263+
}
264+
265+
.tooltip.ignore {
266+
color: rgba(255,142,0,.6);
267+
}
268+
269+
.information > .ignore:hover {
270+
color: rgba(255,142,0,1);
271+
}
272+
273+
.search-failed > a {
274+
color: #0089ff;
275+
}
276+
277+
.tooltip .tooltiptext {
278+
background-color: black;
279+
color: #fff;
280+
}
281+
282+
.tooltip .tooltiptext::after {
283+
border-color: transparent black transparent transparent;
284+
}
285+
286+
.important-traits .tooltip .tooltiptext {
287+
background-color: white;
288+
color: black;
289+
border-color: black;
290+
}
291+
292+
#titles > div {
293+
border-bottom-color: #ccc;
294+
}
295+
296+
#titles > div.selected {
297+
border-bottom-color: #0078ee;
298+
}
299+
300+
#titles > div:hover {
301+
border-bottom-color: #0089ff;
302+
}
303+
304+
#titles > div > div.count {
305+
color: #888;
306+
}
307+
308+
.modal {
309+
background-color: rgba(0,0,0,0.3);
310+
}
311+
312+
.modal-content {
313+
background-color: #272727;
314+
border-color: #999;
315+
}
316+
317+
.modal-content > .close {
318+
background-color: #272727;
319+
border-color: #999;
320+
}
321+
322+
.modal-content > .close:hover {
323+
background-color: #ff1f1f;
324+
color: white;
325+
}
326+
327+
.modal-content > .whiter {
328+
background-color: #272727;
329+
}
330+
331+
.modal-content > .close:hover + .whiter {
332+
background-color: #ff1f1f;
333+
}
334+
335+
@media (max-width: 700px) {
336+
.sidebar-menu {
337+
background-color: #505050;
338+
border-bottom-color: #e0e0e0;
339+
border-right-color: #e0e0e0;
340+
}
341+
342+
.sidebar-elems {
343+
background-color: #505050;
344+
border-right-color: #000;
345+
}
346+
347+
#sidebar-filler {
348+
background-color: #505050;
349+
border-bottom-color: #e0e0e0;
350+
}
351+
}
352+
353+
kbd {
354+
color: #444d56;
355+
background-color: #fafbfc;
356+
border-color: #d1d5da;
357+
border-bottom-color: #c6cbd1;
358+
box-shadow-color: #c6cbd1;
359+
}
360+
361+
#theme-picker {
362+
border-color: #e0e0e0;
363+
}
364+
365+
#theme-choices {
366+
border-color: #e0e0e0;
367+
background-color: #353535;
368+
}
369+
370+
#theme-choices > div {
371+
border-top: #e0e0e0;
372+
}
373+
374+
#theme-choices > div:hover {
375+
background-color: #444;
376+
}
377+
378+
@media (max-width: 700px) {
379+
#theme-picker {
380+
background: #353535;
381+
}
382+
}

‎src/librustdoc/html/static/styles/main.css renamed to ‎src/librustdoc/html/static/themes/main.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -351,3 +351,26 @@ kbd {
351351
border-bottom-color: #c6cbd1;
352352
box-shadow-color: #c6cbd1;
353353
}
354+
355+
#theme-picker {
356+
border-color: #e0e0e0;
357+
}
358+
359+
#theme-choices {
360+
border-color: #ccc;
361+
background-color: #fff;
362+
}
363+
364+
#theme-choices > div {
365+
border-top: #e0e0e0;
366+
}
367+
368+
#theme-choices > div:hover {
369+
background-color: #eee;
370+
}
371+
372+
@media (max-width: 700px) {
373+
#theme-picker {
374+
background: #fff;
375+
}
376+
}

0 commit comments

Comments
 (0)
Please sign in to comment.