Dúvida sobre a cor do checkbox

Andreza, tudo bem?

Poderia postar aqui o código do HTML também?!

Boa tarde, posso sim!!

<header class="cabecalho">
    <nav class=" navbar-expand-lg navbar bg-body-tertiary fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="./assets/logo.png" alt="logotipo da cafeteria Serenatto"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
          aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
          <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasNavbarLabel"><img src="./assets/logo-mobile.png"
                alt="Logotipo da cafeteria Serenatto"></h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body">
            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Início</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Sobre</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contato</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <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>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </header>

Acho que assim resolve:

/* Isso remove a sombra azul e deixa a bolinha na cor marrom em seu estado "inicial"*/

.form-check-input:focus {
  box-shadow:none;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23783c00'/%3e%3c/svg%3e")!important;
}

/* Esse trecho vai sobrescrever o padrão da biblioteca do Bootstrap quando o checkbox estiver ativo... ou seja, esse background-image nada mais do que um SVG que é a bolinha branca dentro desse checkbox (switch toggle).  */

.form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23783c00'/%3e%3c/svg%3e")!important;
}

Existem inúmeras formas de resolver essa questão da cor no checkbox (switch toggle). Esta provavelmente não é a melhor maneira... porém, resolve! O que está dentro de fill='%23783c00' é o código hexadecimal de um marrom que eu peguei na internet... No caso a cor é a partir do 783c00. Se caso eu quisesse deixar a bolinha em outra cor, por exemplo, na cor azul seria: fill='%230008fd'. Importante manter o número "23" dentro do fill e depois inserir o código hexadecimal.

Tem um tutorial bem legal no W3Schools que sempre me salva. Este aqui explica como criar esse switch toggle de uma maneira mais simples e sem o Bootstrap: https://www.w3schools.com/howto/howto_css_switch.asp

Espero ter ajudado!

Abraços!

Obrigada pela ajuda! Abs