Skip to content

Commit 3b30cce

Browse files
GuillaumeGomezGuillaumeGomez
authoredJul 13, 2022
Rollup merge of #99152 - GuillaumeGomez:css-theme-var, r=jsha
Use CSS variables to handle theming (part 2) Follow-up of #98460. As usual, there shouldn't be any UI change. You can test it [here](https://rustdoc.crud.net/imperio/css-theme-var/bar/index.html). r? `@jsha`
·
1.86.01.64.0
2 parents 41eb8dd + 20b5c73 commit 3b30cce

File tree

4 files changed

+45
-163
lines changed

4 files changed

+45
-163
lines changed
 

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

+29
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,10 @@ h1, h2, h3, h4 {
141141
h1.fqn {
142142
margin: 0;
143143
padding: 0;
144+
border-bottom-color: var(--headings-border-bottom-color);
145+
}
146+
h2, h3, h4 {
147+
border-bottom-color: var(--headings-border-bottom-color);
144148
}
145149
.main-heading {
146150
display: flex;
@@ -377,6 +381,10 @@ nav.sub {
377381
object-fit: contain;
378382
}
379383

384+
.sidebar, .mobile-topbar, .sidebar-menu-toggle {
385+
background-color: var(--sidebar-background-color);
386+
}
387+
380388
.sidebar {
381389
font-size: 0.875rem;
382390
width: 250px;
@@ -443,9 +451,11 @@ nav.sub {
443451
/* Improve the scrollbar display on firefox */
444452
* {
445453
scrollbar-width: initial;
454+
scrollbar-color: var(--scrollbar-color);
446455
}
447456
.sidebar {
448457
scrollbar-width: thin;
458+
scrollbar-color: var(--scrollbar-color);
449459
}
450460

451461
/* Improve the scrollbar display on webkit-based browsers */
@@ -457,6 +467,13 @@ nav.sub {
457467
}
458468
::-webkit-scrollbar-track {
459469
-webkit-box-shadow: inset 0;
470+
background-color: var(--scrollbar-track-background-color);
471+
}
472+
.sidebar::-webkit-scrollbar-track {
473+
background-color: var(--scrollbar-track-background-color);
474+
}
475+
::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
476+
background-color: var(--scrollbar-thumb-background-color);
460477
}
461478

462479
/* Everything else */
@@ -637,6 +654,9 @@ h2.location a {
637654

638655
.docblock h5 { font-size: 1rem; }
639656
.docblock h6 { font-size: 0.875rem; }
657+
.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5, .docblock h6 {
658+
border-bottom-color: var(--headings-border-bottom-color);
659+
}
640660

641661
.docblock {
642662
margin-left: 24px;
@@ -672,6 +692,11 @@ h2.location a {
672692
display: inline-block;
673693
}
674694

695+
.docblock code, .docblock-short code,
696+
pre, .rustdoc.source .example-wrap {
697+
background-color: var(--code-block-background-color);
698+
}
699+
675700
#main-content {
676701
position: relative;
677702
}
@@ -1914,6 +1939,10 @@ in storage.js plus the media query with (min-width: 701px)
19141939
border: none;
19151940
}
19161941

1942+
.sidebar-elems {
1943+
background-color: var(--sidebar-background-color);
1944+
}
1945+
19171946
.source nav:not(.sidebar).sub {
19181947
margin-left: 32px;
19191948
}

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

+5-53
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ Original by Dempfi (https://github.com/dempfi/ayu)
99
--settings-input-color: #ffb454;
1010
--sidebar-background-color: #14191f;
1111
--sidebar-background-color-hover: rgba(70, 70, 70, 0.33);
12+
--code-block-background-color: #191f26;
13+
--scrollbar-track-background-color: transparent;
14+
--scrollbar-thumb-background-color: #5c6773;
15+
--scrollbar-color: #5c6773 #24292f;
16+
--headings-border-bottom-color: #5c6773;
1217
}
1318

1419
.slider {
@@ -24,15 +29,9 @@ input:focus + .slider {
2429
h1, h2, h3, h4 {
2530
color: white;
2631
}
27-
h1.fqn {
28-
border-bottom-color: #5c6773;
29-
}
3032
h1.fqn a {
3133
color: #fff;
3234
}
33-
h2, h3, h4 {
34-
border-bottom-color: #5c6773;
35-
}
3635
h4 {
3736
border: none;
3837
}
@@ -56,16 +55,8 @@ span code {
5655
.docblock a > code {
5756
color: #39AFD7 !important;
5857
}
59-
.docblock code, .docblock-short code {
60-
background-color: #191f26;
61-
}
6258
pre, .rustdoc.source .example-wrap {
6359
color: #e6e1cf;
64-
background-color: #191f26;
65-
}
66-
67-
.sidebar, .mobile-topbar, .sidebar-menu-toggle {
68-
background-color: #14191f;
6960
}
7061

7162
.rust-logo {
@@ -75,29 +66,6 @@ pre, .rustdoc.source .example-wrap {
7566
drop-shadow(0 -1px 0 #fff);
7667
}
7768

78-
/* Improve the scrollbar display on firefox */
79-
* {
80-
scrollbar-color: #5c6773 #24292f;
81-
}
82-
83-
.sidebar {
84-
scrollbar-color: #5c6773 #24292f;
85-
}
86-
87-
/* Improve the scrollbar display on webkit-based browsers */
88-
::-webkit-scrollbar-track {
89-
background-color: transparent;
90-
}
91-
::-webkit-scrollbar-thumb {
92-
background-color: #5c6773;
93-
}
94-
.sidebar::-webkit-scrollbar-track {
95-
background-color: transparent;
96-
}
97-
.sidebar::-webkit-scrollbar-thumb {
98-
background-color: #5c6773;
99-
}
100-
10169
.sidebar .current,
10270
.sidebar a:hover {
10371
background-color: transparent;
@@ -116,10 +84,6 @@ pre, .rustdoc.source .example-wrap {
11684
border-right: 1px solid #ffb44c;
11785
}
11886

119-
.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5, .docblock h6 {
120-
border-bottom-color: #5c6773;
121-
}
122-
12387
.docblock table td, .docblock table th {
12488
border-color: #5c6773;
12589
}
@@ -496,21 +460,9 @@ a.result-keyword:focus {}
496460
.sidebar a.current.keyword {}
497461

498462
@media (max-width: 700px) {
499-
.sidebar-menu {
500-
background-color: #14191f;
501-
border-bottom-color: #5c6773;
502-
border-right-color: #5c6773;
503-
}
504-
505463
.sidebar-elems {
506-
background-color: #14191f;
507464
border-right-color: #5c6773;
508465
}
509-
510-
#sidebar-filler {
511-
background-color: #14191f;
512-
border-bottom-color: #5c6773;
513-
}
514466
}
515467

516468
kbd {

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

+6-53
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
--main-background-color: #353535;
33
--main-color: #ddd;
44
--settings-input-color: #2196f3;
5-
--sidebar-background-color: #565656;
5+
--sidebar-background-color: #505050;
66
--sidebar-background-color-hover: #676767;
7+
--code-block-background-color: #2A2A2A;
8+
--scrollbar-track-background-color: #717171;
9+
--scrollbar-thumb-background-color: rgba(32, 34, 37, .6);
10+
--scrollbar-color: rgba(32,34,37,.6) #5a5a5a;
11+
--headings-border-bottom-color: #d2d2d2;
712
}
813

914
.slider {
@@ -16,57 +21,17 @@ input:focus + .slider {
1621
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
1722
}
1823

19-
h1.fqn {
20-
border-bottom-color: #d2d2d2;
21-
}
22-
h2, h3, h4 {
23-
border-bottom-color: #d2d2d2;
24-
}
25-
2624
.in-band {
2725
background-color: #353535;
2826
}
2927

30-
.docblock code, .docblock-short code {
31-
background-color: #2A2A2A;
32-
}
33-
pre, .rustdoc.source .example-wrap {
34-
background-color: #2A2A2A;
35-
}
36-
37-
.sidebar, .mobile-topbar, .sidebar-menu-toggle {
38-
background-color: #505050;
39-
}
40-
4128
.rust-logo {
4229
filter: drop-shadow(1px 0 0px #fff)
4330
drop-shadow(0 1px 0 #fff)
4431
drop-shadow(-1px 0 0 #fff)
4532
drop-shadow(0 -1px 0 #fff)
4633
}
4734

48-
/* Improve the scrollbar display on firefox */
49-
* {
50-
scrollbar-color: rgb(64, 65, 67) #717171;
51-
}
52-
.sidebar {
53-
scrollbar-color: rgba(32,34,37,.6) #5a5a5a;
54-
}
55-
56-
/* Improve the scrollbar display on webkit-based browsers */
57-
::-webkit-scrollbar-track {
58-
background-color: #717171;
59-
}
60-
::-webkit-scrollbar-thumb {
61-
background-color: rgba(32, 34, 37, .6);
62-
}
63-
.sidebar::-webkit-scrollbar-track {
64-
background-color: #717171;
65-
}
66-
.sidebar::-webkit-scrollbar-thumb {
67-
background-color: rgba(32, 34, 37, .6);
68-
}
69-
7035
.sidebar .current,
7136
.sidebar a:hover {
7237
background: #444;
@@ -356,21 +321,9 @@ pre.ignore:hover, .information:hover + pre.ignore {
356321
}
357322

358323
@media (max-width: 700px) {
359-
.sidebar-menu {
360-
background-color: #505050;
361-
border-bottom-color: #e0e0e0;
362-
border-right-color: #e0e0e0;
363-
}
364-
365324
.sidebar-elems {
366-
background-color: #505050;
367325
border-right-color: #000;
368326
}
369-
370-
#sidebar-filler {
371-
background-color: #505050;
372-
border-bottom-color: #e0e0e0;
373-
}
374327
}
375328

376329
kbd {

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

+5-57
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
--settings-input-color: #2196f3;
55
--sidebar-background-color: #F5F5F5;
66
--sidebar-background-color-hover: #E0E0E0;
7+
--code-block-background-color: #F5F5F5;
8+
--scrollbar-track-background-color: #dcdcdc;
9+
--scrollbar-thumb-background-color: rgba(36, 37, 39, 0.6);
10+
--scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9;
11+
--headings-border-bottom-color: #ddd;
712
}
813

914
.slider {
@@ -16,57 +21,16 @@ input:focus + .slider {
1621
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
1722
}
1823

19-
h1.fqn {
20-
border-bottom-color: #DDDDDD;
21-
}
22-
h2, h3, h4 {
23-
border-bottom-color: #DDDDDD;
24-
}
25-
2624
.in-band {
2725
background-color: white;
2826
}
2927

30-
.docblock code, .docblock-short code {
31-
background-color: #F5F5F5;
32-
}
33-
pre, .rustdoc.source .example-wrap {
34-
background-color: #F5F5F5;
35-
}
36-
37-
.sidebar, .mobile-topbar, .sidebar-menu-toggle {
38-
background-color: #F5F5F5;
39-
}
40-
41-
/* Improve the scrollbar display on firefox */
42-
* {
43-
scrollbar-color: rgba(36, 37, 39, 0.6) #e6e6e6;
44-
}
45-
46-
.sidebar {
47-
scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9;
48-
}
49-
5028
.rust-logo {
5129
/* This rule exists to force other themes to explicitly style the logo.
5230
* Rustdoc has a custom linter for this purpose.
5331
*/
5432
}
5533

56-
/* Improve the scrollbar display on webkit-based browsers */
57-
::-webkit-scrollbar-track {
58-
background-color: #ecebeb;
59-
}
60-
::-webkit-scrollbar-thumb {
61-
background-color: rgba(36, 37, 39, 0.6);
62-
}
63-
.sidebar::-webkit-scrollbar-track {
64-
background-color: #dcdcdc;
65-
}
66-
.sidebar::-webkit-scrollbar-thumb {
67-
background-color: rgba(36, 37, 39, 0.6);
68-
}
69-
7034
.sidebar .current,
7135
.sidebar a:hover {
7236
background-color: #fff;
@@ -77,10 +41,6 @@ pre, .rustdoc.source .example-wrap {
7741
background-color: #FDFFD3 !important;
7842
}
7943

80-
.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5, .docblock h6 {
81-
border-bottom-color: #ddd;
82-
}
83-
8444
.docblock table td, .docblock table th {
8545
border-color: #ddd;
8646
}
@@ -339,21 +299,9 @@ pre.ignore:hover, .information:hover + pre.ignore {
339299
}
340300

341301
@media (max-width: 700px) {
342-
.sidebar-menu {
343-
background-color: #F5F5F5;
344-
border-bottom-color: #e0e0e0;
345-
border-right-color: #e0e0e0;
346-
}
347-
348302
.sidebar-elems {
349-
background-color: #F5F5F5;
350303
border-right-color: #000;
351304
}
352-
353-
#sidebar-filler {
354-
background-color: #F5F5F5;
355-
border-bottom-color: #e0e0e0;
356-
}
357305
}
358306

359307
kbd {

0 commit comments

Comments
 (0)
Please sign in to comment.