I have been working on incorporating a dark/light theme into my project. By creating a separate SCSS file that is imported after the main Bootstrap file, I was able to override certain core Bootstrap styles to achieve a dark/light mode. Now, I am facing the challenge of enabling the user to switch between these two modes while the project is running.
One approach I tried was to use a toggle button that adds the 'dark-mode' class to the body. However, this method seems to neglect all the Bootstrap-specific styles:
Here is a snippet of my custom SCSS:
.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");
}
Although I can observe the addition of the 'dark-mode' class to the body upon clicking the toggle button, and see the changes in the headings (h6, h1, etc.), the Bootstrap-specific styles remain unaffected. I initially assumed this process would suffice since removing the 'dark-mode' class parentheses from the overrides in the SCSS file and reloading the browser successfully activates dark mode.
It appears there might be a more appropriate method to achieve this, but I lack expertise in SCSS. Any guidance on this matter would be greatly appreciated.
Thank you!