Agregar soporte para tema claro/oscuro

This commit is contained in:
2026-02-19 14:20:29 -06:00
parent 38a8447a64
commit b79a03e379
3 changed files with 56 additions and 5 deletions

31
templates/header.php Executable file → Normal file
View File

@@ -4,9 +4,10 @@ require_once __DIR__ . '/../includes/session_check.php';
require_once __DIR__ . '/../includes/url_helper.php';
$currentPage = basename($_SERVER['PHP_SELF']);
$theme = $_COOKIE['theme'] ?? 'light';
?>
<!DOCTYPE html>
<html lang="es">
<html lang="es" data-bs-theme="<?= $theme ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -19,9 +20,22 @@ $currentPage = basename($_SERVER['PHP_SELF']);
--discord-color: #5865F2;
--telegram-color: #0088cc;
}
[data-bs-theme="dark"] {
--sidebar-bg: #1a1a2e;
}
[data-bs-theme="light"] {
--sidebar-bg: #1a1a2e;
}
.sidebar {
min-height: 100vh;
background: #1a1a2e;
background: var(--sidebar-bg);
}
[data-bs-theme="dark"] .card-header.bg-white,
[data-bs-theme="dark"] .bg-white:not(.btn):not(.nav-link):not(.dropdown-menu) {
background-color: var(--bs-body-bg) !important;
}
[data-bs-theme="dark"] .bg-light {
background-color: var(--bs-tertiary-bg) !important;
}
.sidebar .nav-link {
color: rgba(255,255,255,0.7);
@@ -29,6 +43,14 @@ $currentPage = basename($_SERVER['PHP_SELF']);
border-radius: 8px;
margin: 4px 8px;
}
#theme-toggle {
color: rgba(255,255,255,0.7);
border: none;
background: transparent;
}
#theme-toggle:hover {
color: white;
}
.sidebar .nav-link:hover, .sidebar .nav-link.active {
background: rgba(255,255,255,0.1);
color: white;
@@ -45,7 +67,10 @@ $currentPage = basename($_SERVER['PHP_SELF']);
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block sidebar py-3">
<div class="text-center mb-4">
<div class="text-center mb-4 position-relative">
<button class="btn btn-sm position-absolute end-0 me-2" id="theme-toggle" title="Cambiar tema">
<i class="bi bi-moon-fill"></i>
</button>
<h5 class="text-white"><i class="bi bi-messenger"></i> Mensajería</h5>
<small class="text-muted">Discord & Telegram</small>
</div>