Skip to content

Commit 29fdeb1

Browse files
qu1ckqu1ck
committed
Add dark mode
Fixes #18
1 parent 16e76d0 commit 29fdeb1

File tree

4 files changed

+106
-3
lines changed

4 files changed

+106
-3
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
*.iml
44
test
55
releases
6+
demo

‎InteractiveHtmlBom/ibom.css

Lines changed: 87 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,12 @@ html, body {
44
font-family: Verdana, sans-serif;
55
}
66

7+
.dark {
8+
background-color: #252c30;
9+
color: #eee;
10+
}
11+
712
button {
8-
/* Gray */
913
background-color: #eee;
1014
border: 1px solid #888;
1115
color: black;
@@ -18,11 +22,19 @@ button {
1822
font-weight: bolder;
1923
}
2024

25+
.dark button {
26+
background-color: #c3b7b5; /* This will be inverted */
27+
}
28+
2129
button.depressed {
2230
background-color: #0a0;
2331
color: white;
2432
}
2533

34+
.dark button.depressed {
35+
background-color: #b3b; /* This will be inverted */
36+
}
37+
2638
button:focus {
2739
outline: 0;
2840
}
@@ -64,6 +76,10 @@ button#bom-btn {
6476
font-size: 0;
6577
}
6678

79+
.dark .button-container {
80+
filter: invert(1);
81+
}
82+
6783
@media print {
6884
.hideonprint {
6985
display: none;
@@ -114,14 +130,26 @@ canvas:active {
114130
text-align: center;
115131
}
116132

133+
.dark .bom th, .dark .bom td {
134+
border: 1px solid #777;
135+
}
136+
117137
.bom th {
118138
background-color: #CCCCCC;
119139
}
120140

141+
.dark .bom th {
142+
background-color: #3b4749;
143+
}
144+
121145
.bom tr:nth-child(even) {
122146
background-color: #f2f2f2;
123147
}
124148

149+
.dark .bom tr:nth-child(even) {
150+
background-color: #313b40;
151+
}
152+
125153
.bom tr {
126154
transition: background-color 0.2s;
127155
}
@@ -130,6 +158,10 @@ canvas:active {
130158
background-color: #cfc;
131159
}
132160

161+
.dark .bom tr:hover {
162+
background-color: #226022;
163+
}
164+
133165
.bom .numCol {
134166
width: 25px;
135167
}
@@ -168,9 +200,14 @@ canvas:active {
168200
}
169201

170202
.gutter {
171-
background-color: #eee;
203+
background-color: #ddd;
172204
background-repeat: no-repeat;
173205
background-position: 50%;
206+
transition: background-color 0.3s;
207+
}
208+
209+
.dark .gutter {
210+
background-color: #777;
174211
}
175212

176213
.gutter.gutter-horizontal {
@@ -203,10 +240,19 @@ canvas:active {
203240
background-repeat: no-repeat;
204241
}
205242

243+
.dark .searchbox {
244+
background-color: #111;
245+
color: #eee;
246+
}
247+
206248
.searchbox::placeholder {
207249
color: #ccc;
208250
}
209251

252+
.dark .searchbox::placeholder {
253+
color: #666;
254+
}
255+
210256
.filter {
211257
width: calc(60% - 10px);
212258
}
@@ -220,13 +266,23 @@ input[type=text]:focus {
220266
border: 1px solid #333;
221267
}
222268

269+
.dark input[type=text]:focus {
270+
background-color: #333;
271+
border: 1px solid #ccc;
272+
}
273+
223274
mark.highlight {
224275
background-color: #5050ff;
225276
color: #fff;
226277
padding: 2px;
227278
border-radius: 6px;
228279
}
229280

281+
.dark mark.highlight {
282+
background-color: #76a6da;
283+
color: #111;
284+
}
285+
230286
.menubtn {
231287
background-color: white;
232288
font-size: 16px;
@@ -236,6 +292,10 @@ mark.highlight {
236292
background-repeat: no-repeat;
237293
}
238294

295+
.dark .menubtn {
296+
filter: invert(1);
297+
}
298+
239299
.menu {
240300
position: relative;
241301
display: inline-block;
@@ -252,6 +312,10 @@ mark.highlight {
252312
padding: 8px;
253313
}
254314

315+
.dark .menu-content {
316+
background-color: #111;
317+
}
318+
255319
.menu:hover .menu-content {
256320
display: block;
257321
}
@@ -260,6 +324,9 @@ mark.highlight {
260324
background-color: #eee;
261325
}
262326

327+
.dark .menu:hover .menubtn {
328+
}
329+
263330
.menu-label {
264331
display: inline-block;
265332
padding: 8px;
@@ -288,6 +355,24 @@ mark.highlight {
288355
width: calc(100% - 10px);
289356
}
290357

358+
.dark .menu-textbox {
359+
background-color: #222;
360+
color: #eee;
361+
}
362+
363+
#topmostdiv {
364+
transition: background-color 0.3s;
365+
}
366+
367+
#top {
368+
height: 78px;
369+
border-bottom: 2px solid black;
370+
}
371+
372+
.dark #top {
373+
border-bottom: 2px solid #ccc;
374+
}
375+
291376
#dbg {
292377
display: none;
293378
}

‎InteractiveHtmlBom/ibom.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,16 @@
3030

3131
<body>
3232
<div id="topmostdiv" style="width: 100%; height: 100%">
33-
<div id="top" style="height: 78px; border-bottom: 2px solid black;">
33+
<div id="top">
3434
<div style="float: right;">
3535
<div class="hideonprint menu" style="float: right; margin: 10px; top: 8px;">
3636
<button class="menubtn"></button>
3737
<div class="menu-content">
3838
<label class="menu-label menu-label-top">
39+
<input id="darkmodeCheckbox" type="checkbox" onchange="setDarkMode(this.checked)">
40+
Dark mode
41+
</label>
42+
<label class="menu-label">
3943
<input id="silkscreenCheckbox" type="checkbox" checked onchange="silkscreenVisible(this.checked)">
4044
Show silkscreen
4145
</label>

‎InteractiveHtmlBom/ibom.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,15 @@ function dbg(str) {
4545
dbgdiv.textContent = str;
4646
}
4747

48+
function setDarkMode(value) {
49+
if (value) {
50+
topmostdiv.classList.add("dark");
51+
} else {
52+
topmostdiv.classList.remove("dark");
53+
}
54+
writeStorage("darkmode", value);
55+
}
56+
4857
function getStoredCheckboxRefs(checkbox) {
4958
existingRefs = readStorage("checkbox_" + checkbox);
5059
if (!existingRefs) {
@@ -454,6 +463,10 @@ window.onload = function(e) {
454463
document.getElementById("dragCheckbox").checked = false;
455464
setRedrawOnDrag(false);
456465
}
466+
if (readStorage("darkmode") === "true") {
467+
document.getElementById("darkmodeCheckbox").checked = true;
468+
setDarkMode(true);
469+
}
457470
}
458471

459472
window.onresize = resizeAll;

0 commit comments

Comments
 (0)