Skip to content

Commit 55720c0

Browse files
committed
minimal dark mode implementation
1 parent de20b6f commit 55720c0

File tree

7 files changed

+65
-359
lines changed

7 files changed

+65
-359
lines changed

index.html

+65-11
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
1010
<title>Underscore.js</title>
1111
<style>
12-
@import './static/css/theme-toggle.css';
1312
body {
1413
font-size: 14px;
1514
line-height: 22px;
@@ -260,8 +259,72 @@
260259
width: 100%;
261260
}
262261
}
262+
@media screen and (prefers-color-scheme: light) {
263+
img#logo {
264+
filter: none;
265+
}
266+
}
267+
268+
@media screen and (prefers-color-scheme: dark) {
269+
body {
270+
background: #333 !important;
271+
color: #c6c6c6;
272+
}
273+
274+
div#sidebar {
275+
background: #444;
276+
border-right: 1px solid #666;
277+
box-shadow: 0 0 20px #555;
278+
-webkit-box-shadow: 0 0 20px #555;
279+
-moz-box-shadow: 0 0 20px #555;
280+
}
281+
282+
a.toc_title,
283+
a.toc_title:visited {
284+
color: #f4f4f4;
285+
}
286+
287+
a.toc_title:hover {
288+
text-decoration: underline;
289+
}
290+
291+
.toc_section li a {
292+
text-decoration: none;
293+
color: #f4f4f4;
294+
}
295+
296+
img#logo {
297+
filter: brightness(0) invert(1);
298+
}
299+
300+
div.warning {
301+
color: #CC6060;
302+
}
303+
304+
a,
305+
a:visited {
306+
color: #f4f4f4;
307+
}
308+
309+
a:active,
310+
a:hover {
311+
color: #ffffff;
312+
}
313+
314+
table .rule {
315+
background: #777;
316+
}
317+
318+
tt {
319+
background: #444;
320+
border: 1px solid #777;
321+
}
322+
323+
pre {
324+
border-left: 5px solid #aaa;
325+
}
326+
}
263327
</style>
264-
<script src="/static/js/themeToggle.js" defer></script>
265328
</head>
266329
<body>
267330

@@ -4323,15 +4386,6 @@ <h2 id="changelog">Change Log</h2>
43234386

43244387
</div>
43254388

4326-
<form action="#" id="themeForm" data-name="toggleForm">
4327-
<div class="theme-control">
4328-
<label role="listbox" for="themeToggle" aria-label="theme">
4329-
<input role="option" type="checkbox" name="theme" id="themeToggle">
4330-
</label>
4331-
</div>
4332-
</form>
4333-
4334-
43354389
<!-- Include Underscore, so you can play with it in the console. -->
43364390
<script type="text/javascript" src="underscore-umd.js"></script>
43374391
<script type="text/javascript" src="docs/main.js"></script>

static/css/theme-toggle.css

-264
This file was deleted.

static/images/moon-light.svg

-3
This file was deleted.

static/images/moon.svg

-3
This file was deleted.

static/images/sun-light.svg

-11
This file was deleted.

static/images/sun.svg

-11
This file was deleted.

0 commit comments

Comments
 (0)