在深色模式下更改 Bootstrap 主题颜色的颜色？

问题描述 投票：0回答：3

如何仅在深色模式下使用 sass 更改 Bootstrap 5.X 中的主题颜色（主要颜色、次要颜色等）？我知道如何在浅色和深色主题模式下更改主色：

自定义.scss

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

$primary: #0e548c;

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

但是如何将 $primary 颜色更改为在黑暗模式下更亮一点呢？例如：#0062cc

在当前文档（variables_dark.scss）中，我只找到了变量：

  • 主要文本-深色，
  • 原色-背景-微妙-黑暗，
  • ...

我知道如何更改这些变量值，但不知道如何分配不存在的变量值（没有原色黑暗）。

添加：

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

之后

@import "../bootstrap/scss/root";
也不起作用..

sass colors bootstrap-5 darkmode
3个回答
4
投票

深色模式是 5.3 alpha 中的新功能，深色模式下的颜色支持存在一些问题。目前不支持在深色模式下更改主题颜色。

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中正确引入亮/暗模式？

0
投票
@import "../scss/bootstrap/scss/bootstrap.scss";

$body-bg-dark: rgb(10, 10, 10);

@import "../scss/bootstrap/scss/bootstrap.scss";
-1
投票

现在您可以通过以下方式在新的 v5.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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.