toggle dark mode
This commit is contained in:
parent
f4ca9a8835
commit
5daab0faba
|
@ -46,13 +46,16 @@
|
|||
<ul class="dropdown-menu">
|
||||
{% for lang_code, lang_name in languages %}
|
||||
<li><a class="dropdown-item"
|
||||
href="{{ request.scheme }}://{{ request.META.HTTP_HOST }}{% change_lang lang_code %}?{{ request.GET.urlencode }}">
|
||||
{{ lang_name }}</a></li>
|
||||
href="{{ request.scheme }}://{{ request.META.HTTP_HOST }}{% change_lang lang_code %}?{{ request.GET.urlencode }}">
|
||||
{{ lang_name }}</a></li>
|
||||
{% endfor %}
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<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>
|
||||
|
|
Loading…
Reference in New Issue