Color theme
Bootstrap no sabe que quieres activar un theme u otro a no ser que tú se lo indiques. Para ello, debes indicar en la etiqueta html qué tema vas a utilizar.
- Estado 1: <html data-bs-theme="light"> (Bootstrap activa los colores claros).
- Estado 2: (Bootstrap activa los colores oscuros).
Nosotros sólo debemos modificar light/dark de la etiqueta principal HTML y Bootstrap se encargará de modificar todo en cascada siempre y cuando tengamos las clases de los elementos bien definidos.
Background
Por ejemplo, si queremos modificar los backgrounds:
- El fondo de la página no debería estar dado con la clase bg-white sino bg-body.
- Para las tarjetas, menús, barras deberíamos usar bg-body-tertiary.
- Para los elementos destacados bg-body-secondary.
Textos
- Texto normal (párrafos): text-body
- Texto sencundario (subtítulos): text-body-secondary
- Texto terciario (detalles): text-body-tertiary
Bordes
- Bordes normales: border
- Bordes suaves: border-secondary-subtle
navbars
Los menús de navegación solían ser complicados. Ahora solo tienes que indicar que usen el fondo terciario.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
Resumen: Si usas clases que contienen la palabra body (bg-body, text-body), estás usando el sistema correcto. Si usas colores explícitos (white, black, light), estás bloqueando el modo oscuro.
A veces, por diseño, quieres que la barra de navegación sea negra siempre, incluso si el usuario está en "Modo Claro" (como hace Netflix o Spotify). En ese caso, usas el atributo para romper la herencia y forzar la oscuridad solo en ese bloque podemos usar el atributo data-bs-theme="dark" en ese elemento HTML/bloque.
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Mi Web Siempre Oscura</a>
</div>
</nav>Al poner data-bs-theme="dark", Bootstrap automáticamente pone las letras en blanco (navbar-brand, nav-link) sin que tengas que añadir clases extra.