为 Bootstrap 4 制作深色主题输入

Question

TL;DR - 如何使用 SASS mixin 嵌套验证状态？

长版——

我在使用 Bootstrap 4 的 SASS 生成深色主题时遇到一些困难。一些变量替换是显而易见的，但其他变量替换则会引起问题。我目前陷入的困境是表单输入。Bootstrap 的 SASS 默认会输出白色背景输入。我用我收集的变量覆盖这个背景，并将边框设置为正文文本颜色的 50%（它仍然具有对比度，但不会很明显）。

在编译时（这是一个移交给后端的动态过程），编译引擎“无法”知道主题是否是深色的，因此我将其留给设计师添加“内容” -dark”类到应该具有深色主题的容器（通常但不一定是主体）。

到目前为止，一切都很好！然后我突然想到焦点看起来很有趣，因为我更具体的规则是在 SASS 计算的颜色之上强制执行我的新边框颜色。包含整个“焦点”混合不起作用，因为它会再次将背景恢复为白色。我找到执行该工作的单个“位”并将其移动到我的新嵌套规则中。

然而，用于验证的混合要复杂得多，所以我愿意尝试完整的混合......其想法（不幸的是有点复杂）让它做它的事情，然后将我的背景颜色调整为更多再次具体（是的，具体战争）。然而，我对 SASS 的了解并不可靠，这不起作用：

.content-dark {
    select.form-control, .form-control {
        background-color: $nav-background;
        color: darken($body-color, 33%);
        border: 1px solid darken($body-color, 50%);
        &:focus {
            border-color: $input-focus-border-color;
        }
        @include form-validation-state("valid", $form-feedback-valid-color);
        @include form-validation-state("invalid", $form-feedback-invalid-color);
    }
}

输入背景正确地为深色，边框通常正确地为对比色（但不是粗体），并且焦点正确地为发光蓝色。但验证状态不起作用。它们仍然没有嵌套，这意味着即使“发光”更新，边框也不会更新。

我正在寻找具有深色主题验证状态的最佳方法（需要嵌套；单独的编译可以解决问题，但我没有该选项）。

Answer 1

仍然对其他答案感兴趣，因为 LIGHT 主题最终看起来很糟糕（但至少它们有效），但这就是我同时所做的：

我完全放弃了嵌套的东西，因为我知道这是主要问题，并在我的 _custom_variables.sass 文件中声明了这两个变量：

$input-bg: $nav-background;
$input-border-color: darken($body-color, 50%);

这很冒险，因为 $nav-background 不必是深色的（当深色主题时）或浅色（当浅色主题时），所以我需要更新我收集的信息（称为“输入边框”和“输入背景” “是显而易见的选择）。这样做的好处是不需要嵌套，但缺点是在我的主题界面中暴露了更多选项（我们的想法是简化它）。

[更新]

因此，在不得不大量整理大量答案之后，我最终对这两件事进行了参数化。现在，在这种状态下，Bootstrap 可以很好地使用它，并且我的自定义页面表单上还有 2 个字段。勒叹息。