How can I change the "checked" background color of this Bootstrap 4 toggle switch?

Question

I can't figure out how to change the "checked" background color of this Bootstrap 4 toggle switch. It uses an extra library to toggle dark and light mode – Here on github – but that works. All I want to do is change the background color of the active checkbox, which is by default blue. Does it default to blue from the Bootstrap CSS? This answer Change Bootstrap 4 checkbox background color doesn't work for me; it changes the unchecked color, but I can't grep from it how to change the checked color.

Fiddle here

My code 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

You can simply altered every possible properties that can affect the color like

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

but you have to pay attention on altering .custom-control-input::after because it will destroy the pointer inside the toggle switch

Example

.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>

Answer 2

Simply add this to your css file, or add it to your html file between <style> ... </style>, to change the background color of the switch - it also removes the blue circle and shadow. =]

.form-switch .form-check-input {
    height: 24px;
    width: 48px;
}
.form-switch .form-check-input:focus {
    border-color: rgba(0, 0, 0, 0.25);
    outline: 0;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}
.form-switch .form-check-input:checked {
    background-color: #30D158;
    border-color: #30D158;
    border: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}