dark mode icon
This commit is contained in:
parent
07a7ab6f8c
commit
91447b1ba9
|
@ -2,17 +2,18 @@
|
|||
{% load helper_tags %}
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="{% block languagecode %}{% endblock languagecode %}">
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
<html lang="{{ LANGUAGE_CODE }}">
|
||||
<head>
|
||||
<title>{% block title %}{% endblock title %}</title>
|
||||
<meta charset="utf-8">
|
||||
<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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
||||
<script>
|
||||
const setTheme = theme => {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme)
|
||||
}
|
||||
|
||||
setTheme(localStorage.getItem('theme'));
|
||||
</script>
|
||||
</head>
|
||||
|
@ -46,7 +47,6 @@
|
|||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
{% 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">
|
||||
{{ LANGUAGE_CODE }}
|
||||
</a>
|
||||
|
@ -61,7 +61,29 @@
|
|||
</ul>
|
||||
</li>
|
||||
<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>
|
||||
</ul>
|
||||
{% block MainSearchFormSpace %}
|
||||
|
@ -147,7 +169,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="text-center p-4 bg-black">
|
||||
<div class="text-center p-4 bg-black text-light">
|
||||
© 2023 Christoph J. Scherr
|
||||
<br>
|
||||
<a class="text-reset fw-bold" href="https://www.cscherr.de/">cscherr.de</a>
|
||||
|
@ -160,14 +182,17 @@
|
|||
const storedTheme = localStorage.getItem('theme');
|
||||
if (storedTheme == null) {
|
||||
localStorage.setItem("theme", "dark");
|
||||
document.getElementById("toggleThemeIcon").className = "bi bi-sun";
|
||||
setTheme("dark");
|
||||
}
|
||||
else if (storedTheme == "dark") {
|
||||
localStorage.setItem("theme", "light");
|
||||
document.getElementById("toggleThemeIcon").className = "bi bi-sun-fill";
|
||||
setTheme("light");
|
||||
}
|
||||
else if (storedTheme == "light") {
|
||||
localStorage.setItem("theme", "dark");
|
||||
document.getElementById("toggleThemeIcon").className = "bi bi-sun";
|
||||
setTheme("dark");
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue