Toggle light and dark modes + header color

This commit is contained in:
William Bouzourène 2025-01-17 00:05:34 +01:00
parent d40bc51101
commit b7f0d6f8b2
Signed by: bouzoure
SSH key fingerprint: SHA256:19MbXpLua4rUtk8tunMesD8KUKb91LXLHg8E/qTooww
6 changed files with 118 additions and 10 deletions

View file

@ -1,5 +1,5 @@
<!doctype html>
<html lang="fr" class="h-100" data-bs-theme="dark">
<html lang="fr" class="h-100" data-bs-theme="{{ Globals.ColorMode }}">
{% include "partials/easter_egg.html" %}
<head>
<meta charset="UTF-8">

View file

@ -1,4 +1,4 @@
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<nav class="navbar navbar-expand-lg bg-danger" data-bs-theme="dark">
<div class="container-fluid">
<a href="/" class="navbar-brand">
<img
@ -9,7 +9,6 @@
>
</a>
{% if Globals.LoggedIn %}
<button
class="navbar-toggler"
type="button"
@ -24,12 +23,12 @@
{% if Globals.TotpVerified %}
<li class="nav-item">
<a class="nav-link" href="/members">
<i class="bi-people me-2"></i>Membres
<a class="nav-link active" href="/members">
<i class="bi-people acti me-2"></i>Membres
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contacts">
<a class="nav-link active" href="/contacts">
<i class="bi-telephone me-2"></i>Contacts
</a>
</li>
@ -38,7 +37,7 @@
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
class="nav-link active dropdown-toggle"
href="javascript:;"
role="button"
data-bs-toggle="dropdown"
@ -80,9 +79,24 @@
</ul>
<div class="d-flex">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<a
class="nav-link toggle-dark-mode active"
href="javascript:;"
data-bs-toggle="tooltip"
data-bs-title="Basculer entre le mode jour et le mode nuit"
>
{% if Globals.ColorMode == "dark" %}
<i class="bi-sun"></i>
{% else %}
<i class="bi-moon"></i>
{% endif %}
</a>
{% if Globals.LoggedIn %}
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
class="nav-link active dropdown-toggle"
href="javascript:;"
role="button"
data-bs-toggle="dropdown"
@ -113,10 +127,10 @@
</li>
</ul>
</li>
{% endif %}
</ul>
</div>
</div>
{% endif %}
</div>
</nav>