Agregar soporte para tema claro/oscuro
This commit is contained in:
31
templates/header.php
Executable file → Normal file
31
templates/header.php
Executable file → Normal 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>
|
||||
|
||||
Reference in New Issue
Block a user