Изменить цвет цветов темы Bootstrap в темном режиме?

Как я могу изменить цвета темы (основной, дополнительный и т. д.) в Bootstrap 5.X с помощью sass только для темного режима? Я понимаю, как изменить основной цвет как в светлом, так и в темном режиме темы:

обычай.scss

... snip ...
@import "../bootstrap/scss/functions";

$primary: #0e548c;

@import "../bootstrap/scss/variables";
... snip ...

Но как я могу изменить цвет $primary, чтобы он был немного ярче в темном режиме? Например: #0062cc

В текущей документации (variables_dark.scss) я нашел только переменные:

первичный текст-темный,
первичный-bg-тонкий-темный,
...

Я понимаю, как изменить значения этих переменных, но понятия не имею, как назначить несуществующее (нет основного-темного).

Добавление:

@include color-mode(dark) {    
    $primary: #0062cc;
}

сразу после @import "../bootstrap/scss/root"; тоже не работает..

sass colors bootstrap-5 darkmode

09.02.2023 14:45

Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации

Если вы планируете стать веб-разработчиком, вы наверняка слышали о CSS - языке, используемом для стилизации HTML-документов. CSS является неотъемлемой...

105

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Темный режим является новым в альфа-версии 5.3, и есть некоторые проблемы с поддержкой цвета в темном режиме. В настоящее время изменение цветов темы в темном режиме не поддерживается.

https://github.com/twbs/bootstrap/issues/37976

На данный момент единственным способом было бы установить отдельные переменные CSS:

[data-bs-theme = "dark"] {
  --bs-primary: #{$primary};
  --bs-primary-bg-subtle: #{$primary};
  --bs-primary-bg-subtle-dark: #{$primary};
  
  .btn-primary {
    --bs-btn-bg: #{$primary};
  }
}

https://codeply.com/p/BmyKLq8RTV

По теме: Как правильно ввести светлый/темный режим в Bootstrap?

09.02.2023 15:33

Теперь вы можете использовать цветовой режим в новой версии 5.3 со следующим
в <html len = "en" data-bs-theme = "light">
Если вы хотите больше цветов, сделайте кнопку переключения на кнопку dropdwon
Bootstrap v5.3 также поддерживает автоматический режим, проверьте на их сайте с помощью javascript.

$("input[id='lightSwitch']").on("change", function() {
  if ($("html").attr("data-bs-theme") == 'light') {
    $("html").attr("data-bs-theme", "dark");
  } else if ($("html").attr("data-bs-theme") == "dark") {
    $("html").attr("data-bs-theme", "light");
  }
});

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang = "en" data-bs-theme = "light">
<body>
  <div class = "form-check form-switch ms-auto mt-2 me-2">
    <label class = "form-check-label ms-3" for = "lightSwitch">
      <svg xmlns = "http://www.w3.org/2000/svg" width = "22" height = "22" fill = "currentColor" class = "bi bi-brightness-high" viewBox = "0 0 16 16">
        <path d = "M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
      </svg>
    </label>
    <input class = "form-check-input" type = "checkbox" id = "lightSwitch" />
  </div>
</body>
</html>

Это не отвечает на мой вопрос. Я не спрашиваю, как реализовать переключение цветового режима... Пожалуйста, внимательно прочитайте мой вопрос.

— 13.02.2023 10:03

11.02.2023 07:08