Estou com dificuldade ao inserir a cor da bolinha central quando está clicado 
Código CSS
.form-check-input, #flexSwitchCheckDefault {
background-color: var(--marrom-claro);
}
Código HTML
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Modo Noturno</label>
</div>
Olá, Rafael!
Para alterar a cor da bolinha central do input quando ele está clicado, você pode adicionar o seguinte código CSS:
input[type=checkbox]:checked {
background-color: var(--sua-cor);
}
Substitua --sua-cor pela cor desejada, por exemplo #FF0000 para vermelho. Assim, quando o input estiver marcado, a cor da bolinha central será alterada para a cor especificada.
No seu caso, como você está utilizando Bootstrap, você pode adicionar essa regra de estilo no seu arquivo CSS personalizado, após a importação do Bootstrap. Ficaria assim:
/* Importação do Bootstrap */
@import url('https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css');
/* Sua regra de estilo */
input[type=checkbox]:checked {
background-color: var(--marrom-claro);
}
Dessa forma, a cor da bolinha central do input será alterada para a cor definida em --marrom-claro quando estiver marcado.
Espero ter ajudado e bons estudos!