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

Issue

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>

Solution

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>

Answered By - Umutambyi Gad

Answer Checked By - Timothy Miller (PHPFixing Admin)