bouzoure/pop-camarades
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Toggle light and dark modes + header color

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

31
controllers/misc.go Normal file
View file

@ -0,0 +1,31 @@
package controllers
import (
"fmt"
"git.readonly.ch/bouzoure/pop-camarades/helpers"
"github.com/gofiber/fiber/v2"
)
func SetColorMode(c *fiber.Ctx) error {
colorMode := "light"
if c.FormValue("color_mode") == "dark" {
colorMode = "dark"
}
sess, err := helpers.GetSessionStore(c)
if err != nil {
return err
}
sess.Set("color-mode", colorMode)
err = sess.Save()
if err != nil {
return err
}
return c.SendString(fmt.Sprintf(
"New color mode: %s",
colorMode,
))
}

3
main.go
View file

@ -88,6 +88,9 @@ func main() {
app.Use(loggerMiddleware.New())
app.Use(helmet.New())
// Misc endpoints without auth
app.Post("/set-color-mode", controllers.SetColorMode)
// Security middlewares
app.Use(middlewares.SavedSessionMiddleware)
app.Use(middlewares.AuthMiddleware)

7
middlewares/templates.go
View file

@ -17,6 +17,7 @@ type TemplatesGlobals struct {
UserFullname string
UserIsAdmin bool
TimeStart time.Time
ColorMode string
}
func TemplatesMiddleware(c *fiber.Ctx) error {
@ -28,6 +29,12 @@ func TemplatesMiddleware(c *fiber.Ctx) error {
return err
}
globals.ColorMode = "auto"
colorMode := sess.Get("color-mode")
if colorMode == "dark" || colorMode == "light" {
globals.ColorMode = colorMode.(string)
}
userid := sess.Get("userid")
if userid != nil {
switch userid.(type) {

55
static/functions.js
View file

@ -3,5 +3,58 @@ $(document).ready(function() {
if(!confirm("Êtes-vous sûr ?")) {
e.preventDefault();
}
})
});
});
$(document).ready(function() {
$(".toggle-dark-mode").on("click", function() {
var currentState = $("html").attr("data-bs-theme");
var newState = "dark";
if (currentState === "dark") {
newState = "light";
}
setColorMode(newState);
});
});
$(document).ready(function() {
var currentState = $("html").attr("data-bs-theme");
var storedState = localStorage.getItem("color-mode");
if (storedState && storedState !== currentState) {
return setColorMode(storedState);
}
if (currentState === "auto") {
var newState = "light";
if (
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
newState = "dark";
}
return setColorMode(newState);
}
});
function setColorMode(color) {
if (color == "dark") {
$(".toggle-dark-mode").children("i").removeClass("bi-moon");
$(".toggle-dark-mode").children("i").addClass("bi-sun");
} else {
$(".toggle-dark-mode").children("i").removeClass("bi-sun");
$(".toggle-dark-mode").children("i").addClass("bi-moon");
}
$("html").attr("data-bs-theme", color);
localStorage.setItem("color-mode", color);
$.post("/set-color-mode", {color_mode: color});
}
$(document).ready(function() {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
});

2
views/layouts/main.html
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">

30
views/partials/header.html
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>