Modo escuro e modo claro

Detalhes da questão

Endereço do fórum: https://runeterra.forumbrasil.net
Versão do fórum: phpBB3

Descrição

Opa. Queria saber como eu faço essa mudança de modo claro para modo escuro em fórum.

Um exemplo de fórum: https://neonparadise.foroactivo.com, clicando no botão ao lado de registrar-se.

Olá,

Primeiramente adicione o código HTML onde deseja que o botão fique

Código:

<a id="mm-claro" title="DAY"><i class="fa fa-sun" aria-hidden="true"></i></a>
<a id="mm-oscuro" title="NIGHT"><i class="fa fa-moon" aria-hidden="true"></i></a>
<script type="text/javascript">
 var colores = $.cookie('colores');if (colores=='day')        $('#phpbb').prop('class', 'mm-day');if (colores=='night')        $('#phpbb').prop('class', 'mm-night');//]]></script><script type="text/javascript">
    var vglnk = { key: '5a5e09c99bf477b62bf79c1924e231f7' };

    (function(d, t) {
        var s = d.createElement(t); s.type = 'text/javascript'; s.async = true;
        s.src = 'http://cdn.viglink.com/api/vglnk.js';
        var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r);
    }(document, 'script'));
</script>
  <script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>
  <script type="text/javascript" src="https://illiweb.com/rs3/84/frm/jquery/cookie/jquery.cookie.js" ></script>


Depois adiciona o código abaixo na sua Folha de estilo CSS

Código:

#mm-oscuro, #mm-claro {
    z-index: 999;
    top: 10px;
    left: 145px;
    padding: 5px;
    font-size: 20px;
}
.mm-night #mm-oscuro, .mm-day #mm-claro {
    display: none;
}
#mm-oscuro {
    color: #000;
}
.fa-sun:before {
    content: "\f185";
}
.fa-moon:before {
    content: "\f186";
}
.fa, .fas {
    font-weight: 900;
}
.fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
}
.fa, .fab, .fal, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

E depois, crie um novo JavaScript com o código abaixo

Código:

$(function() {
    $('#mm-claro').click(function() {
        $('#phpbb').prop('class', 'mm-day');
        $.cookie('colores', 'day');
    });
    $('#mm-oscuro').click(function() {
        $('#phpbb').prop('class', 'mm-night');
        $.cookie('colores', 'night');
    });
});

Depois de todos esses passos, será necessário criar código por código para fazer as alterações de cor que você deseja, se o tema padrão do seu fórum for claro você deve criar então a versão night, usando o css .mm-night. Se o seu fórum tiver a versão escura, deverá criar os códigos usando o css .mm-day

Confira o CSS exemplo que está no fórum neonparadise
https://pastebin.com/iLdNVx6y

Até mais!

Obrigado amigão, valeu!!!! Funcionou direitinho aqui. Tamo junto no que precisar.