Bootstrap 4 y 5 no admiten el modo oscuro. Tal vez lo hagan en Bootstrap 6.

El modo oscuro es un nombre confuso en este contexto porque Bootstrap admite un color, $dark: $gray-900 , y admite varias clases con tintes oscuros, como .bg-dark . Pero ninguno de estos es el modo oscuro real, que es un cambio de representación del sitio web impulsado por el sistema operativo, pasado al navegador, basado en:

 @media (prefers-color-scheme: dark) {

Peor aún, cosas como bg-dark implican que cambiarías al modo oscuro cambiando los nombres de las clases, probablemente a través de Javascript. Eso es mucho uso de CPU para realizar un navegador integrado, todo porque los autores de Bootstrap ignoraron una característica importante de la Web. ¡No hagas esto!

Todo esto se detalla de una manera mucho más larga aquí.

Eso lo dejará con muchas opciones, pero en resumen, para Bootstrap 4 y 5, la mejor manera, la más simple y la que requiere menos esfuerzo para manejar un prefers-color-scheme: dark es introducir una indirección en los colores de Bootstrap reasignando el color de Bootstrap. Variables SASS que está utilizando para colorear las variables CSS, en su _variables.scss . Las variables CSS se han admitido durante años , son perfectas para el modo oscuro y se pasan por alto en gran medida. Por ejemplo:

 :root { --body-bg: #fff; --body-color: #000; } $white: var(--body-bg); $black: var(--body-color); $body-color: var(--body-color);

Hasta ahora, todo lo que ha hecho es crear un direccionamiento indirecto: $white aún se muestra como #fff al igual que en el Bootstrap predeterminado. Pero ahora puedes voltearlo cuando el sistema operativo lo haga:

 @media (prefers-color-scheme: dark) { --body-bg: #000; --body-color: #fff; }

Ahora, cuando el sistema operativo se configura en modo oscuro, el navegador lo ve y cambia esa consulta de medios, y sus variables CSS cambian. Dado que distribuyó esas variables en el SASS de Bootstrap compilado a través de sus anulaciones de _variables, verá el resultado en Bootstrap renderizado.

Dije más simple y menos esfuerzo, pero probablemente hayas notado que esto todavía va a ser mucho trabajo. Bootstrap 4 y 5 se perdieron por completo en esto, por lo que el trabajo preliminar está en usted. Deberá anular todos los colores en Bootstrap que use e introducir variables CSS para ellos, y luego deberá probar para encontrar colores que no estén desactivados de ninguna variable, y anularlos con un seguimiento global. hoja de estilo

/* Enable darkmode in a Bootstrap Page */ @media (prefers-color-scheme: dark) { body { background-color: var(--bs-dark); color: var(--bs-light); } }

Mira esto: https://getbootstrap.com/docs/4.5/getting-started/theming

"Personalice Bootstrap 4 con nuestras nuevas variables Sass integradas para preferencias de estilo global para facilitar la creación de temas y cambios de componentes".

Una vez que desee aplicar los cambios de Sass, este parece ser el camino correcto

Y por su documentación, las variables para cambiar esto están en el archivo "scss/_variables.scss"

Aquí hay otro tema con información adicional sobre cómo lograr esto: Personalización de la plantilla CSS de Bootstrap

Bootstrap 5 (actualización 2021)

Aunque todavía no hay soporte definitivo para el modo claro/oscuro en Bootstrap 5, SASS se puede usar para crear un tema oscuro

Arranque 4

Aquí hay algunas respuestas a su pregunta sobre el modo claro u oscuro de Bootstrap:

"¿Se supone que debo reemplazar todas las apariciones de bg-dark con bg-light una vez que se enciende el 'interruptor'?"

Sí, pero probablemente también quieras cambiar todas las clases -light y -dark como text-dark , navbar-dark , btn-dark , etc.

Si quiero modificar ligeramente los colores de bg-light y bg-dark... No puedo encontrar ningún ejemplo para anular estas variables (a través de SASS), excepto sobrescribirlas manualmente en mi CSS como .bg-dark...

Estos se derivan de las variables SASS $light y $dark para que pueda cambiarlas así...

 $light: #dddddd; $dark: #011100; @import "bootstrap";

Demostración Bootstrap Light Dark Mode Switch

Ver también:
Personalización de la plantilla CSS de Bootstrap
Cómo extender/modificar (personalizar) Bootstrap 4 con SASS