как лучше всего установить ЧЕРНЫЙ (#000000) фон, светлый текст в начальной загрузке в идеале без SASS?

Question

У меня есть зарождающийся сайт. Я написал разметку с помощью Bootstrap 5, определяя меню, базовую компоновку и т. д. Мне нужен черный фон (#000000, а не серый-800 или серый-900 и т. д.) по умолчанию для всего сайта. Я пробовал это, что дает широкий эффект, но есть проблемы:

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

Главное, о чем я беспокоюсь, это то, что все хорошие макеты и функции начальной загрузки - маленькие тени, модальные диалоги, карусели и т. Д. - могут внезапно быть плохо отформатированы. Одна вещь, которая сразу бросается в глаза, — это тонкие белые линии вокруг различных героев, таких как этот:

          <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>

Я также вижу, что все приятные тонкие градации теней и прочее просто теряются.

Я искал и видел другие сообщения , посвященные переключению между темным и светлым режимами. Это не моя цель. Я просто хочу, чтобы мой веб-сайт был черным/темным для всех посетителей и сохранял все прелести бутстрапа. Некоторые вводят SASS или реагируют , и я бы очень хотел избежать обоих из них, хотя LESS может быть терпимым, если мне абсолютно необходимо скомпилировать какой-то CSS. Я также нашел это дерганое видео с компьютерной озвучкой, которая, кажется, включает много разметки.

Наверняка есть какой-то простой способ взять разметку начальной загрузки и сделать ее темной? Это кажется такой фундаментальной просьбой. Я в шоке, что это не описано в документации по начальной загрузке.

Answer 1

Если вы настроите его правильно (не слишком сложно со всеми расширениями редактора), вы можете скомпилировать загрузчик при изменении кода. Тогда все, что вам нужно, это изменить эту строку$body-bg: $white !default;в файле_variables.scss- и он автоматически скомпилируется. Отличным бонусом является то, что вы можете комбинировать переменные начальной загрузки со своим кодом, а ваш код — с переменными начальной загрузки.

Это может быть скелет вашего проектаstyle.scss: из /questions/62891770/pereopredelenie-osnovnogo-tsveta-nachalnoj-zagruzki-ne-rabotaet-posle-nazhatiya/63724473#63724473

      // 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;
}