File size: 2,777 Bytes
6afedde |
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<button id="theme-toggle" aria-label="Toggle color theme">
<svg
class="icon light"
width="20"
height="20"
viewBox="0 0 24 24"
aria-hidden="true"
focusable="false"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="4"></line>
<line x1="12" y1="20" x2="12" y2="23"></line>
<line x1="1" y1="12" x2="4" y2="12"></line>
<line x1="20" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="4.22" x2="6.34" y2="6.34"></line>
<line x1="17.66" y1="17.66" x2="19.78" y2="19.78"></line>
<line x1="4.22" y1="19.78" x2="6.34" y2="17.66"></line>
<line x1="17.66" y1="6.34" x2="19.78" y2="4.22"></line>
</svg>
<svg
class="icon dark"
width="20"
height="20"
viewBox="0 0 24 24"
aria-hidden="true"
focusable="false"
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"></path>
</svg>
<script>
const btn = document.getElementById("theme-toggle");
const media =
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
const prefersDark = media && media.matches;
const saved = localStorage.getItem("theme"); // 'light' | 'dark' | null
const apply = (mode) => {
document.documentElement.dataset.theme = mode;
};
// Initial mode: default to light, then use localStorage, else system
apply(saved || (prefersDark ? "dark" : "light"));
// If user hasn't chosen manually, follow system changes
if (!saved && media) {
const syncWithSystem = (e) => apply(e.matches ? "dark" : "light");
if (media.addEventListener)
media.addEventListener("change", syncWithSystem);
else if (media.addListener) media.addListener(syncWithSystem);
}
const toggleTheme = () => {
const next =
document.documentElement.dataset.theme === "dark" ? "light" : "dark";
localStorage.setItem("theme", next);
apply(next);
};
if (btn) {
btn.addEventListener("click", toggleTheme);
}
</script>
</button>
<style>
#theme-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
background: transparent;
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
color: var(--text-color) !important;
}
#theme-toggle .icon.dark {
display: none;
}
[data-theme="dark"] #theme-toggle .icon.light {
display: none;
}
[data-theme="dark"] #theme-toggle .icon.dark {
display: inline;
}
#theme-toggle .icon {
filter: none !important;
}
</style>
|