Skip to content

Commit a3003e2

Browse files
authored
Persist light theme on refresh (#513)
Fixes - #414 ... using the workaround suggested in - just-the-docs/just-the-docs#1223 (comment). Worth spending a bit of thought on whether we want more lines of my hacky JS code saving the theme to local storage, which we potentially can't delete until [jtd/#1223](just-the-docs/just-the-docs#1223) is solved nicely upstream. ### Question: Is it worth switching build system to something that supports theme toggling and inferring theme from the browser/os settings? It feels like it's the responsibility of the doc engine/doc theme. E.g. [Material for MkDocs supports it](https://github.com/UCL-ARC/mkdocs-rc-docs/blob/140e8fe5eef0379997af1b2eaaf396786bc006b8/mkdocs-project-dir/mkdocs.yml#L28). That said, if you're happy with these lines, I am.
1 parent bfee697 commit a3003e2

1 file changed

Lines changed: 15 additions & 1 deletion

File tree

docs/_includes/header_custom.html

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

33
<script>
44
const toggleDarkMode = document.querySelector(".js-toggle-dark-mode");
5-
65
jtd.addEvent(toggleDarkMode, "click", function () {
76
if (jtd.getTheme() === "light") {
87
jtd.setTheme("dark");
98
toggleDarkMode.textContent = "☼";
9+
localStorage.setItem("theme", "dark");
10+
} else {
11+
jtd.setTheme("light");
12+
toggleDarkMode.textContent = "☾";
13+
localStorage.setItem("theme", "light");
14+
}
15+
});
16+
17+
/* TODO: we can probably delete this (hacky workaround) if/when just-the-docs/#1223 is fixed.
18+
* Meanwhile, we check each time if there is a theme written to local storage and obey it.
19+
*/
20+
window.addEventListener("DOMContentLoaded", function () {
21+
if (localStorage.getItem("theme") === "dark") {
22+
jtd.setTheme("dark");
23+
toggleDarkMode.textContent = "☼";
1024
} else {
1125
jtd.setTheme("light");
1226
toggleDarkMode.textContent = "☾";

0 commit comments

Comments
 (0)