Repository navigation
Expand file tree
/
Copy pathhead_custom.html
More file actions
54 lines (48 loc) · 2.14 KB
/
Copy pathhead_custom.html
File metadata and controls
54 lines (48 loc) · 2.14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<style>
.theme-toggle {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 999;
background: var(--body-background-color);
border: 1px solid var(--border-color);
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: transform 0.2s ease;
}
.theme-toggle:hover {
transform: scale(1.1);
}
</style>
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode"></button>
<script>
(function () {
var btn = document.getElementById("theme-toggle");
var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
var current = localStorage.getItem("theme") || (prefersDark ? "dark" : "light");
function apply(theme) {
jtd.setTheme(theme);
btn.innerHTML = theme === "dark"
? '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>'
: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
localStorage.setItem("theme", theme);
}
apply(current);
btn.addEventListener("click", function () {
var next = localStorage.getItem("theme") === "dark" ? "light" : "dark";
apply(next);
});
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function (e) {
if (!localStorage.getItem("theme")) {
apply(e.matches ? "dark" : "light");
}
});
})();
</script>