Modo escuro e modo claro

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Atendido / Resolvido Modo escuro e modo claro

Mensagem por Akeido 01.12.20 20:41

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.
Akeido

Akeido
Nível 5

Masculino
Inscrito dia : 02/08/2011
Mensagens : 57
Pontos Ativos : 90

http://superonzerv.forumeiros.net/
  • 0

Atendido / Resolvido Re: Modo escuro e modo claro

Mensagem por Roevs 02.12.20 11:30

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!


Modo escuro e modo claro WpZJdpr
Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Roevs

Roevs
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/02/2012
Mensagens : 6468
Pontos Ativos : 8293

https://www.sololevelingrpg.com/

Atendido / Resolvido Re: Modo escuro e modo claro

Mensagem por Akeido 02.12.20 13:17

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

Akeido
Nível 5

Masculino
Inscrito dia : 02/08/2011
Mensagens : 57
Pontos Ativos : 90

http://superonzerv.forumeiros.net/

Atendido / Resolvido Re: Modo escuro e modo claro

Mensagem por pedxz 02.12.20 14:00

Tópico resolvido


Movido para "Questões resolvidas".


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5839
Pontos Ativos : 6947

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum