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

dark mode icon

This commit is contained in:
Christoph J. Scherr 2023-05-31 00:25:28 +02:00
parent 07a7ab6f8c
commit 91447b1ba9
Signed by: PlexSheep
GPG Key ID: 25B4ACF7D88186CC
1 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,17 +2,18 @@
{% load helper_tags %} {% load helper_tags %}
{% load static %} {% load static %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{% block languagecode %}{% endblock languagecode %}"> {% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE }}">
<head> <head>
<title>{% block title %}{% endblock title %}</title> <title>{% block title %}{% endblock title %}</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script> <script>
const setTheme = theme => { const setTheme = theme => {
document.documentElement.setAttribute('data-bs-theme', theme) document.documentElement.setAttribute('data-bs-theme', theme)
} }
setTheme(localStorage.getItem('theme')); setTheme(localStorage.getItem('theme'));
</script> </script>
</head> </head>
@ -46,7 +47,6 @@
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
{% get_available_languages as languages %} {% get_available_languages as languages %}
{% get_current_language as LANGUAGE_CODE %}
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{ LANGUAGE_CODE }} {{ LANGUAGE_CODE }}
</a> </a>
@ -61,7 +61,29 @@
</ul> </ul>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<button type="button" class="btn btn-outline-light" id="toggleThemeButton">Toggle Dark/Light</button> <button type="button" class="btn btn-dark" id="toggleThemeButton">
<i id="toggleThemeIcon" class="bi bi-sun"></i>
</button>
<script>
'use strict'
let i = document.getElementById("toggleThemeIcon").className = "bi bi-sun";
const storedTheme = localStorage.getItem('theme');
if (storedTheme == null) {
localStorage.setItem("theme", "light");
document.getElementById("toggleThemeIcon").className = "bi bi-sun-fill";
setTheme("light");
}
else if (storedTheme == "dark") {
localStorage.setItem("theme", "dark");
document.getElementById("toggleThemeIcon").className = "bi bi-sun";
setTheme("dark");
}
else if (storedTheme == "light") {
localStorage.setItem("theme", "light");
document.getElementById("toggleThemeIcon").className = "bi bi-sun-fill";
setTheme("light");
}
</script>
</li> </li>
</ul> </ul>
{% block MainSearchFormSpace %} {% block MainSearchFormSpace %}
@ -147,7 +169,7 @@
</div> </div>
</div> </div>
</section> </section>
<div class="text-center p-4 bg-black"> <div class="text-center p-4 bg-black text-light">
© 2023 Christoph J. Scherr © 2023 Christoph J. Scherr
<br> <br>
<a class="text-reset fw-bold" href="https://www.cscherr.de/">cscherr.de</a> <a class="text-reset fw-bold" href="https://www.cscherr.de/">cscherr.de</a>
@ -160,14 +182,17 @@
const storedTheme = localStorage.getItem('theme'); const storedTheme = localStorage.getItem('theme');
if (storedTheme == null) { if (storedTheme == null) {
localStorage.setItem("theme", "dark"); localStorage.setItem("theme", "dark");
document.getElementById("toggleThemeIcon").className = "bi bi-sun";
setTheme("dark"); setTheme("dark");
} }
else if (storedTheme == "dark") { else if (storedTheme == "dark") {
localStorage.setItem("theme", "light"); localStorage.setItem("theme", "light");
document.getElementById("toggleThemeIcon").className = "bi bi-sun-fill";
setTheme("light"); setTheme("light");
} }
else if (storedTheme == "light") { else if (storedTheme == "light") {
localStorage.setItem("theme", "dark"); localStorage.setItem("theme", "dark");
document.getElementById("toggleThemeIcon").className = "bi bi-sun";
setTheme("dark"); setTheme("dark");
} }
}; };