Agregar soporte para tema claro/oscuro
This commit is contained in:
9
login.php
Executable file → Normal file
9
login.php
Executable file → Normal file
@@ -27,6 +27,7 @@ if (isset($_SESSION['user_id'])) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$error = '';
|
$error = '';
|
||||||
|
$theme = $_COOKIE['theme'] ?? 'light';
|
||||||
|
|
||||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
$username = $_POST['username'] ?? '';
|
$username = $_POST['username'] ?? '';
|
||||||
@@ -43,7 +44,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="es">
|
<html lang="es" data-bs-theme="<?= $theme ?>">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
@@ -58,8 +59,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
[data-bs-theme="dark"] body {
|
||||||
|
background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
|
||||||
|
}
|
||||||
.login-card {
|
.login-card {
|
||||||
background: white;
|
background: var(--bs-body-bg);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -107,5 +111,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
21
templates/footer.php
Executable file → Normal file
21
templates/footer.php
Executable file → Normal 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://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://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 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)): ?>
|
<?php if (isset($extraScripts)): ?>
|
||||||
<?= $extraScripts ?>
|
<?= $extraScripts ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|||||||
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';
|
require_once __DIR__ . '/../includes/url_helper.php';
|
||||||
|
|
||||||
$currentPage = basename($_SERVER['PHP_SELF']);
|
$currentPage = basename($_SERVER['PHP_SELF']);
|
||||||
|
$theme = $_COOKIE['theme'] ?? 'light';
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="es">
|
<html lang="es" data-bs-theme="<?= $theme ?>">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
@@ -19,9 +20,22 @@ $currentPage = basename($_SERVER['PHP_SELF']);
|
|||||||
--discord-color: #5865F2;
|
--discord-color: #5865F2;
|
||||||
--telegram-color: #0088cc;
|
--telegram-color: #0088cc;
|
||||||
}
|
}
|
||||||
|
[data-bs-theme="dark"] {
|
||||||
|
--sidebar-bg: #1a1a2e;
|
||||||
|
}
|
||||||
|
[data-bs-theme="light"] {
|
||||||
|
--sidebar-bg: #1a1a2e;
|
||||||
|
}
|
||||||
.sidebar {
|
.sidebar {
|
||||||
min-height: 100vh;
|
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 {
|
.sidebar .nav-link {
|
||||||
color: rgba(255,255,255,0.7);
|
color: rgba(255,255,255,0.7);
|
||||||
@@ -29,6 +43,14 @@ $currentPage = basename($_SERVER['PHP_SELF']);
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin: 4px 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 {
|
.sidebar .nav-link:hover, .sidebar .nav-link.active {
|
||||||
background: rgba(255,255,255,0.1);
|
background: rgba(255,255,255,0.1);
|
||||||
color: white;
|
color: white;
|
||||||
@@ -45,7 +67,10 @@ $currentPage = basename($_SERVER['PHP_SELF']);
|
|||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<nav class="col-md-2 d-none d-md-block sidebar py-3">
|
<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>
|
<h5 class="text-white"><i class="bi bi-messenger"></i> Mensajería</h5>
|
||||||
<small class="text-muted">Discord & Telegram</small>
|
<small class="text-muted">Discord & Telegram</small>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user