我试图找出最好的方法来设置我的SCSS黑暗主题，使其尽可能易于维护。
在Bootstrap 5中，您可以将HTML主体标记上的data-bs-theme='dark'属性设置为light或dark，bootstrap将处理其余部分。
这工作正常，但它需要我设置所有的颜色类内联，如<nav class="bg-body">。我不喜欢像这样在HTML中添加大量的CSS类，所以我尝试在SCSS文件中使用引导变量。
唯一的问题是，它最终会像下面这样重复代码：

nav {
  background-color: $body-bg;
}

@include color-mode(dark) {
  nav {
    background-color: $body-bg-dark;
  }
}

字符串
然后我想我可以有一个单独的文件，里面有这样的东西：

// Variable overrides for dark theme

@include color-mode(dark) {
  $body-bg: #1a1a1a;
}

型
所以我可以在黑暗模式下在一个地方覆盖这些变量，而不是前面的代码，但这似乎不起作用，我认为是由于词法作用域。
我想做的事有可能实现吗？我现在只需要一个暗模式，作为默认值-但我希望在未来能够在一个地方定义亮模式颜色，使切换容易。
也许我的做法不正确，所以如果有人有任何关于如何最好地组织我的CSS的指针，我会很感激！