logo标签列表

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

sasscolorsbootstrap-5darkmode
5
如何在Bootstrap 5.X中仅使用Sass更改暗模式下的主题颜色（primary，secondary等）？我知道如何在明亮和暗黑主题模式下更改主要颜色：

custom.scss

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

$primary: #0e548c;

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

但是我该如何在深色模式下将$primary color变得更亮一些呢？例如：#0062cc

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

  • primary-text-dark,
  • primary-bg-subtle-dark,
  • ...

我知道如何更改这些变量的值，但不知道如何分配不存在的变量（没有primary-dark）。

添加：

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

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

2个回答
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

现在您可以在新的v5.3中使用颜色模式，具体如下：
在<html len="en" data-bs-theme="light">中
如果您想要更多的颜色，请将开关按钮更改为下拉按钮
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/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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>

5
这并没有回答我的问题。我不是在问如何实现颜色模式的切换... 请仔细阅读我的问题。 - Elembivios
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接