Skip to content

Commit 6bb608c

Browse files
borsbors
committed
Auto merge of #7030 - xFrednet:6877-clippy-going-dark, r=llogiq
Clippy going dark: Adding a dark theme to Clippy's lint list This PR adds the MdBook color themes to the lint list of Clippy. Well at least an adaption of these themes. <details> <summary>Here are some beautiful screenshots:</summary> **light theme** ![image](https://user-images.githubusercontent.com/17087237/113510593-e31fb280-955b-11eb-8ab1-8b5bcf287475.png) **Rust theme** ![image](https://user-images.githubusercontent.com/17087237/113510734-79ec6f00-955c-11eb-981c-8ebe890acf79.png) **Coal theme** ![image](https://user-images.githubusercontent.com/17087237/113510752-8ec90280-955c-11eb-8f5c-c87ca07c35c2.png) **Navy theme** ![image](https://user-images.githubusercontent.com/17087237/113510675-3f82d200-955c-11eb-8992-8c784abe19ea.png) **Ayu theme** ![image](https://user-images.githubusercontent.com/17087237/113510700-588b8300-955c-11eb-83e0-a8f770e9f913.png) </details> The theme is also stored in the browser to ensure that the next session applies the theme and doesn't burn your eyes out. cc: `@matthiaskrgr` --- Closes #6877 changelog: [Clippy's lint list](https://rust-lang.github.io/rust-clippy/master/index.html) now supports themes
2 parents 86fb0e8 + e25b106 commit 6bb608c

File tree

1 file changed

+188
-4
lines changed

1 file changed

+188
-4
lines changed

‎util/gh-pages/index.html‎

Lines changed: 188 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,20 @@
88

99
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
1010
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/github.min.css"/>
11+
12+
<!-- This stylesheet is linked to a specific version to ensure that the link stays static even if mdbook does some refactoring. -->
13+
<!-- gitcdn is used to get the css file as a stylesheet content type. It's open source and published under the GLP-3.0 License -->
14+
<link rel="stylesheet" href="https://gitcdn.xyz/cdn/rust-lang/mdBook/v0.4.7/src/theme/css/variables.css"/>
15+
<link id="styleHighlight" rel="stylesheet" href="https://gitcdn.xyz/repo/rust-lang/mdBook/master/src/theme/highlight.css" disabled="true">
16+
<link id="styleNight" rel="stylesheet" href="https://gitcdn.xyz/repo/rust-lang/mdBook/master/src/theme/tomorrow-night.css">
17+
<link id="styleAyu" rel="stylesheet" href="https://gitcdn.xyz/repo/rust-lang/mdBook/master/src/theme/ayu-highlight.css" disabled="true">
1118
<style>
1219
blockquote { font-size: 1em; }
1320
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
1421

1522
.form-inline .checkbox { margin-right: 0.6em }
1623

1724
.panel-heading { cursor: pointer; }
18-
.panel-heading:hover { background-color: #eee; }
1925

2026
.panel-title { display: flex; }
2127
.panel-title .label { display: inline-block; }
@@ -24,10 +30,134 @@
2430
.panel-title-name span { vertical-align: bottom; }
2531

2632
.panel .panel-title-name .anchor { display: none; }
27-
.panel:hover .panel-title-name .anchor { display: inline; color: #fff; }
33+
.panel:hover .panel-title-name .anchor { display: inline;}
34+
35+
</style>
36+
<style>
37+
/* Expanding the mdBoom theme*/
38+
.light {
39+
--inline-code-bg: #f6f7f6;
40+
}
41+
.rust {
42+
--inline-code-bg: #f6f7f6;
43+
}
44+
.coal {
45+
--inline-code-bg: #1d1f21;
46+
}
47+
.navy {
48+
--inline-code-bg: #1d1f21;
49+
}
50+
.ayu {
51+
--inline-code-bg: #191f26;
52+
}
53+
54+
/* Applying the mdBook theme */
55+
.theme-icon {
56+
position: absolute;
57+
text-align: center;
58+
width: 2em;
59+
height: 2em;
60+
margin: 0.7em;
61+
line-height: 2em;
62+
border: solid 1px var(--icons);
63+
border-radius: 5px;
64+
user-select: none;
65+
cursor: pointer;
66+
}
67+
.theme-icon:hover {
68+
background: var(--theme-hover);
69+
}
70+
.theme-choice {
71+
position: absolute;
72+
margin-top: calc(2em + 0.7em);
73+
margin-left: 0.7em;
74+
list-style: none;
75+
border: 1px solid var(--theme-popup-border);
76+
border-radius: 5px;
77+
color: var(--fg);
78+
background: var(--theme-popup-bg);
79+
padding: 0 0;
80+
}
81+
.theme-choice > li {
82+
padding: 5px 10px;
83+
font-size: 0.8em;
84+
user-select: none;
85+
cursor: pointer;
86+
}
87+
.theme-choice > li:hover {
88+
background: var(--theme-hover);
89+
}
90+
91+
.alert {
92+
color: var(--fg);
93+
background: var(--theme-hover);
94+
border: 1px solid var(--theme-popup-border);
95+
}
96+
.page-header {
97+
border-color: var(--theme-popup-border);
98+
}
99+
.panel-default > .panel-heading {
100+
background: var(--theme-hover);
101+
color: var(--fg);
102+
border: 1px solid var(--theme-popup-border);
103+
}
104+
.panel-default > .panel-heading:hover {
105+
filter: brightness(90%);
106+
}
107+
.list-group-item {
108+
background: 0%;
109+
border: 1px solid var(--theme-popup-border);
110+
}
111+
.panel, pre, hr {
112+
background: var(--bg);
113+
border: 1px solid var(--theme-popup-border);
114+
}
115+
116+
#filter-label, #filter-clear {
117+
background: var(--searchbar-bg);
118+
color: var(--searchbar-fg);
119+
border-color: var(--theme-popup-border);
120+
filter: brightness(95%);
121+
}
122+
#filter-label:hover, #filter-clear:hover {
123+
filter: brightness(90%);
124+
}
125+
#filter-input {
126+
background: var(--searchbar-bg);
127+
color: var(--searchbar-fg);
128+
border-color: var(--theme-popup-border);
129+
}
130+
131+
#filter-input::-webkit-input-placeholder,
132+
#filter-input::-moz-placeholder {
133+
color: var(--searchbar-fg);
134+
opacity: 30%;
135+
}
136+
137+
p > code {
138+
color: var(--inline-code-color);
139+
background-color: var(--inline-code-bg);
140+
}
141+
html {
142+
scrollbar-color: var(--scrollbar) var(--bg);
143+
}
144+
body {
145+
background: var(--bg);
146+
color: var(--fg);
147+
}
148+
28149
</style>
29150
</head>
30151
<body>
152+
<div id="theme-icon" class="theme-icon">&#128396;</div>
153+
<ul id="theme-menu" class="theme-choice" style="display: none;">
154+
<li id="light">Light</li>
155+
<li id="rust">Rust</li>
156+
<li id="coal">Coal</li>
157+
<li id="navy">Navy</li>
158+
<li id="ayu">Ayu</li>
159+
</ul>
160+
31161
<div class="container" ng-app="clippy" ng-controller="lintList">
32162
<div class="page-header">
33163
<h1>ALL the Clippy Lints</h1>
@@ -49,7 +179,7 @@ <h1>ALL the Clippy Lints</h1>
49179
</div>
50180

51181
<div class="panel panel-default" ng-show="data">
52-
<div class="panel-body row">
182+
<div class="panel-body row filter-panel">
53183
<div class="col-md-6 form-inline">
54184
<div class="form-group form-group-lg">
55185
<p class="h4">Lint levels</p>
@@ -79,7 +209,7 @@ <h1>ALL the Clippy Lints</h1>
79209
<label class="input-group-addon" id="filter-label" for="filter-input">Filter:</label>
80210
<input type="text" class="form-control" placeholder="Keywords or search string" id="filter-input" ng-model="search" ng-model-options="{debounce: 50}"/>
81211
<span class="input-group-btn">
82-
<button class="btn btn-default" type="button" ng-click="search = ''">
212+
<button id="filter-clear" class="btn" type="button" ng-click="search = ''">
83213
Clear
84214
</button>
85215
</span>
@@ -320,6 +450,60 @@ <h4 class="list-group-item-heading">
320450
}
321451
}
322452
}
453+
454+
function setupListeners() {
455+
let themeIcon = document.getElementById("theme-icon");
456+
let themeMenu = document.getElementById("theme-menu");
457+
themeIcon.addEventListener("click", function(e) {
458+
if (themeMenu.style.display == "none") {
459+
themeMenu.style.display = "block";
460+
} else {
461+
themeMenu.style.display = "none";
462+
}
463+
});
464+
465+
let children = themeMenu.children;
466+
for (let index = 0; index < children.length; index++) {
467+
let child = children[index];
468+
child.addEventListener("click", function(e) {
469+
setTheme(child.id, true);
470+
});
471+
}
472+
}
473+
474+
setupListeners();
475+
476+
function setTheme(theme, store) {
477+
let enableHighlight = false;
478+
let enableNight = false;
479+
let enableAyu = false;
480+
481+
if (theme == "ayu") {
482+
enableAyu = true;
483+
} else if (theme == "coal" || theme == "navy") {
484+
enableNight = true;
485+
} else if (theme == "rust") {
486+
enableHighlight = true;
487+
} else {
488+
enableHighlight = true;
489+
// this makes sure that an unknown theme request gets set to a known one
490+
theme = "light";
491+
}
492+
document.getElementsByTagName("body")[0].className = theme;
493+
494+
document.getElementById("styleHighlight").disabled = !enableHighlight;
495+
document.getElementById("styleNight").disabled = !enableNight;
496+
document.getElementById("styleAyu").disabled = !enableAyu;
497+
498+
if (store) {
499+
try {
500+
localStorage.setItem('clippy-lint-list-theme', theme);
501+
} catch (e) { }
502+
}
503+
}
504+
505+
// loading the theme after the initial load
506+
setTheme(localStorage.getItem('clippy-lint-list-theme'), false);
323507
</script>
324508
</body>
325509
</html>

0 commit comments

Comments
 (0)