what is best way to set BLACK (#000000) background, light text in bootstrap ideally without SASS?

Question

I have a nascent website. I've written the markup using Bootstrap 5, defining menus, basic layout, etc. I want a black background (#000000, not gray-800 or gray-900, etc.) as a default throughout the site. I've tried this, which has a sweeping effect, but there are problems:

body {
    background-color: black;
    color: white;
}

The main thing I'm worried about is that all the nice bootstrap layout and features -- little drop shadows, modal dialogs, carousels, etc. -- might suddenly be badly formatted. One thing that immediately jumps out is some thin white lines around various heroes like this one:

    <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
        <div class="col-lg-5 p-3 p-lg-5 pt-lg-3">
            <h1 class="display-4 fw-bold lh-1">Get ready for <span class="the_tower">The Tower</span></h1>
            <p class="lead">New album <a href="/music/the-tower" class="badge bg-danger the_tower" style="cursor: pointer;">The Tower</a> drops October 6 on all major streaming platforms.
            Subscribe on YouTube so you can see our latest news!</p>
            <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
                <a href="/music/the-tower" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Show me <span class="the_tower">The Tower</span></a>
                <a href="https://youtu.be/6nbQNWRJKg0" class="btn btn-secondary btn-lg px-4 me-md-2 fw-bold">Subscribe on YouTube</a>
            </div>
        </div>
        <div class="col-lg-6 offset-lg-1 p-0 overflow-hidden shadow-lg">
            <iframe style="aspect-ratio: 16/9;" src="https://www.youtube-nocookie.com/embed/6nbQNWRJKg0?rel=0&amp;loop=1" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="100%" frameborder="0"></iframe>
        </div>
    </div>

I also see that all the nice, subtle gradations in shading and stuff just get lost.

I've searched around and seen other posts which focus on toggling between dark and light mode. That is not my goal. I just want my website to be black/dark for all visitors, and keep all the nice things about bootstrap. Some introduce SASS or react and I'd very much like to avoid both of those, although LESS might be tolerable if I absolutely must compile some CSS. I also found this janky video with computer voiceover which seems to involve a lot of markup.

Surely there is some simple way to take one's bootstrap markup and make it dark-themed? This seems like such a fundamental request. I'm shocked it's not described in the bootstrap docs.

Answer 1

If you set it up right (not too difficult with all editor extensions), you can have bootstrap compiled on change of code. Then all you need is to change this line $body-bg: $white !default; in file _variables.scss - and it will automatically compile. A great bonus is you can combine bootstrap variables with your code, and your code with bootstrap's variables.

This can be the skeleton of your project style.scss: from https://stackoverflow.com/a/73114678/3807365

// my-bootstrap-and-styles.scss

// your overrides
$primary : #FEBC35;

// include bootstrap.scss
@import "../node_modules/bootstrap/scss/bootstrap";   

// Then add your additional custom code here
.my-primary-div {
  background: $primary;
  border: 1px solid black;
}