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

Question

如何仅在深色模式下使用 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";也不起作用..

Answer 1

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