diff --git a/login.php b/login.php
old mode 100755
new mode 100644
index 86b9295..9a7e3e4
--- a/login.php
+++ b/login.php
@@ -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>
diff --git a/templates/footer.php b/templates/footer.php
old mode 100755
new mode 100644
index 2026328..698d332
--- a/templates/footer.php
+++ b/templates/footer.php
@@ -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; ?>
diff --git a/templates/header.php b/templates/header.php
old mode 100755
new mode 100644
index 3bc56a2..695fb1e
--- a/templates/header.php
+++ b/templates/header.php
@@ -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>
