根据浅色或深色模式自定义靴子颜色

Question

我正在使用 Bootswatch 主题，并结合 Bootstrap 5.3 中的暗光颜色模式。

我想运行 sass 构建，以便我有两种不同的原色。一个用于光明，另一个用于黑暗。在 bootswatch 主题目录中，我只找到一个 _variables.scss 文件。

有人知道如何添加这样的开关吗？

我可以通过覆盖CSS类

@include color-mode(dark) {
  .bs-class

但我认为更改 sass 变量会更好。我可以构建两个 css 文件，一个用于深色，另一个用于浅色，但我认为这在某种程度上打破了颜色模式的想法。

Answer 1

我认为你可以使用 CSS 变量和媒体查询来检测配色方案：

:root {
  --primary-color: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #000;
  }
}

然后就可以直接使用了：

.element {
  color: var(--primary-color);
}

或者覆盖一些变量：

$primary-color: var(--primary-color);