PlexSheep
/
gawa
1
0
Fork 0
Code Issues 27 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

toggle dark mode

This commit is contained in:
Christoph J. Scherr 2023-05-30 23:53:14 +02:00
parent f4ca9a8835
commit 5daab0faba
Signed by: PlexSheep
GPG Key ID: 25B4ACF7D88186CC
1 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
gawa/start/templates/start/base.html
View File

@ -53,6 +53,9 @@
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<button type="button" class="btn btn-outline-light" id="toggleThemeButton">Toggle Dark/Light</button>
</li>
</ul>
{% block MainSearchFormSpace %}
<form class="d-flex" role="search" action="{% url 'start:search' %}" method="GET">
@ -63,14 +66,10 @@
</div>
</div>
</nav>
{% get_available_languages as languages %}
{% for lang_code, lang_name in languages %}
<a href="{{ request.scheme }}://{{ request.META.HTTP_HOST }}{% change_lang lang_code %}">sus</a>
{% endfor %}
<main>
{% block main %}{% endblock main %}
</main>
<footer class="text-center text-lg-start bg-dark text-light">
<footer class="text-center text-lg-start bg-dark-subtle text-muted">
<div class="container overflow-hidden text-center">
<div class="row gy-5">
<div class="col-6">
@ -148,5 +147,32 @@
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script>
'use strict'
const getStoredTheme = () => localStorage.getItem('theme')
const setStoredTheme = theme => localStorage.setItem('theme', theme)
const setTheme = theme => {
document.documentElement.setAttribute('data-bs-theme', theme)
}
document.getElementById("toggleThemeButton").onclick = function () {
const storedTheme = localStorage.getItem('theme')
if (storedTheme == null) {
setStoredTheme("dark");
setTheme("dark");
}
else if (storedTheme == "dark") {
setStoredTheme("light");
setTheme("light");
}
else if (storedTheme == "light") {
setStoredTheme("dark");
setTheme("dark");
}
};
</script>
</body>
</html>