Estoy tratando de implementar un tema oscuro/claro en mi proyecto. Logré anular con éxito algunos estilos básicos de Bootstrap para lograr un modo oscuro/claro mediante el uso de un archivo SCSS separado que se importa después del archivo principal de Bootstrap. Lo que estoy tratando de averiguar es cómo permitir que el usuario alterne entre estos dos modos en tiempo de ejecución.

Intenté aplicar un botón de alternancia que agrega la clase 'modo oscuro' al cuerpo, pero esto parece omitir todos los estilos específicos de Bootstrap:

Mi SCSS personalizado:

 .dark-mode{ $body-bg: rgb(41, 41, 41); $card-bg: rgb(78, 78, 78); $primary: rgb(0, 183, 255); $secondary: white; $danger: rgb(255, 60, 60); $success: rgb(1, 197, 1); h6, h1, h4, h5, p{ color: white; } $dark: white; $light: $body-bg; $modal-content-bg: $card-bg; $carousel-indicator-height: 0px; }@import '../../node_modules/bootstrap/scss/bootstrap.scss';

Javascript/Vue:

 toggleDarkMode(){ const el = document.body el.classList.toggle("dark-mode"); }

Puedo ver la clase 'modo oscuro' agregada al cuerpo cuando presiono el botón de alternar, y puedo ver que todos los encabezados cambian (h6, h1, etc.) pero todos los estilos específicos de Bootstrap siguen siendo los mismos. Pensé que sería tan simple como esto porque si elimino los paréntesis de la clase 'modo oscuro' de las anulaciones en el archivo SCSS y vuelvo a cargar el navegador, el modo oscuro funciona. Supongo que hay una forma adecuada de hacerlo, pero no estoy muy familiarizado con SCSS. Por favor, ¿alguien puede aconsejar?

Gracias