nickpons666/lastwar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Agregar soporte para tema claro/oscuro

Browse Source
This commit is contained in:
nickpons666
2026-02-19 14:20:29 -06:00
parent 38a8447a64
commit b79a03e379
3 changed files with 56 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
login.php Executable file → Normal file
View File

@@ -27,6 +27,7 @@ if (isset($_SESSION['user_id'])) {
}
$error = '';
$theme = $_COOKIE['theme'] ?? 'light';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$username = $_POST['username'] ?? '';
@@ -43,7 +44,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
}
?>
<!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">
@@ -58,8 +59,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
align-items: center;
justify-content: center;
}
[data-bs-theme="dark"] body {
background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
}
.login-card {
background: white;
background: var(--bs-body-bg);
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
overflow: hidden;
@@ -107,5 +111,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

21
templates/footer.php Executable file → Normal file
View File

@@ -5,6 +5,27 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script>
(function() {
const html = document.documentElement;
const toggleBtn = document.getElementById('theme-toggle');
const icon = toggleBtn.querySelector('i');
function updateIcon(theme) {
icon.className = theme === 'dark' ? 'bi bi-sun-fill' : 'bi bi-moon-fill';
}
updateIcon(html.getAttribute('data-bs-theme'));
toggleBtn.addEventListener('click', function() {
const currentTheme = html.getAttribute('data-bs-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
html.setAttribute('data-bs-theme', newTheme);
document.cookie = 'theme=' + newTheme + ';path=/;max-age=31536000';
updateIcon(newTheme);
});
})();
</script>
<?php if (isset($extraScripts)): ?>
<?= $extraScripts ?>
<?php endif; ?>

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>