Configuración básica de dark mode
El dark mode en Bootstrap representa un sistema de temas alternativo que transforma automáticamente la apariencia de todos los componentes hacia una paleta de colores oscura. Este sistema funciona mediante la aplicación de un atributo específico que activa un conjunto predefinido de variables de color optimizadas para ambientes con poca luz.
Activación mediante data-bs-theme
La configuración más directa del dark mode se realiza a través del atributo data-bs-theme="dark". Este atributo puede aplicarse en tres niveles diferentes según las necesidades del proyecto:
Aplicación global al documento:
<html data-bs-theme="dark">
<head>
<meta charset="utf-8">
<title>Mi sitio web</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Todo el contenido estará en dark mode -->
</body>
</html>
Aplicación a secciones específicas:
<div class="container">
<!-- Sección en tema claro -->
<div class="row mb-4">
<div class="col">
<h2>Contenido en tema claro</h2>
</div>
</div>
<!-- Sección específica en dark mode -->
<div class="row" data-bs-theme="dark">
<div class="col">
<div class="card">
<div class="card-body">
<h3 class="card-title">Tarjeta en dark mode</h3>
<p class="card-text">Este contenido se muestra con colores oscuros.</p>
</div>
</div>
</div>
</div>
</div>
Aplicación a componentes individuales:
<!-- Navbar en dark mode -->
<nav class="navbar navbar-expand-lg" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Mi Sitio</a>
<div class="navbar-nav">
<a class="nav-link active" href="#">Inicio</a>
<a class="nav-link" href="#">Productos</a>
</div>
</div>
</nav>
<!-- Formulario en dark mode -->
<form data-bs-theme="dark" class="p-4">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
Herencia y cascada del tema
El sistema de temas de Bootstrap sigue el principio de herencia de CSS. Cuando se aplica data-bs-theme="dark" a un elemento contenedor, todos sus elementos hijos adoptarán automáticamente el tema oscuro, a menos que se especifique explícitamente un tema diferente:
<div data-bs-theme="dark">
<!-- Esta card será oscura por herencia -->
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Hereda dark mode</h5>
</div>
</div>
<!-- Esta card fuerza tema claro -->
<div class="card" data-bs-theme="light">
<div class="card-body">
<h5 class="card-title">Forzado a tema claro</h5>
</div>
</div>
</div>
Valores válidos para data-bs-theme
Bootstrap reconoce específicamente dos valores para el atributo data-bs-theme:
light- Activa explícitamente el tema claro (comportamiento por defecto)dark- Activa el tema oscuro con la paleta de colores invertida
<!-- Explícitamente tema claro -->
<section data-bs-theme="light">
<div class="alert alert-info">
Contenido en tema claro forzado
</div>
</section>
<!-- Explícitamente tema oscuro -->
<section data-bs-theme="dark">
<div class="alert alert-info">
Contenido en tema oscuro
</div>
</section>
Configuración en el elemento raíz
Para proyectos que requieren dark mode por defecto, la configuración más eficiente es aplicar el atributo directamente en el elemento <html>:
<!DOCTYPE html>
<html lang="es" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aplicación Dark Mode</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Todo el documento estará en dark mode automáticamente -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">Dark App</a>
</div>
</nav>
<main class="container mt-4">
<div class="row">
<div class="col-md-8">
<article class="card">
<div class="card-body">
<h1>Contenido principal</h1>
<p>Todo este contenido se renderiza automáticamente en dark mode.</p>
</div>
</article>
</div>
</div>
</main>
</body>
</html>
Esta configuración garantiza que todos los componentes de Bootstrap adopten automáticamente los colores del tema oscuro sin necesidad de configuración adicional en cada elemento individual.
Aplicación a componentes existentes
El dark mode de Bootstrap transforma automáticamente la apariencia de todos los componentes sin necesidad de modificar las clases existentes. Este comportamiento automático significa que los componentes que ya dominas mantienen su funcionalidad y estructura, pero adoptan automáticamente los colores del tema oscuro cuando se activa data-bs-theme="dark".
Transformación automática de componentes básicos
Los componentes básicos que has aprendido se adaptan inmediatamente al tema oscuro. Los botones, cards, tablas y listas mantienen su funcionalidad pero invierten su paleta de colores:
<div data-bs-theme="dark">
<!-- Botones con colores automáticamente invertidos -->
<button type="button" class="btn btn-primary">Primario oscuro</button>
<button type="button" class="btn btn-secondary">Secundario oscuro</button>
<button type="button" class="btn btn-success">Éxito oscuro</button>
<!-- Card con fondo y texto automáticamente adaptados -->
<div class="card mt-3">
<div class="card-header">
<h5 class="card-title">Producto destacado</h5>
</div>
<div class="card-body">
<p class="card-text">Esta tarjeta se muestra automáticamente con colores oscuros.</p>
<a href="#" class="btn btn-outline-info">Ver detalles</a>
</div>
</div>
</div>
Navegación y menús en dark mode
Los componentes de navegación se benefician especialmente del dark mode, proporcionando una experiencia visual más suave. Las navbars, navs, y breadcrumbs ajustan automáticamente sus colores de fondo, texto y estados:
<!-- Navbar completa en dark mode -->
<nav class="navbar navbar-expand-lg" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">TiendaOscura</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Inicio</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
Categorías
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Electrónicos</a></li>
<li><a class="dropdown-item" href="#">Ropa</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navegación con tabs que se adapta automáticamente -->
<div data-bs-theme="dark">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Información</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Especificaciones</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reseñas</a>
</li>
</ul>
</div>
Formularios adaptativos al tema oscuro
Los formularios experimentan una transformación completa en dark mode, donde todos los controles adoptan automáticamente colores de fondo oscuros con texto claro, manteniendo la legibilidad y accesibilidad:
<form data-bs-theme="dark" class="p-4">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="nombre" class="form-label">Nombre completo</label>
<input type="text" class="form-control" id="nombre">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="categoria" class="form-label">Categoría</label>
<select class="form-select" id="categoria">
<option selected>Seleccionar categoría</option>
<option value="1">Electrónicos</option>
<option value="2">Hogar</option>
</select>
</div>
</div>
</div>
<div class="mb-3">
<label for="descripcion" class="form-label">Descripción</label>
<textarea class="form-control" id="descripcion" rows="3"></textarea>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="acepto">
<label class="form-check-label" for="acepto">
Acepto los términos y condiciones
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="newsletter" id="newsletter1">
<label class="form-check-label" for="newsletter1">
Suscribirse al newsletter
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Guardar</button>
<button type="reset" class="btn btn-outline-secondary">Limpiar</button>
</form>
Componentes de notificación en tema oscuro
Los componentes de notificación como alertas, modales y toasts se adaptan automáticamente, manteniendo sus colores semánticos pero con mayor contraste para el tema oscuro:
<div data-bs-theme="dark">
<!-- Alertas que mantienen su semántica de color -->
<div class="alert alert-success" role="alert">
<strong>¡Éxito!</strong> El producto se ha guardado correctamente.
</div>
<div class="alert alert-warning" role="alert">
<strong>Advertencia:</strong> Algunos campos requieren revisión.
</div>
<div class="alert alert-danger" role="alert">
<strong>Error:</strong> No se pudo procesar la solicitud.
</div>
<!-- Modal que se adapta automáticamente -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalEjemplo">
Abrir modal oscuro
</button>
</div>
<!-- Modal con tema oscuro heredado -->
<div class="modal fade" id="modalEjemplo" data-bs-theme="dark">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Configuración del producto</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Este modal se muestra automáticamente con colores oscuros.</p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="notificaciones">
<label class="form-check-label" for="notificaciones">
Activar notificaciones
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary">Guardar cambios</button>
</div>
</div>
</div>
</div>
Tablas y listados adaptativos
Las tablas y listas adoptan automáticamente fondos oscuros y texto claro, manteniendo la legibilidad de los datos y la funcionalidad de las variaciones como .table-striped y .table-hover:
<div data-bs-theme="dark">
<!-- Tabla que mantiene todas sus características en tema oscuro -->
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Producto</th>
<th scope="col">Precio</th>
<th scope="col">Estado</th>
<th scope="col">Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Smartphone Pro</td>
<td>€899.99</td>
<td><span class="badge bg-success">Disponible</span></td>
<td>
<button class="btn btn-sm btn-outline-info">Editar</button>
<button class="btn btn-sm btn-outline-danger">Eliminar</button>
</td>
</tr>
<tr>
<td>002</td>
<td>Tablet Ultra</td>
<td>€649.99</td>
<td><span class="badge bg-warning">Pocas unidades</span></td>
<td>
<button class="btn btn-sm btn-outline-info">Editar</button>
<button class="btn btn-sm btn-outline-danger">Eliminar</button>
</td>
</tr>
</tbody>
</table>
<!-- Lista de grupo que se adapta automáticamente -->
<ul class="list-group mt-4">
<li class="list-group-item d-flex justify-content-between align-items-center">
Productos electrónicos
<span class="badge bg-primary rounded-pill">24</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Productos de hogar
<span class="badge bg-primary rounded-pill">18</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Productos deportivos
<span class="badge bg-primary rounded-pill">12</span>
</li>
</ul>
</div>
Componentes interactivos y estados
Los componentes interactivos como accordions, carousels y offcanvas mantienen su funcionalidad completa mientras adoptan automáticamente los colores del tema oscuro:
<div data-bs-theme="dark">
<!-- Accordion que se adapta completamente -->
<div class="accordion" id="accordionProductos">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Información técnica
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionProductos">
<div class="accordion-body">
Especificaciones detalladas del producto con tema oscuro aplicado automáticamente.
</div>
</div>
</div>
</div>
<!-- Progress bars que mantienen sus colores semánticos -->
<div class="mt-4">
<label class="form-label">Progreso de instalación</label>
<div class="progress">
<div class="progress-bar bg-success" style="width: 75%">75%</div>
</div>
</div>
</div>
La ventaja principal de este sistema automático es que no necesitas recordar clases específicas para el tema oscuro ni modificar tu código existente. Simplemente aplicando data-bs-theme="dark" a un contenedor, todos los componentes de Bootstrap que ya conoces adoptarán automáticamente la apariencia oscura manteniendo su funcionalidad intacta.
Utilidades de color específicas para dark mode
Bootstrap proporciona un conjunto especializado de utilidades de color que se comportan de manera inteligente en función del tema activo, permitiendo crear interfaces que se adapten automáticamente entre temas claro y oscuro sin duplicar código CSS.
Text-emphasis y colores contextuales adaptativos
Las utilidades text-emphasis representan una evolución de las clases de texto tradicionales, diseñadas específicamente para funcionar de manera óptima en ambos temas. Estas clases ajustan automáticamente el contraste y la legibilidad según el tema activo:
<div class="container">
<!-- Sección en tema claro -->
<div class="row mb-4">
<div class="col">
<h3>Contenido en tema claro</h3>
<p class="text-emphasis-primary">Texto primario adaptativo</p>
<p class="text-emphasis-secondary">Texto secundario adaptativo</p>
<p class="text-emphasis-success">Mensaje de éxito adaptativo</p>
<p class="text-emphasis-danger">Mensaje de error adaptativo</p>
</div>
</div>
<!-- La misma sección pero en dark mode -->
<div class="row" data-bs-theme="dark">
<div class="col bg-dark p-3 rounded">
<h3>Contenido en tema oscuro</h3>
<p class="text-emphasis-primary">Texto primario adaptativo</p>
<p class="text-emphasis-secondary">Texto secundario adaptativo</p>
<p class="text-emphasis-success">Mensaje de éxito adaptativo</p>
<p class="text-emphasis-danger">Mensaje de error adaptativo</p>
</div>
</div>
</div>
Background-subtle y fondos adaptativos
Las utilidades background-subtle proporcionan colores de fondo sutiles que se ajustan automáticamente para mantener la legibilidad en ambos temas. Estas clases son especialmente útiles para crear secciones destacadas que funcionen en cualquier tema:
<div data-bs-theme="dark">
<div class="container">
<!-- Secciones con fondos sutiles adaptativos -->
<div class="p-3 mb-3 bg-primary-subtle rounded">
<h4 class="text-primary-emphasis">Información importante</h4>
<p class="text-primary-emphasis">Este fondo se adapta automáticamente al tema oscuro manteniendo la legibilidad.</p>
</div>
<div class="p-3 mb-3 bg-success-subtle rounded">
<h4 class="text-success-emphasis">Operación completada</h4>
<p class="text-success-emphasis">El proceso se ha ejecutado correctamente con colores optimizados.</p>
</div>
<div class="p-3 mb-3 bg-warning-subtle rounded">
<h4 class="text-warning-emphasis">Atención requerida</h4>
<p class="text-warning-emphasis">Algunos elementos requieren tu revisión inmediata.</p>
</div>
<div class="p-3 mb-3 bg-danger-subtle rounded">
<h4 class="text-danger-emphasis">Error crítico</h4>
<p class="text-danger-emphasis">Se ha detectado un problema que necesita resolución urgente.</p>
</div>
</div>
</div>
Border-subtle para bordes adaptativos
Las clases border-subtle crean bordes que se ajustan automáticamente al tema, proporcionando separación visual sin crear contrastes demasiado fuertes en el tema oscuro:
<div data-bs-theme="dark">
<div class="container">
<div class="row g-3">
<div class="col-md-6">
<div class="card border-primary-subtle">
<div class="card-body">
<h5 class="card-title text-primary-emphasis">Producto destacado</h5>
<p class="card-text">Borde primario sutil que se adapta al tema oscuro.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-success-subtle">
<div class="card-body">
<h5 class="card-title text-success-emphasis">Producto disponible</h5>
<p class="card-text">Borde de éxito con contraste optimizado.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-warning-subtle">
<div class="card-body">
<h5 class="card-title text-warning-emphasis">Pocas unidades</h5>
<p class="card-text">Borde de advertencia sutil y legible.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-danger-subtle">
<div class="card-body">
<h5 class="card-title text-danger-emphasis">Agotado</h5>
<p class="card-text">Borde de error con contraste apropiado.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Combinación de utilidades para interfaces coherentes
La combinación estratégica de estas utilidades permite crear interfaces complejas que mantienen coherencia visual en ambos temas. Es especialmente útil para dashboards y aplicaciones que requieren múltiples niveles de información:
<div data-bs-theme="dark">
<div class="container">
<!-- Panel de estadísticas adaptativo -->
<div class="row g-3 mb-4">
<div class="col-lg-3 col-md-6">
<div class="bg-primary-subtle p-3 rounded border border-primary-subtle">
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<h6 class="text-primary-emphasis mb-0">Ventas totales</h6>
<h4 class="text-primary-emphasis">€24,590</h4>
</div>
<div class="text-primary-emphasis">
<i class="bi bi-graph-up fs-2"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="bg-success-subtle p-3 rounded border border-success-subtle">
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<h6 class="text-success-emphasis mb-0">Pedidos completados</h6>
<h4 class="text-success-emphasis">1,247</h4>
</div>
<div class="text-success-emphasis">
<i class="bi bi-check-circle fs-2"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="bg-warning-subtle p-3 rounded border border-warning-subtle">
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<h6 class="text-warning-emphasis mb-0">Pedidos pendientes</h6>
<h4 class="text-warning-emphasis">89</h4>
</div>
<div class="text-warning-emphasis">
<i class="bi bi-clock fs-2"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="bg-danger-subtle p-3 rounded border border-danger-subtle">
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<h6 class="text-danger-emphasis mb-0">Problemas</h6>
<h4 class="text-danger-emphasis">3</h4>
</div>
<div class="text-danger-emphasis">
<i class="bi bi-exclamation-triangle fs-2"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Lista de productos con utilidades adaptativas -->
<div class="card">
<div class="card-header">
<h5 class="mb-0">Productos recientes</h5>
</div>
<div class="list-group list-group-flush">
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-1 text-emphasis-primary">Smartphone Pro Max</h6>
<p class="mb-1 text-emphasis-secondary">Última generación con cámara avanzada</p>
</div>
<span class="badge bg-success-subtle text-success-emphasis border border-success-subtle">Disponible</span>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-1 text-emphasis-primary">Tablet Ultra HD</h6>
<p class="mb-1 text-emphasis-secondary">Pantalla de alta resolución para profesionales</p>
</div>
<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle">Pocas unidades</span>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-1 text-emphasis-primary">Auriculares Wireless</h6>
<p class="mb-1 text-emphasis-secondary">Cancelación de ruido activa</p>
</div>
<span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle">Agotado</span>
</div>
</div>
</div>
</div>
</div>
Utilidades para elementos de interfaz específicos
Para elementos de navegación y controles de interfaz, las utilidades adaptativas proporcionan una experiencia visual consistente que mejora la usabilidad en ambos temas:
<div data-bs-theme="dark">
<!-- Breadcrumb con colores adaptativos -->
<nav aria-label="breadcrumb" class="mb-4">
<ol class="breadcrumb bg-primary-subtle p-3 rounded">
<li class="breadcrumb-item">
<a href="#" class="text-primary-emphasis">Inicio</a>
</li>
<li class="breadcrumb-item">
<a href="#" class="text-primary-emphasis">Productos</a>
</li>
<li class="breadcrumb-item active text-primary-emphasis">
Electrónicos
</li>
</ol>
</nav>
<!-- Formulario de filtros con utilidades adaptativas -->
<form class="bg-secondary-subtle p-4 rounded">
<div class="row g-3">
<div class="col-md-4">
<label class="form-label text-secondary-emphasis">Categoría</label>
<select class="form-select">
<option>Todas las categorías</option>
<option>Electrónicos</option>
<option>Hogar</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label text-secondary-emphasis">Precio máximo</label>
<input type="number" class="form-control" placeholder="0.00">
</div>
<div class="col-md-4">
<label class="form-label text-secondary-emphasis">Estado</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disponible">
<label class="form-check-label text-secondary-emphasis" for="disponible">
Solo disponibles
</label>
</div>
</div>
</div>
<div class="mt-3">
<button type="submit" class="btn btn-primary">Aplicar filtros</button>
<button type="reset" class="btn btn-outline-secondary">Limpiar</button>
</div>
</form>
</div>
Ventajas de las utilidades adaptativas
Estas utilidades específicas para dark mode ofrecen beneficios significativos sobre las clases de color tradicionales:
- Contraste automático - Los colores se ajustan automáticamente para mantener la legibilidad óptima
- Consistencia semántica - Los colores mantienen su significado contextual en ambos temas
- Menor mantenimiento - No necesitas clases separadas para cada tema
- Accesibilidad mejorada - Los contrastes están optimizados automáticamente para cumplir estándares de accesibilidad
La clave del éxito al usar estas utilidades es combinarlas estratégicamente para crear jerarquías visuales claras que funcionen perfectamente tanto en tema claro como oscuro, proporcionando a los usuarios una experiencia coherente independientemente de sus preferencias de tema.
Fuentes y referencias
Documentación oficial y recursos externos para profundizar en Bootstrap
Documentación oficial de Bootstrap
Alan Sastre
Ingeniero de Software y formador, CEO en CertiDevs
Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, Bootstrap es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.
Más tutoriales de Bootstrap
Explora más contenido relacionado con Bootstrap y continúa aprendiendo con nuestros tutoriales gratuitos.
Aprendizajes de esta lección
- Comprender cómo activar el modo oscuro en Bootstrap mediante el atributo data-bs-theme.
- Aprender la herencia y cascada del tema oscuro en diferentes niveles del DOM.
- Identificar cómo los componentes existentes se adaptan automáticamente al modo oscuro.
- Conocer las utilidades de color adaptativas para mantener legibilidad y coherencia visual.
- Aplicar combinaciones de utilidades para crear interfaces accesibles y consistentes en modo claro y oscuro.