0

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.

S. Imp
  • 2,833
  • 11
  • 24
  • @adam Thanks, but that looks like 3.4 -- i'm working with 5? (EDIT: i see that 5.2 is here https://getbootstrap.com/docs/5.2/customize/overview/ ) – S. Imp Sep 23 '22 at 19:54

1 Answers1

0

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;
}
IT goldman
  • 14,885
  • 2
  • 14
  • 28
  • this post might make sense to someone more familiar with SASS, but it's totally greek to me. Furthermore, I suspect I'd have to choose a whole bunch of colors and design my own theme? Has *no one* created a simple dark theme for bootstrap that one can simply install with a stylesheet? – S. Imp Sep 23 '22 at 19:57
  • 1
    you can find already made themes I'm sure. like https://vinorodrigues.github.io/bootstrap-dark-5/ – IT goldman Sep 23 '22 at 20:14
  • I have been over that vino github page quite a bit. First, the background is not **black**. Secondly, the content is almost entirely focused on dark *mode*, i.e., toggling modes. I do see that the link you've provided has some very basic information about how to just install one of his themes, and this is helpful. Thank you. – S. Imp Sep 23 '22 at 22:04