css - 如何更改此 Bootstrap 4 切换开关的 "checked"背景颜色？

Question

我不知道如何更改这个 Bootstrap 4 切换开关的“选中”背景颜色。它使用一个额外的库来切换明暗模式 – Here on github ——但那行得通。我想要做的就是更改事件复选框的背景颜色，默认情况下为蓝色。它是否默认为 Bootstrap CSS 中的蓝色？这个答案Change Bootstrap 4 checkbox background color对我不起作用；它会更改未选中的颜色，但我无法从中了解如何更改选中的颜色。
Fiddle here
我的代码在这里:

.custom-control-input {
  background-color: red;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="darkSwitch" />
  <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>

Answer 1

您可以简单地更改所有可能影响颜色的属性，例如

.custom-control-input:checked, .custom-control-label::before, .custom-control-input:active and .custom-control-input:focus

但是要注意修改 .custom-control-input::after因为它会破坏拨动开关内的指针
例子

.custom-control-input:focus~.custom-control-label::before {
  border-color: red !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 47, 69, 0.25) !important;
}

.custom-control-input:checked~.custom-control-label::before {
  border-color: red !important;
  background-color: red !important;
}

.custom-control-input:active~.custom-control-label::before {
  background-color: red !important;
  border-color: red !important;
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: red !important;
}

.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
  background-color: red !important;
  border-color: red !important;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="darkSwitch" />
  <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>