Skip to content

Add dark mode theme #148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Mar 17, 2025
Merged

Add dark mode theme #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
693b96c
Add dark mode versions of colours
timsavage Mar 9, 2025
09cabbf
Add styles for display mode picker
timsavage Mar 9, 2025
9ce9ac9
Add JS code for display mode picker
timsavage Mar 9, 2025
66dbaab
Add picker to every page
timsavage Mar 9, 2025
28ff57c
Split setting of display mode into own file to minimise FOUC
timsavage Mar 9, 2025
6764317
Add display-mode.js at top of head block to eliminate flash of unstyl…
timsavage Mar 9, 2025
fa53513
Made icons more defined.
timsavage Mar 17, 2025
faad8e6
Make selected doc page clearer
timsavage Mar 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@

<html lang="en">
<head>
<script src="assets/js/display-mode.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenSCAD - About</title>

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

<link href="assets/fonts/open-sans/all.css" rel="stylesheet">
<link href="assets/fontawesome/css/regular.css" rel="stylesheet">
<link href="assets/fontawesome/css/solid.min.css" rel="stylesheet">
<link href="assets/fontawesome/css/fontawesome.min.css" rel="stylesheet">

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

Expand All @@ -31,6 +36,14 @@
<a href="https://opencollective.com/openscad/donate" target="_blank">
<img src="assets/img/donate-opencollective.png" alt="Donate on Opencollective" width="200" height="33">
</a>
</div>
<div id="displayMode" class="right">
<div class="currentMode"><i class="fa fa-circle-half-stroke"></i> Theme</div>
<ul class="pickMode" style="display: none;">
<li class="system"><i class="fa fa-circle-half-stroke"></i> OS Default</li>
<li class="light"><i class="fa fa-sun"></i> Light</li>
<li class="dark"><i class="fa fa-moon"></i> Dark</li>
</ul>
</div>
<div id="title" style="margin-top:35px; width:620px;">
<h1 class="title" style="position:relative;"><span class="green">Open</span>SCAD</h1>
Expand Down
94 changes: 62 additions & 32 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquot
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
}

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

/* Responsive images and other embedded objects
Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers.
Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers.
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. */
img,
object,
Expand All @@ -23,16 +23,16 @@ embed {max-width: 100%;}
/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

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


blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

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

:root[data-applied-theme="light"] { color-scheme: light; }
:root[data-applied-theme="dark"] { color-scheme: dark; }

body {
color:#1b2f01;
color:light-dark(#1b2f01, #d2dbc5);
font-family:"Open Sans"; font-size:14px;
background:#fff;
background:light-dark(#fff, #111);
}

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

header {background:#fff; padding:10px 20px 12px 20px; position:relative;
-moz-box-shadow: 1px 1px 12px 2px #aaa;
-webkit-box-shadow: 1px 1px 12px 2px #aaa;
box-shadow: 1px 1px 12px 2px #aaa;
header {background:light-dark(#fff, #171717); padding:10px 20px 12px 20px; position:relative;
-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);
border-radius:12px 12px 0px 0px;
}

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


Expand All @@ -163,13 +166,13 @@ opacity:0.8;
}

#page-content {
background:#ffffe5; /* #FFFFE5 BACKGROUND_COLOR - pale yellow/cream from colormap.cc */
background:light-dark(#ffffe5,#141400); /* #FFFFE5 BACKGROUND_COLOR - pale yellow/cream from colormap.cc */
position:relative; padding:20px 20px 0px 20px;
-moz-box-shadow: 1px 1px 12px 2px #aaa; -webkit-box-shadow: 1px 1px 12px 2px #aaa; box-shadow: 1px 1px 12px 2px #aaa;
-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);
border-radius:0px 0px 12px 12px;
}

#sidebar{width:220px; padding:10px; float:left; background:#fff; border-radius:8px; border:1px solid #ddd; margin-bottom:20px;}
#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;}

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

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

section-head { margin-bottom:20px; display:inline-block; width:100%; border-radius:8px; padding:0px; text-align: center; }
section-area { margin-bottom:20px; display:inline-block; width:100%; border-radius:8px; padding:0px; text-align: center; border: 1px solid #f9d72c; background:#e5f1d3; }
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); }
section-area h1 { padding: 8px 20px 8px 20px; }
section-area p { padding: 8px 20px 8px 20px; }
section-area.snow { color: rgba(249, 215, 44, 1); background:#444; }
Expand All @@ -192,19 +195,19 @@ section-area.warning { color: rgba(249, 215, 44, 1); background:#a00; }
section-area.warning a { color: #e5f1d3; text-decoration:underline; }
#snow { position: relative; }

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

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

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

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

.imgLink:hover{opacity:0.8;}

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

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

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

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

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

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

#home-download-link {position:absolute; top:10px; background:#e5f1d3; height:55px; width:350px; border-radius:12px; border:4px solid #233d00;}
#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);}

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

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

.store-button {text-align:center; display:inline-block; padding:8px;}
.download-button {background:#e5f1d3; border-radius:12px; border:4px solid #233d00; text-align:center; display:inline-block; padding:8px; margin:8px;}
.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;}

.link-grid { display: grid; width:100%; grid-column-gap: 8px; grid-auto-columns: auto; grid-auto-flow: column;}
.link-button { height:100%; display: block; background:#e5f1d3; border-radius:8px; border:1px solid #f9d72c; text-align:center; padding: 2px 8px; margin:0px;}
.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;}
.link-button h1 { margin: 0px; padding: 0px; }
.link-button i { color: rgba(0, 0, 0, 0.4); font-size: 3em; margin: 0.2em; }
.link-button .selected { color: rgba(0, 0, 0, 0.6); }
.link-button i { color: light-dark(rgba(0, 0, 0, 0.4), rgba(143, 167, 110, 0.4)); font-size: 3em; margin: 0.2em; }
.link-button .selected { color: light-dark(rgba(0, 0, 0, 0.6), rgba(143, 167, 110, 0.8)); }

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

Expand Down Expand Up @@ -496,3 +499,30 @@ i.fab {
99% { transform:translate(0, -12.5rem); }
100% { transform:translate(0, -15.0rem); }
}

#displayMode {
margin: 10px 10px 0 0;
padding: 2px 10px;
line-height: 27px;
height: 27px;
background: light-dark(#f2f2ee, #141405);
border: 1px solid light-dark(#ddd, #333);
border-radius: 10px;
cursor: pointer;
}
#displayMode ul.pickMode {
position: relative;
margin: -33px;
padding: 2px 10px;
background: light-dark(#f2f2ee, #141405);
border: 1px solid light-dark(#ddd, #333);
border-radius: 10px;
}
#displayMode ul.pickMode li {
padding: 2px;
border-radius: 10px;
cursor: pointer;
}
#displayMode ul.pickMode li:hover {
background: light-dark(#dbdbcd, #25250a);
}
17 changes: 17 additions & 0 deletions assets/js/display-mode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// Get mode from local storage
function getDisplayMode() { return localStorage.getItem('mode') || 'system'; }
// Save mode to local storage
function setDisplayMode(mode) { localStorage.setItem('mode', mode); }
// Determine theme from mode name
function modeToTheme(mode) {
if (mode === 'light' || mode === 'dark') { return mode; }
if (matchMedia('(prefers-color-scheme: light').matches) { return 'light'; }
return 'dark';
}
// Change the mode
function changeMode(mode) {
document.documentElement.dataset.appliedTheme = modeToTheme(mode);
setDisplayMode(mode);
}
// Initialise mode
document.documentElement.dataset.appliedTheme = modeToTheme(getDisplayMode());
27 changes: 23 additions & 4 deletions assets/js/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,33 @@
var pageHeight = $(window).height();
$(document).ready(function() {

$('.top').click(function(){$('body').scrollTo($('body'),700,{offset:{top:-20}});});

$('.sticky').waypoint('sticky');

$('#sidebar.sticky').parent().css('width',$("#sidebar.sticky").css('width'));

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

$('section ul li').prepend("» ");
$('section ul li').prepend("» ");

// Mode picker
setDisplayModeIcon(getDisplayMode());
$('#displayMode .currentMode').click(function () {
$('#displayMode .pickMode').show();
});
$('#displayMode .pickMode li').click(function () {
changeMode(this.className);
setDisplayModeIcon(this.className);
$('#displayMode .pickMode').hide();
});
});

function setDisplayModeIcon(mode) {
let iconClass = "fa fa-circle-half-stroke";
let title = "OS Default"
if (mode === 'light') { iconClass = "fa fa-sun"; title = "Light Theme"; }
else if (mode === 'dark') { iconClass = "fa fa-moon"; title = "Dark Theme";}
$('#displayMode .currentMode i').removeClass().addClass(iconClass);
$('#displayMode .currentMode').attr({title});
}
12 changes: 11 additions & 1 deletion community.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="assets/js/display-mode.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenSCAD - Community</title>

<link href="assets/css/style.css" rel="stylesheet">
Expand Down Expand Up @@ -33,6 +35,14 @@
<a href="https://opencollective.com/openscad/donate" target="_blank">
<img src="assets/img/donate-opencollective.png" alt="Donate on Opencollective" width="200" height="33">
</a>
</div>
<div id="displayMode" class="right">
<div class="currentMode"><i class="fa fa-circle-half-stroke"></i> Theme</div>
<ul class="pickMode" style="display: none;">
<li class="system"><i class="fa fa-circle-half-stroke"></i> OS Default</li>
<li class="light"><i class="fa fa-sun"></i> Light</li>
<li class="dark"><i class="fa fa-moon"></i> Dark</li>
</ul>
</div>
<div id="title" style="margin-top:35px; width:620px;">
<h1 class="title" style="position:relative;"><span class="green">Open</span>SCAD</h1>
Expand Down
11 changes: 11 additions & 0 deletions documentation-articles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@

<html lang="en">
<head>
<script src="assets/js/display-mode.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenSCAD - Documentation</title>

<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/fontawesome/css/regular.css" rel="stylesheet">
<link href="assets/fontawesome/css/solid.min.css" rel="stylesheet">
<link href="assets/fontawesome/css/fontawesome.min.css" rel="stylesheet">

Expand All @@ -32,6 +35,14 @@
<a href="https://opencollective.com/openscad/donate" target="_blank">
<img src="assets/img/donate-opencollective.png" alt="Donate on Opencollective" width="200" height="33">
</a>
</div>
<div id="displayMode" class="right">
<div class="currentMode"><i class="fa fa-circle-half-stroke"></i> Theme</div>
<ul class="pickMode" style="display: none;">
<li class="system"><i class="fa fa-circle-half-stroke"></i> OS Default</li>
<li class="light"><i class="fa fa-sun"></i> Light</li>
<li class="dark"><i class="fa fa-moon"></i> Dark</li>
</ul>
</div>
<div id="title" style="margin-top:35px; width:620px;">
<h1 class="title" style="position:relative;"><span class="green">Open</span>SCAD</h1>
Expand Down
11 changes: 11 additions & 0 deletions documentation-books.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

<html lang="en">
<head>
<script src="assets/js/display-mode.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenSCAD - Documentation</title>

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

<script src="assets/js/header.js"></script>
<script src="assets/js/documentation-books.js"></script>
</head>
<body>
Expand All @@ -34,6 +37,14 @@
<a href="https://opencollective.com/openscad/donate" target="_blank">
<img src="assets/img/donate-opencollective.png" alt="Donate on Opencollective" width="200" height="33">
</a>
</div>
<div id="displayMode" class="right">
<div class="currentMode"><i class="fa fa-circle-half-stroke"></i> Theme</div>
<ul class="pickMode" style="display: none;">
<li class="system"><i class="fa fa-circle-half-stroke"></i> OS Default</li>
<li class="light"><i class="fa fa-sun"></i> Light</li>
<li class="dark"><i class="fa fa-moon"></i> Dark</li>
</ul>
</div>
<div id="title" style="margin-top:35px; width:620px;">
<h1 class="title" style="position:relative;"><span class="green">Open</span>SCAD</h1>
Expand Down
Loading