Skip to content

Commit 2942f98

Browse files
t-pault-paul
authored
Merge pull request #148 from timsavage/main
Add dark mode theme
2 parents 83ab90f + faad8e6 commit 2942f98

15 files changed

+246
-39
lines changed

‎about.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,17 @@
22

33
<html lang="en">
44
<head>
5+
<script src="assets/js/display-mode.js"></script>
6+
57
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
68
<title>OpenSCAD - About</title>
79

810
<link href="assets/css/style.css" rel="stylesheet">
911

1012
<link href="assets/fonts/open-sans/all.css" rel="stylesheet">
13+
<link href="assets/fontawesome/css/regular.css" rel="stylesheet">
14+
<link href="assets/fontawesome/css/solid.min.css" rel="stylesheet">
15+
<link href="assets/fontawesome/css/fontawesome.min.css" rel="stylesheet">
1116

1217
<script src="assets/js/jquery-1.9.1.min.js"></script>
1318

@@ -31,6 +36,14 @@
3136
<a href="https://opencollective.com/openscad/donate" target="_blank">
3237
<img src="assets/img/donate-opencollective.png" alt="Donate on Opencollective" width="200" height="33">
3338
</a>
39+
</div>
40+
<div id="displayMode" class="right">
41+
<div class="currentMode"><i class="fa fa-circle-half-stroke"></i> Theme</div>
42+
<ul class="pickMode" style="display: none;">
43+
<li class="system"><i class="fa fa-circle-half-stroke"></i> OS Default</li>
44+
<li class="light"><i class="fa fa-sun"></i> Light</li>
45+
<li class="dark"><i class="fa fa-moon"></i> Dark</li>
46+
</ul>
3447
</div>
3548
<div id="title" style="margin-top:35px; width:620px;">
3649
<h1 class="title" style="position:relative;"><span class="green">Open</span>SCAD</h1>

‎assets/css/style.css

Lines changed: 62 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquot
99
font-size: 100%;
1010
vertical-align: baseline;
1111
background: transparent;
12-
}
12+
}
1313

1414
article, aside, figure, footer, header, hgroup, nav, section {display: block;}
1515

1616
/* Responsive images and other embedded objects
17-
Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers.
17+
Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers.
1818
There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
1919
img,
2020
object,
@@ -23,16 +23,16 @@ embed {max-width: 100%;}
2323
/* force a vertical scrollbar to prevent a jumpy page */
2424
html {overflow-y: scroll;}
2525

26-
/* we use a lot of ULs that aren't bulleted.
26+
/* we use a lot of ULs that aren't bulleted.
2727
don't forget to restore the bullets within content. */
2828
ul {list-style: none;}
2929

3030

3131
blockquote, q {quotes: none;}
3232

33-
blockquote:before,
34-
blockquote:after,
35-
q:before,
33+
blockquote:before,
34+
blockquote:after,
35+
q:before,
3636
q:after {content: ''; content: none;}
3737

3838
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration:none;}
@@ -62,8 +62,8 @@ pre {
6262
white-space: pre;
6363
white-space: pre-wrap;
6464
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
65-
background-color: #f5f5f5;
66-
border: 1px solid #ccc;
65+
background-color: light-dark(#f5f5f5, #151515);
66+
border: 1px solid light-dark(#ccc, #222);
6767
border: 1px solid rgba(0, 0, 0, 0.15);
6868
-webkit-border-radius: 4px;
6969
-moz-border-radius: 4px;
@@ -126,22 +126,25 @@ button {width: auto; overflow: visible;}
126126
/* Stylings
127127
-------------------------------------------------------------------------------*/
128128

129+
:root[data-applied-theme="light"] { color-scheme: light; }
130+
:root[data-applied-theme="dark"] { color-scheme: dark; }
131+
129132
body {
130-
color:#1b2f01;
133+
color:light-dark(#1b2f01, #d2dbc5);
131134
font-family:"Open Sans"; font-size:14px;
132-
background:#fff;
135+
background:light-dark(#fff, #111);
133136
}
134137

135-
#page-wrap {width:1000px; margin:0px auto; border:1px solid #fff; padding:20px;}
138+
#page-wrap {width:1000px; margin:0px auto; border:1px solid light-dark(#fff, #111); padding:20px;}
136139

137-
header {background:#fff; padding:10px 20px 12px 20px; position:relative;
138-
-moz-box-shadow: 1px 1px 12px 2px #aaa;
139-
-webkit-box-shadow: 1px 1px 12px 2px #aaa;
140-
box-shadow: 1px 1px 12px 2px #aaa;
140+
header {background:light-dark(#fff, #171717); padding:10px 20px 12px 20px; position:relative;
141+
-moz-box-shadow: 1px 1px 12px 2px light-dark(#aaa, #222);
142+
-webkit-box-shadow: 1px 1px 12px 2px light-dark(#aaa, #222);
143+
box-shadow: 1px 1px 12px 2px light-dark(#aaa, #222);
141144
border-radius:12px 12px 0px 0px;
142145
}
143146

144-
header a {color: #1b2f01; text-decoration:none;}
147+
header a {color: light-dark(#1b2f01,#d2dbc5); text-decoration:none;}
145148
header a:hover {text-decoration:underline;}
146149

147150

@@ -163,13 +166,13 @@ opacity:0.8;
163166
}
164167

165168
#page-content {
166-
background:#ffffe5; /* #FFFFE5 BACKGROUND_COLOR - pale yellow/cream from colormap.cc */
169+
background:light-dark(#ffffe5,#141400); /* #FFFFE5 BACKGROUND_COLOR - pale yellow/cream from colormap.cc */
167170
position:relative; padding:20px 20px 0px 20px;
168-
-moz-box-shadow: 1px 1px 12px 2px #aaa; -webkit-box-shadow: 1px 1px 12px 2px #aaa; box-shadow: 1px 1px 12px 2px #aaa;
171+
-moz-box-shadow: 1px 1px 12px 2px light-dark(#aaa, #222); -webkit-box-shadow: 1px 1px 12px 2px light-dark(#aaa, #222); box-shadow: 1px 1px 12px 2px light-dark(#aaa, #222);
169172
border-radius:0px 0px 12px 12px;
170173
}
171174

172-
#sidebar{width:220px; padding:10px; float:left; background:#fff; border-radius:8px; border:1px solid #ddd; margin-bottom:20px;}
175+
#sidebar{width:220px; padding:10px; float:left; background:light-dark(#fff, #1b1b1b); border-radius:8px; border:1px solid light-dark(#ddd, #444); margin-bottom:20px;}
173176

174177
.sticky-wrapper {float:left; padding:0px 0px 0px 0px; margin-right:20px;}
175178

@@ -183,7 +186,7 @@ article{width:695px; float:left; margin-left:20px; padding:0px; }
183186
article.full{}
184187

185188
section-head { margin-bottom:20px; display:inline-block; width:100%; border-radius:8px; padding:0px; text-align: center; }
186-
section-area { margin-bottom:20px; display:inline-block; width:100%; border-radius:8px; padding:0px; text-align: center; border: 1px solid #f9d72c; background:#e5f1d3; }
189+
section-area { margin-bottom:20px; display:inline-block; width:100%; border-radius:8px; padding:0px; text-align: center; border: 1px solid light-dark(#f9d72c, #333); background:light-dark(#e5f1d3, #1b1b1b); }
187190
section-area h1 { padding: 8px 20px 8px 20px; }
188191
section-area p { padding: 8px 20px 8px 20px; }
189192
section-area.snow { color: rgba(249, 215, 44, 1); background:#444; }
@@ -192,19 +195,19 @@ section-area.warning { color: rgba(249, 215, 44, 1); background:#a00; }
192195
section-area.warning a { color: #e5f1d3; text-decoration:underline; }
193196
#snow { position: relative; }
194197

195-
section {margin-bottom:20px; background:#fff; border-radius:8px; border:1px solid #ddd; padding:10px 20px 20px 20px;}
198+
section {margin-bottom:20px; background:light-dark(#fff, #1b1b1b); border-radius:8px; border:1px solid light-dark(#ddd, #333); padding:10px 20px 20px 20px;}
196199
.subsection {margin-bottom:20px;}
197200
.subsection:last-child {margin-bottom:0px;}
198201
.github-ribbon {float: right; position: relative; top: -10px; right: -20px; border: 0; z-index: 0;}
199202

200203
/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
201-
::-moz-selection {background: #000; color: #fff; text-shadow: none;}
202-
::selection {background: #000; color: #fff; text-shadow: none;}
204+
::-moz-selection {background: #000; color: light-dark(#fff, #1b1b1b); text-shadow: none;}
205+
::selection {background: #000; color: light-dark(#fff, #1b1b1b); text-shadow: none;}
203206

204207
/* j.mp/webkit-tap-highlight-color */
205208
a:link {-webkit-tap-highlight-color: #1b2f01;}
206209

207-
a {color:#1b2f01; font-weight:600;}
210+
a {color:light-dark(#1b2f01, #8fa76e); font-weight:600;}
208211

209212
.imgLink:hover{opacity:0.8;}
210213

@@ -249,10 +252,10 @@ Open - #9dcb51;} OPENCSG_FACE_BACK_COLOR - green
249252
SCAD - #f9d72c;} OPENCSG_FACE_FRONT_COLOR - yellow
250253
- for reference #FFFFE5;} BACKGROUND_COLOR - pale yellow/cream, used above
251254
*/
252-
header h1.title {color:#f9d72c; letter-spacing:-1px; font-weight:700;}
255+
header h1.title {color:light-dark(#f9d72c, ); letter-spacing:-1px; font-weight:700;}
253256
header h1 span.green {color:#9dcb51; letter-spacing:0px;}
254257

255-
header h2.subtitle {color:black; letter-spacing:-1px;}
258+
header h2.subtitle {color:light-dark(black, #eee); letter-spacing:-1px;}
256259

257260
/* colour OPEN & SCAD in the home sub-page heading the same*/
258261
section h1 strong {color:#f9d72c; font-weight:700; letter-spacing:-1px;}
@@ -326,7 +329,7 @@ li{line-height:180%;}
326329
//padding:0px;
327330
}
328331

329-
#navigation ul li.current {border-radius:8px; background:#f2f2ee; border:1px solid #ddd; padding:3px 9px 4px 9px;}
332+
#navigation ul li.current {border-radius:8px; background:light-dark(#f2f2ee, #141405); border:1px solid light-dark(#ddd, #333); padding:3px 9px 4px 9px;}
330333

331334
#navigation ul li:last-child .nav-divider {
332335
display:none;
@@ -361,7 +364,7 @@ li{line-height:180%;}
361364

362365
#home-download {text-align:center; position:relative; margin-top:0px; height:130px; left:150px; width:355px;}
363366

364-
#home-download-link {position:absolute; top:10px; background:#e5f1d3; height:55px; width:350px; border-radius:12px; border:4px solid #233d00;}
367+
#home-download-link {position:absolute; top:10px; background:light-dark(#e5f1d3, #242521); height:55px; width:350px; border-radius:12px; border:4px solid light-dark(#233d00, #233d00);}
365368

366369
#home-download-logo {position:absolute; background:url('../img/download.png'); height:106px; width:101px;}
367370

@@ -378,13 +381,13 @@ a:active #home-download-link{
378381
}
379382

380383
.store-button {text-align:center; display:inline-block; padding:8px;}
381-
.download-button {background:#e5f1d3; border-radius:12px; border:4px solid #233d00; text-align:center; display:inline-block; padding:8px; margin:8px;}
384+
.download-button {background:light-dark(#e5f1d3, #171815); border-radius:12px; border:4px solid light-dark(#233d00, #182b01); text-align:center; display:inline-block; padding:8px; margin:8px;}
382385

383386
.link-grid { display: grid; width:100%; grid-column-gap: 8px; grid-auto-columns: auto; grid-auto-flow: column;}
384-
.link-button { height:100%; display: block; background:#e5f1d3; border-radius:8px; border:1px solid #f9d72c; text-align:center; padding: 2px 8px; margin:0px;}
387+
.link-button { height:100%; display: block; background:light-dark(#e5f1d3, #1a220f); border-radius:8px; border:1px solid light-dark(#f9d72c, #252006); text-align:center; padding: 2px 8px; margin:0px;}
385388
.link-button h1 { margin: 0px; padding: 0px; }
386-
.link-button i { color: rgba(0, 0, 0, 0.4); font-size: 3em; margin: 0.2em; }
387-
.link-button .selected { color: rgba(0, 0, 0, 0.6); }
389+
.link-button i { color: light-dark(rgba(0, 0, 0, 0.4), rgba(143, 167, 110, 0.4)); font-size: 3em; margin: 0.2em; }
390+
.link-button .selected { color: light-dark(rgba(0, 0, 0, 0.6), rgba(143, 167, 110, 0.8)); }
388391

389392
.tutorial-links {width:640px; height:200px; border-top:1px solid #ddd; padding:30px 0px 40px 0px; }
390393

@@ -496,3 +499,30 @@ i.fab {
496499
99% { transform:translate(0, -12.5rem); }
497500
100% { transform:translate(0, -15.0rem); }
498501
}
502+
503+
#displayMode {
504+
margin: 10px 10px 0 0;
505+
padding: 2px 10px;
506+
line-height: 27px;
507+
height: 27px;
508+
background: light-dark(#f2f2ee, #141405);
509+
border: 1px solid light-dark(#ddd, #333);
510+
border-radius: 10px;
511+
cursor: pointer;
512+
}
513+
#displayMode ul.pickMode {
514+
position: relative;
515+
margin: -33px;
516+
padding: 2px 10px;
517+
background: light-dark(#f2f2ee, #141405);
518+
border: 1px solid light-dark(#ddd, #333);
519+
border-radius: 10px;
520+
}
521+
#displayMode ul.pickMode li {
522+
padding: 2px;
523+
border-radius: 10px;
524+
cursor: pointer;
525+
}
526+
#displayMode ul.pickMode li:hover {
527+
background: light-dark(#dbdbcd, #25250a);
528+
}

‎assets/js/display-mode.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// Get mode from local storage
2+
function getDisplayMode() { return localStorage.getItem('mode') || 'system'; }
3+
// Save mode to local storage
4+
function setDisplayMode(mode) { localStorage.setItem('mode', mode); }
5+
// Determine theme from mode name
6+
function modeToTheme(mode) {
7+
if (mode === 'light' || mode === 'dark') { return mode; }
8+
if (matchMedia('(prefers-color-scheme: light').matches) { return 'light'; }
9+
return 'dark';
10+
}
11+
// Change the mode
12+
function changeMode(mode) {
13+
document.documentElement.dataset.appliedTheme = modeToTheme(mode);
14+
setDisplayMode(mode);
15+
}
16+
// Initialise mode
17+
document.documentElement.dataset.appliedTheme = modeToTheme(getDisplayMode());

‎assets/js/header.js

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,33 @@
11
var pageHeight = $(window).height();
22
$(document).ready(function() {
3-
3+
44
$('.top').click(function(){$('body').scrollTo($('body'),700,{offset:{top:-20}});});
5-
5+
66
$('.sticky').waypoint('sticky');
7-
7+
88
$('#sidebar.sticky').parent().css('width',$("#sidebar.sticky").css('width'));
99

1010
// $("a[href^='#']").click(function(e){e.preventDefault(); $('body').scrollTo($(this).attr('href'),1000, {offset:-20}); });
1111

12-
$('section ul li').prepend("» ");
12+
$('section ul li').prepend("» ");
1313

14+
// Mode picker
15+
setDisplayModeIcon(getDisplayMode());
16+
$('#displayMode .currentMode').click(function () {
17+
$('#displayMode .pickMode').show();
18+
});
19+
$('#displayMode .pickMode li').click(function () {
20+
changeMode(this.className);
21+
setDisplayModeIcon(this.className);
22+
$('#displayMode .pickMode').hide();
23+
});
1424
});
25+
26+
function setDisplayModeIcon(mode) {
27+
let iconClass = "fa fa-circle-half-stroke";
28+
let title = "OS Default"
29+
if (mode === 'light') { iconClass = "fa fa-sun"; title = "Light Theme"; }
30+
else if (mode === 'dark') { iconClass = "fa fa-moon"; title = "Dark Theme";}
31+
$('#displayMode .currentMode i').removeClass().addClass(iconClass);
32+
$('#displayMode .currentMode').attr({title});
33+
}

‎community.html

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
<html lang="en">
44
<head>
5-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<script src="assets/js/display-mode.js"></script>
6+
7+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
68
<title>OpenSCAD - Community</title>
79

810
<link href="assets/css/style.css" rel="stylesheet">
@@ -33,6 +35,14 @@
3335
<a href="https://opencollective.com/openscad/donate" target="_blank">
3436
<img src="assets/img/donate-opencollective.png" alt="Donate on Opencollective" width="200" height="33">
3537
</a>
38+
</div>
39+
<div id="displayMode" class="right">
40+
<div class="currentMode"><i class="fa fa-circle-half-stroke"></i> Theme</div>
41+
<ul class="pickMode" style="display: none;">
42+
<li class="system"><i class="fa fa-circle-half-stroke"></i> OS Default</li>
43+
<li class="light"><i class="fa fa-sun"></i> Light</li>
44+
<li class="dark"><i class="fa fa-moon"></i> Dark</li>
45+
</ul>
3646
</div>
3747
<div id="title" style="margin-top:35px; width:620px;">
3848
<h1 class="title" style="position:relative;"><span class="green">Open</span>SCAD</h1>

‎documentation-articles.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@
22

33
<html lang="en">
44
<head>
5+
<script src="assets/js/display-mode.js"></script>
6+
57
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
68
<title>OpenSCAD - Documentation</title>
79

810
<link href="assets/css/style.css" rel="stylesheet">
11+
<link href="assets/fontawesome/css/regular.css" rel="stylesheet">
912
<link href="assets/fontawesome/css/solid.min.css" rel="stylesheet">
1013
<link href="assets/fontawesome/css/fontawesome.min.css" rel="stylesheet">
1114

@@ -32,6 +35,14 @@
3235
<a href="https://opencollective.com/openscad/donate" target="_blank">
3336
<img src="assets/img/donate-opencollective.png" alt="Donate on Opencollective" width="200" height="33">
3437
</a>
38+
</div>
39+
<div id="displayMode" class="right">
40+
<div class="currentMode"><i class="fa fa-circle-half-stroke"></i> Theme</div>
41+
<ul class="pickMode" style="display: none;">
42+
<li class="system"><i class="fa fa-circle-half-stroke"></i> OS Default</li>
43+
<li class="light"><i class="fa fa-sun"></i> Light</li>
44+
<li class="dark"><i class="fa fa-moon"></i> Dark</li>
45+
</ul>
3546
</div>
3647
<div id="title" style="margin-top:35px; width:620px;">
3748
<h1 class="title" style="position:relative;"><span class="green">Open</span>SCAD</h1>

‎documentation-books.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
<html lang="en">
44
<head>
5+
<script src="assets/js/display-mode.js"></script>
6+
57
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
68
<title>OpenSCAD - Documentation</title>
79

@@ -22,6 +24,7 @@
2224
<script src="assets/js/waypoints.min.js"></script>
2325
<script src="assets/js/waypoints-sticky.min.js"></script>
2426

27+
<script src="assets/js/header.js"></script>
2528
<script src="assets/js/documentation-books.js"></script>
2629
</head>
2730
<body>
@@ -34,6 +37,14 @@
3437
<a href="https://opencollective.com/openscad/donate" target="_blank">
3538
<img src="assets/img/donate-opencollective.png" alt="Donate on Opencollective" width="200" height="33">
3639
</a>
40+
</div>
41+
<div id="displayMode" class="right">
42+
<div class="currentMode"><i class="fa fa-circle-half-stroke"></i> Theme</div>
43+
<ul class="pickMode" style="display: none;">
44+
<li class="system"><i class="fa fa-circle-half-stroke"></i> OS Default</li>
45+
<li class="light"><i class="fa fa-sun"></i> Light</li>
46+
<li class="dark"><i class="fa fa-moon"></i> Dark</li>
47+
</ul>
3748
</div>
3849
<div id="title" style="margin-top:35px; width:620px;">
3950
<h1 class="title" style="position:relative;"><span class="green">Open</span>SCAD</h1>

0 commit comments

Comments
 (0)