badblocks/pkmntrade.club
1
1
Fork 0
Code Issues 14 Pull requests Projects 1 Releases Packages Wiki Activity

Allow theme button to toggle between 3 themes: system (prefers-dark-theme), dark, light

Browse source
This commit is contained in:
badblocks 2025-03-27 23:16:10 -07:00
parent b9c4d7a61d
commit 2cb35e853d
2 changed files with 25 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

17
theme/templates/base.html
View file

@ -5,7 +5,7 @@
{% url 'settings' as settings_url %}
<!DOCTYPE html>
<html lang="en" data-theme="light">
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -14,13 +14,16 @@
<!-- Inline script to set the theme before rendering -->
<script>
(function () {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.documentElement.classList.add('dark');
document.documentElement.setAttribute('data-theme', 'dark');
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
document.documentElement.classList.toggle(
"dark",
localStorage.getItem("theme") === "dark" ||
(!(localStorage.getItem("theme")) && window.matchMedia("(prefers-color-scheme: dark)").matches)
);
if (localStorage.getItem("theme")) {
document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
} else {
document.documentElement.classList.remove('dark');
document.documentElement.setAttribute('data-theme', 'light');
document.documentElement.setAttribute("data-theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
}
})();
</script>