Skip to content

Commit 151e31b

Browse files
Tao-VanJSTao-VanJS
committed
Dark theme partial progress
1 parent e1eb6a7 commit 151e31b

32 files changed

+1403
-30
lines changed

‎404.html

+45-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414
</style>
1515
<link rel="stylesheet" href="/code/w3-v1.css">
16-
<link rel="stylesheet" href="/code/prism-v1.css">
16+
<link id="prism-css" rel="stylesheet" href="">
1717
<link rel="stylesheet" href="/vanjs.css">
1818
</head>
1919
<body class="line-numbers" data-prismjs-copy="📋">
@@ -50,6 +50,11 @@ <h1 class="w3-padding-16 w3-xxxlarge">
5050
<!-- Overlay effect when opening sidebar on small screens -->
5151
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
5252

53+
<!-- Dark‑/light‑mode toggle button -->
54+
<button id="theme-toggle" title="Toggle dark / light mode" style="position:fixed;top:15px;right:20px;background:none;border:none;font-size:22px;cursor:pointer;z-index:30;">
55+
🌙
56+
</button>
57+
5358
<!-- !PAGE CONTENT! -->
5459
<div class="w3-main" style="margin-left:300px;">
5560
<div id="page">
@@ -95,6 +100,45 @@ <h1 class="w3-padding-16 w3-xxxlarge">
95100
document.addEventListener("scroll", trackToc)
96101
addEventListener("resize", trackToc)
97102

103+
/* --------------------------------------------------------
104+
Dark / light theme handling
105+
-------------------------------------------------------- */
106+
107+
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
108+
const root = document.documentElement
109+
const btn = document.getElementById("theme-toggle")
110+
111+
const applyTheme = theme => {
112+
if (theme === "dark") {
113+
root.setAttribute("data-theme", "dark")
114+
document.getElementById("prism-css").href = "/code/prism-v2-dark.css"
115+
btn.textContent = "☀️"
116+
} else {
117+
root.removeAttribute("data-theme")
118+
document.getElementById("prism-css").href = "/code/prism-v2.css"
119+
btn.textContent = "🌙"
120+
}
121+
}
122+
123+
const stored = localStorage.getItem("theme")
124+
125+
if (stored === "light" || stored === "dark")
126+
applyTheme(stored)
127+
else
128+
applyTheme(prefersDarkMq.matches ? "dark" : "light")
129+
130+
btn.addEventListener("click", () => {
131+
const current = root.getAttribute("data-theme") === "dark" ? "dark" : "light"
132+
const next = current === "dark" ? "light" : "dark"
133+
localStorage.setItem("theme", next)
134+
applyTheme(next)
135+
})
136+
137+
prefersDarkMq.addEventListener("change", e => {
138+
if (!localStorage.getItem("theme"))
139+
applyTheme(e.matches ? "dark" : "light")
140+
})
141+
98142
const copy = e => {
99143
const file = e.previousElementSibling.innerText
100144
const importLine = file.includes("nomodule") ?

‎about.html

+45-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414
</style>
1515
<link rel="stylesheet" href="/code/w3-v1.css">
16-
<link rel="stylesheet" href="/code/prism-v1.css">
16+
<link id="prism-css" rel="stylesheet" href="">
1717
<link rel="stylesheet" href="/vanjs.css">
1818
</head>
1919
<body class="line-numbers" data-prismjs-copy="📋">
@@ -50,6 +50,11 @@ <h1 class="w3-padding-16 w3-xxxlarge">
5050
<!-- Overlay effect when opening sidebar on small screens -->
5151
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
5252

53+
<!-- Dark‑/light‑mode toggle button -->
54+
<button id="theme-toggle" title="Toggle dark / light mode" style="position:fixed;top:15px;right:20px;background:none;border:none;font-size:22px;cursor:pointer;z-index:30;">
55+
🌙
56+
</button>
57+
5358
<!-- !PAGE CONTENT! -->
5459
<div class="w3-main" style="margin-left:300px;">
5560
<div id="page">
@@ -168,6 +173,45 @@ <h1 class="w3-padding-16 w3-xxxlarge">
168173
document.addEventListener("scroll", trackToc)
169174
addEventListener("resize", trackToc)
170175

176+
/* --------------------------------------------------------
177+
Dark / light theme handling
178+
-------------------------------------------------------- */
179+
180+
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
181+
const root = document.documentElement
182+
const btn = document.getElementById("theme-toggle")
183+
184+
const applyTheme = theme => {
185+
if (theme === "dark") {
186+
root.setAttribute("data-theme", "dark")
187+
document.getElementById("prism-css").href = "/code/prism-v2-dark.css"
188+
btn.textContent = "☀️"
189+
} else {
190+
root.removeAttribute("data-theme")
191+
document.getElementById("prism-css").href = "/code/prism-v2.css"
192+
btn.textContent = "🌙"
193+
}
194+
}
195+
196+
const stored = localStorage.getItem("theme")
197+
198+
if (stored === "light" || stored === "dark")
199+
applyTheme(stored)
200+
else
201+
applyTheme(prefersDarkMq.matches ? "dark" : "light")
202+
203+
btn.addEventListener("click", () => {
204+
const current = root.getAttribute("data-theme") === "dark" ? "dark" : "light"
205+
const next = current === "dark" ? "light" : "dark"
206+
localStorage.setItem("theme", next)
207+
applyTheme(next)
208+
})
209+
210+
prefersDarkMq.addEventListener("change", e => {
211+
if (!localStorage.getItem("theme"))
212+
applyTheme(e.matches ? "dark" : "light")
213+
})
214+
171215
const copy = e => {
172216
const file = e.previousElementSibling.innerText
173217
const importLine = file.includes("nomodule") ?

‎about/index.html

+45-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414
</style>
1515
<link rel="stylesheet" href="/code/w3-v1.css">
16-
<link rel="stylesheet" href="/code/prism-v1.css">
16+
<link id="prism-css" rel="stylesheet" href="">
1717
<link rel="stylesheet" href="/vanjs.css">
1818
</head>
1919
<body class="line-numbers" data-prismjs-copy="📋">
@@ -50,6 +50,11 @@ <h1 class="w3-padding-16 w3-xxxlarge">
5050
<!-- Overlay effect when opening sidebar on small screens -->
5151
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
5252

53+
<!-- Dark‑/light‑mode toggle button -->
54+
<button id="theme-toggle" title="Toggle dark / light mode" style="position:fixed;top:15px;right:20px;background:none;border:none;font-size:22px;cursor:pointer;z-index:30;">
55+
🌙
56+
</button>
57+
5358
<!-- !PAGE CONTENT! -->
5459
<div class="w3-main" style="margin-left:300px;">
5560
<div id="page">
@@ -168,6 +173,45 @@ <h1 class="w3-padding-16 w3-xxxlarge">
168173
document.addEventListener("scroll", trackToc)
169174
addEventListener("resize", trackToc)
170175

176+
/* --------------------------------------------------------
177+
Dark / light theme handling
178+
-------------------------------------------------------- */
179+
180+
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
181+
const root = document.documentElement
182+
const btn = document.getElementById("theme-toggle")
183+
184+
const applyTheme = theme => {
185+
if (theme === "dark") {
186+
root.setAttribute("data-theme", "dark")
187+
document.getElementById("prism-css").href = "/code/prism-v2-dark.css"
188+
btn.textContent = "☀️"
189+
} else {
190+
root.removeAttribute("data-theme")
191+
document.getElementById("prism-css").href = "/code/prism-v2.css"
192+
btn.textContent = "🌙"
193+
}
194+
}
195+
196+
const stored = localStorage.getItem("theme")
197+
198+
if (stored === "light" || stored === "dark")
199+
applyTheme(stored)
200+
else
201+
applyTheme(prefersDarkMq.matches ? "dark" : "light")
202+
203+
btn.addEventListener("click", () => {
204+
const current = root.getAttribute("data-theme") === "dark" ? "dark" : "light"
205+
const next = current === "dark" ? "light" : "dark"
206+
localStorage.setItem("theme", next)
207+
applyTheme(next)
208+
})
209+
210+
prefersDarkMq.addEventListener("change", e => {
211+
if (!localStorage.getItem("theme"))
212+
applyTheme(e.matches ? "dark" : "light")
213+
})
214+
171215
const copy = e => {
172216
const file = e.previousElementSibling.innerText
173217
const importLine = file.includes("nomodule") ?

‎advanced.html

+45-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414
</style>
1515
<link rel="stylesheet" href="/code/w3-v1.css">
16-
<link rel="stylesheet" href="/code/prism-v1.css">
16+
<link id="prism-css" rel="stylesheet" href="">
1717
<link rel="stylesheet" href="/vanjs.css">
1818
</head>
1919
<body class="line-numbers" data-prismjs-copy="📋">
@@ -50,6 +50,11 @@ <h1 class="w3-padding-16 w3-xxxlarge">
5050
<!-- Overlay effect when opening sidebar on small screens -->
5151
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
5252

53+
<!-- Dark‑/light‑mode toggle button -->
54+
<button id="theme-toggle" title="Toggle dark / light mode" style="position:fixed;top:15px;right:20px;background:none;border:none;font-size:22px;cursor:pointer;z-index:30;">
55+
🌙
56+
</button>
57+
5358
<!-- !PAGE CONTENT! -->
5459
<div class="w3-main" style="margin-left:300px;">
5560
<div id="page">
@@ -283,6 +288,45 @@ <h1 class="w3-padding-16 w3-xxxlarge">
283288
document.addEventListener("scroll", trackToc)
284289
addEventListener("resize", trackToc)
285290

291+
/* --------------------------------------------------------
292+
Dark / light theme handling
293+
-------------------------------------------------------- */
294+
295+
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
296+
const root = document.documentElement
297+
const btn = document.getElementById("theme-toggle")
298+
299+
const applyTheme = theme => {
300+
if (theme === "dark") {
301+
root.setAttribute("data-theme", "dark")
302+
document.getElementById("prism-css").href = "/code/prism-v2-dark.css"
303+
btn.textContent = "☀️"
304+
} else {
305+
root.removeAttribute("data-theme")
306+
document.getElementById("prism-css").href = "/code/prism-v2.css"
307+
btn.textContent = "🌙"
308+
}
309+
}
310+
311+
const stored = localStorage.getItem("theme")
312+
313+
if (stored === "light" || stored === "dark")
314+
applyTheme(stored)
315+
else
316+
applyTheme(prefersDarkMq.matches ? "dark" : "light")
317+
318+
btn.addEventListener("click", () => {
319+
const current = root.getAttribute("data-theme") === "dark" ? "dark" : "light"
320+
const next = current === "dark" ? "light" : "dark"
321+
localStorage.setItem("theme", next)
322+
applyTheme(next)
323+
})
324+
325+
prefersDarkMq.addEventListener("change", e => {
326+
if (!localStorage.getItem("theme"))
327+
applyTheme(e.matches ? "dark" : "light")
328+
})
329+
286330
const copy = e => {
287331
const file = e.previousElementSibling.innerText
288332
const importLine = file.includes("nomodule") ?

‎advanced/index.html

+45-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414
</style>
1515
<link rel="stylesheet" href="/code/w3-v1.css">
16-
<link rel="stylesheet" href="/code/prism-v1.css">
16+
<link id="prism-css" rel="stylesheet" href="">
1717
<link rel="stylesheet" href="/vanjs.css">
1818
</head>
1919
<body class="line-numbers" data-prismjs-copy="📋">
@@ -50,6 +50,11 @@ <h1 class="w3-padding-16 w3-xxxlarge">
5050
<!-- Overlay effect when opening sidebar on small screens -->
5151
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
5252

53+
<!-- Dark‑/light‑mode toggle button -->
54+
<button id="theme-toggle" title="Toggle dark / light mode" style="position:fixed;top:15px;right:20px;background:none;border:none;font-size:22px;cursor:pointer;z-index:30;">
55+
🌙
56+
</button>
57+
5358
<!-- !PAGE CONTENT! -->
5459
<div class="w3-main" style="margin-left:300px;">
5560
<div id="page">
@@ -283,6 +288,45 @@ <h1 class="w3-padding-16 w3-xxxlarge">
283288
document.addEventListener("scroll", trackToc)
284289
addEventListener("resize", trackToc)
285290

291+
/* --------------------------------------------------------
292+
Dark / light theme handling
293+
-------------------------------------------------------- */
294+
295+
const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")
296+
const root = document.documentElement
297+
const btn = document.getElementById("theme-toggle")
298+
299+
const applyTheme = theme => {
300+
if (theme === "dark") {
301+
root.setAttribute("data-theme", "dark")
302+
document.getElementById("prism-css").href = "/code/prism-v2-dark.css"
303+
btn.textContent = "☀️"
304+
} else {
305+
root.removeAttribute("data-theme")
306+
document.getElementById("prism-css").href = "/code/prism-v2.css"
307+
btn.textContent = "🌙"
308+
}
309+
}
310+
311+
const stored = localStorage.getItem("theme")
312+
313+
if (stored === "light" || stored === "dark")
314+
applyTheme(stored)
315+
else
316+
applyTheme(prefersDarkMq.matches ? "dark" : "light")
317+
318+
btn.addEventListener("click", () => {
319+
const current = root.getAttribute("data-theme") === "dark" ? "dark" : "light"
320+
const next = current === "dark" ? "light" : "dark"
321+
localStorage.setItem("theme", next)
322+
applyTheme(next)
323+
})
324+
325+
prefersDarkMq.addEventListener("change", e => {
326+
if (!localStorage.getItem("theme"))
327+
applyTheme(e.matches ? "dark" : "light")
328+
})
329+
286330
const copy = e => {
287331
const file = e.previousElementSibling.innerText
288332
const importLine = file.includes("nomodule") ?

‎code/prism-v2-dark.css

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)