Unir botões

Detalhes da questão

Endereço do fórum: https://somosmugiwara.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Estou tentando fazer um modo escuro, o mesmo já está funcional, mas estou tendo dificuldade em unir os dois botões. Por exemplo, ao clicar no botão o modo escuro é ativado e ao desmarcar tal botão o modo escuro é desativado.

O código abaixo existe dois botões, um para o modo escuro e o outro para o modo claro, quero deixar apenas um botão para ambas as funções, seria possível? Usando o toggle?

lê abaixo

Edit:

Encontrei um, mas quando coloco no fórum o mesmo não funciona. Não sei onde estou errando.

https://jsfiddle.net/6vrmftub/

Olá @Connor R.,

Encontrei um, mas quando coloco no fórum o mesmo não funciona. Não sei onde estou errando.

De facto é estranho, testei e também não funcionou, todavia use o seguinte código em um template:

Código:

      <div class="custom-switch">
            <input type="checkbox" id="darkSwitch" />
            <label for="darkSwitch">Dark Mode</label>
          </div>
 
          <!-- You must load 'dark-mode-switch.js' after the dark-mode switch -->
          <script src="https://www.jqueryscript.net/demo/dark-mode-bootstrap/dark-mode-switch.min.js"></script>

Para customizar para o tema escuro basta usar o seguinte prefixo (atributo) antes do seletor (classe/id/...):

Código:

[data-theme="dark"]

Exemplo:

Código:

[data-theme="dark"] .post {
  background-color: #111 !important;
  color: #eee;
}

Atenciosamente,
pedxz.

Eu testei no fórum, mas não foi funcional. Testei até no Jsfiddle e também não funcionou...

Edit:

Consegui resolver colocando diretamente o js no templante, thanks.