Skip to content

Commit cc15c28

Browse files
Tao-VanJSTao-VanJS
committed
Complete dark theme support
1 parent 151e31b commit cc15c28

34 files changed

+198
-150
lines changed

‎404.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
100100
document.addEventListener("scroll", trackToc)
101101
addEventListener("resize", trackToc)
102102

103-
/* --------------------------------------------------------
104-
Dark / light theme handling
105-
-------------------------------------------------------- */
106-
103+
// Dark / light theme handling
107104
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
108105
const root = document.documentElement
109106
const btn = document.getElementById("theme-toggle")
@@ -118,6 +115,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
118115
document.getElementById("prism-css").href = "/code/prism-v2.css"
119116
btn.textContent = "🌙"
120117
}
118+
if (typeof updateChart === "function") updateChart()
121119
}
122120

123121
const stored = localStorage.getItem("theme")

‎about.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -173,10 +173,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
173173
document.addEventListener("scroll", trackToc)
174174
addEventListener("resize", trackToc)
175175

176-
/* --------------------------------------------------------
177-
Dark / light theme handling
178-
-------------------------------------------------------- */
179-
176+
// Dark / light theme handling
180177
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
181178
const root = document.documentElement
182179
const btn = document.getElementById("theme-toggle")
@@ -191,6 +188,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
191188
document.getElementById("prism-css").href = "/code/prism-v2.css"
192189
btn.textContent = "🌙"
193190
}
191+
if (typeof updateChart === "function") updateChart()
194192
}
195193

196194
const stored = localStorage.getItem("theme")

‎about/index.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -173,10 +173,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
173173
document.addEventListener("scroll", trackToc)
174174
addEventListener("resize", trackToc)
175175

176-
/* --------------------------------------------------------
177-
Dark / light theme handling
178-
-------------------------------------------------------- */
179-
176+
// Dark / light theme handling
180177
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
181178
const root = document.documentElement
182179
const btn = document.getElementById("theme-toggle")
@@ -191,6 +188,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
191188
document.getElementById("prism-css").href = "/code/prism-v2.css"
192189
btn.textContent = "🌙"
193190
}
191+
if (typeof updateChart === "function") updateChart()
194192
}
195193

196194
const stored = localStorage.getItem("theme")

‎advanced.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -288,10 +288,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
288288
document.addEventListener("scroll", trackToc)
289289
addEventListener("resize", trackToc)
290290

291-
/* --------------------------------------------------------
292-
Dark / light theme handling
293-
-------------------------------------------------------- */
294-
291+
// Dark / light theme handling
295292
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
296293
const root = document.documentElement
297294
const btn = document.getElementById("theme-toggle")
@@ -306,6 +303,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
306303
document.getElementById("prism-css").href = "/code/prism-v2.css"
307304
btn.textContent = "🌙"
308305
}
306+
if (typeof updateChart === "function") updateChart()
309307
}
310308

311309
const stored = localStorage.getItem("theme")

‎advanced/index.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -288,10 +288,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
288288
document.addEventListener("scroll", trackToc)
289289
addEventListener("resize", trackToc)
290290

291-
/* --------------------------------------------------------
292-
Dark / light theme handling
293-
-------------------------------------------------------- */
294-
291+
// Dark / light theme handling
295292
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
296293
const root = document.documentElement
297294
const btn = document.getElementById("theme-toggle")
@@ -306,6 +303,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
306303
document.getElementById("prism-css").href = "/code/prism-v2.css"
307304
btn.textContent = "🌙"
308305
}
306+
if (typeof updateChart === "function") updateChart()
309307
}
310308

311309
const stored = localStorage.getItem("theme")

‎convert.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
100100
document.addEventListener("scroll", trackToc)
101101
addEventListener("resize", trackToc)
102102

103-
/* --------------------------------------------------------
104-
Dark / light theme handling
105-
-------------------------------------------------------- */
106-
103+
// Dark / light theme handling
107104
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
108105
const root = document.documentElement
109106
const btn = document.getElementById("theme-toggle")
@@ -118,6 +115,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
118115
document.getElementById("prism-css").href = "/code/prism-v2.css"
119116
btn.textContent = "🌙"
120117
}
118+
if (typeof updateChart === "function") updateChart()
121119
}
122120

123121
const stored = localStorage.getItem("theme")

‎convert/index.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
100100
document.addEventListener("scroll", trackToc)
101101
addEventListener("resize", trackToc)
102102

103-
/* --------------------------------------------------------
104-
Dark / light theme handling
105-
-------------------------------------------------------- */
106-
103+
// Dark / light theme handling
107104
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
108105
const root = document.documentElement
109106
const btn = document.getElementById("theme-toggle")
@@ -118,6 +115,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
118115
document.getElementById("prism-css").href = "/code/prism-v2.css"
119116
btn.textContent = "🌙"
120117
}
118+
if (typeof updateChart === "function") updateChart()
121119
}
122120

123121
const stored = localStorage.getItem("theme")

‎converter-lib.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -245,10 +245,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
245245
document.addEventListener("scroll", trackToc)
246246
addEventListener("resize", trackToc)
247247

248-
/* --------------------------------------------------------
249-
Dark / light theme handling
250-
-------------------------------------------------------- */
251-
248+
// Dark / light theme handling
252249
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
253250
const root = document.documentElement
254251
const btn = document.getElementById("theme-toggle")
@@ -263,6 +260,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
263260
document.getElementById("prism-css").href = "/code/prism-v2.css"
264261
btn.textContent = "🌙"
265262
}
263+
if (typeof updateChart === "function") updateChart()
266264
}
267265

268266
const stored = localStorage.getItem("theme")

‎converter-lib/index.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -245,10 +245,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
245245
document.addEventListener("scroll", trackToc)
246246
addEventListener("resize", trackToc)
247247

248-
/* --------------------------------------------------------
249-
Dark / light theme handling
250-
-------------------------------------------------------- */
251-
248+
// Dark / light theme handling
252249
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
253250
const root = document.documentElement
254251
const btn = document.getElementById("theme-toggle")
@@ -263,6 +260,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
263260
document.getElementById("prism-css").href = "/code/prism-v2.css"
264261
btn.textContent = "🌙"
265262
}
263+
if (typeof updateChart === "function") updateChart()
266264
}
267265

268266
const stored = localStorage.getItem("theme")

‎demo.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -918,10 +918,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
918918
document.addEventListener("scroll", trackToc)
919919
addEventListener("resize", trackToc)
920920

921-
/* --------------------------------------------------------
922-
Dark / light theme handling
923-
-------------------------------------------------------- */
924-
921+
// Dark / light theme handling
925922
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
926923
const root = document.documentElement
927924
const btn = document.getElementById("theme-toggle")
@@ -936,6 +933,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
936933
document.getElementById("prism-css").href = "/code/prism-v2.css"
937934
btn.textContent = "🌙"
938935
}
936+
if (typeof updateChart === "function") updateChart()
939937
}
940938

941939
const stored = localStorage.getItem("theme")

‎demo/index.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -918,10 +918,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
918918
document.addEventListener("scroll", trackToc)
919919
addEventListener("resize", trackToc)
920920

921-
/* --------------------------------------------------------
922-
Dark / light theme handling
923-
-------------------------------------------------------- */
924-
921+
// Dark / light theme handling
925922
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
926923
const root = document.documentElement
927924
const btn = document.getElementById("theme-toggle")
@@ -936,6 +933,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
936933
document.getElementById("prism-css").href = "/code/prism-v2.css"
937934
btn.textContent = "🌙"
938935
}
936+
if (typeof updateChart === "function") updateChart()
939937
}
940938

941939
const stored = localStorage.getItem("theme")

‎graph.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -114,10 +114,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
114114
document.addEventListener("scroll", trackToc)
115115
addEventListener("resize", trackToc)
116116

117-
/* --------------------------------------------------------
118-
Dark / light theme handling
119-
-------------------------------------------------------- */
120-
117+
// Dark / light theme handling
121118
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
122119
const root = document.documentElement
123120
const btn = document.getElementById("theme-toggle")
@@ -132,6 +129,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
132129
document.getElementById("prism-css").href = "/code/prism-v2.css"
133130
btn.textContent = "🌙"
134131
}
132+
if (typeof updateChart === "function") updateChart()
135133
}
136134

137135
const stored = localStorage.getItem("theme")

‎graph/index.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -114,10 +114,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
114114
document.addEventListener("scroll", trackToc)
115115
addEventListener("resize", trackToc)
116116

117-
/* --------------------------------------------------------
118-
Dark / light theme handling
119-
-------------------------------------------------------- */
120-
117+
// Dark / light theme handling
121118
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
122119
const root = document.documentElement
123120
const btn = document.getElementById("theme-toggle")
@@ -132,6 +129,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
132129
document.getElementById("prism-css").href = "/code/prism-v2.css"
133130
btn.textContent = "🌙"
134131
}
132+
if (typeof updateChart === "function") updateChart()
135133
}
136134

137135
const stored = localStorage.getItem("theme")

‎home.js

+28-6
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,33 @@ const libs = [
1010
]
1111

1212
const renderSizeCompChart = gz => {
13+
const darkTheme = document.documentElement.getAttribute("data-theme") === "dark"
14+
const opts = {
15+
title: `Bundle Size Comparison (Minified${gz ? " + Gzipped" : ""})`,
16+
legend: { position: "none" },
17+
backgroundColor: darkTheme ? "#000" : undefined,
18+
chartArea: { backgroundColor: darkTheme ? "#000" : undefined },
19+
titleTextStyle: darkTheme ? { color: "#e0e0e0" } : undefined,
20+
vAxis: darkTheme ? {
21+
textStyle: { color: "#e0e0e0" },
22+
baselineColor: "#e0e0e0",
23+
gridlines: { color: '#333' }
24+
} : undefined,
25+
hAxis: {
26+
gridlines: { count: 0, color: darkTheme ? '#333' : undefined },
27+
textPosition: 'none',
28+
baselineColor: darkTheme ? "#e0e0e0" : undefined
29+
},
30+
annotations: {
31+
alwaysOutside: true,
32+
textStyle: darkTheme ? { color: "#e0e0e0", fontSize: 12 } : undefined
33+
},
34+
tooltip: darkTheme ? {
35+
isHtml: true,
36+
textStyle: { color: "#e0e0e0", fontSize: 12 }
37+
} : {},
38+
}
39+
1340
new google.visualization.BarChart(document.getElementById("size-comp")).draw(
1441
google.visualization.arrayToDataTable(
1542
[["Framework", "Size", {role: "style"}, {role: "annotation"}]].concat(
@@ -19,12 +46,7 @@ const renderSizeCompChart = gz => {
1946
})
2047
)
2148
),
22-
{
23-
title: `Bundle Size Comparison (Minified${gz ? " + Gzipped" : ""})`,
24-
legend: {position: "none"},
25-
hAxis: {gridlines: {count: 0}, textPosition: "none"},
26-
annotations: {alwaysOutside: true},
27-
},
49+
opts,
2850
)
2951
}
3052

‎index.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -123,10 +123,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
123123
document.addEventListener("scroll", trackToc)
124124
addEventListener("resize", trackToc)
125125

126-
/* --------------------------------------------------------
127-
Dark / light theme handling
128-
-------------------------------------------------------- */
129-
126+
// Dark / light theme handling
130127
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
131128
const root = document.documentElement
132129
const btn = document.getElementById("theme-toggle")
@@ -141,6 +138,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
141138
document.getElementById("prism-css").href = "/code/prism-v2.css"
142139
btn.textContent = "🌙"
143140
}
141+
if (typeof updateChart === "function") updateChart()
144142
}
145143

146144
const stored = localStorage.getItem("theme")

‎jsfiddle/tutorial/font-preview/demo.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
const {input, option, select, span} = van.tags
22

33
const FontPreview = () => {
4-
const size = van.state(16), color = van.state("black")
4+
const size = van.state(16), color = van.state("blue")
55
return span(
66
"Size: ",
77
input({type: "range", min: 10, max: 36, value: size,
88
oninput: e => size.val = e.target.value}),
99
" Color: ",
1010
select({oninput: e => color.val = e.target.value},
11-
["black", "blue", "green", "red", "brown"]
12-
.map(c => option({selected: () => color.val === c}, c)),
11+
["blue", "green", "red", "brown"].map(c => option({selected: () => color.val === c}, c)),
1312
),
1413
// The <span> element below has a state-derived property `style`
1514
span({style: () => `font-size: ${size.val}px; color: ${color.val};`}, " Hello 🍦VanJS"),

‎media.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
100100
document.addEventListener("scroll", trackToc)
101101
addEventListener("resize", trackToc)
102102

103-
/* --------------------------------------------------------
104-
Dark / light theme handling
105-
-------------------------------------------------------- */
106-
103+
// Dark / light theme handling
107104
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
108105
const root = document.documentElement
109106
const btn = document.getElementById("theme-toggle")
@@ -118,6 +115,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
118115
document.getElementById("prism-css").href = "/code/prism-v2.css"
119116
btn.textContent = "🌙"
120117
}
118+
if (typeof updateChart === "function") updateChart()
121119
}
122120

123121
const stored = localStorage.getItem("theme")

‎media/index.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
100100
document.addEventListener("scroll", trackToc)
101101
addEventListener("resize", trackToc)
102102

103-
/* --------------------------------------------------------
104-
Dark / light theme handling
105-
-------------------------------------------------------- */
106-
103+
// Dark / light theme handling
107104
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
108105
const root = document.documentElement
109106
const btn = document.getElementById("theme-toggle")
@@ -118,6 +115,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
118115
document.getElementById("prism-css").href = "/code/prism-v2.css"
119116
btn.textContent = "🌙"
120117
}
118+
if (typeof updateChart === "function") updateChart()
121119
}
122120

123121
const stored = localStorage.getItem("theme")

0 commit comments

Comments
 (0)