Modo escuro para fórum

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

Modo escuro para fórum Empty Modo escuro para fórum

Mensagem por Connor R. 06.08.21 17:59

Modo escuro para fórum


Por meio deste código os membros podem alternar entre o modo claro e o modo escuro, de acordo com a personalização dada pelo administrador do fórum.

Características e aplicação


Autor: Connor R.
Versão do código: 1.0
Versão de fórum: Todas as versões

Resultado da aplicação

A aplicação terá a seguinte aparência / resultado após ser aplicado ao fórum Forumeiros.

Modo escuro para fórum OZLurS2

Local de instalação


A instalação consiste em duas partes. A primeira parte é referente a um código javascript, que deve ser instalado no template overall_header.

Painel administrativo :seta2: Visualização :seta2: Templates :seta2: Geral :seta2: overall_header

Instale o código abaixo dentro da tag head.

Código:
!function(){var t,e=document.getElementById("darkSwitch");if(e){t=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch"),(e.checked=t)?document.body.setAttribute("data-theme","dark"):document.body.removeAttribute("data-theme"),e.addEventListener("change",function(t){e.checked?(document.body.setAttribute("data-theme","dark"),localStorage.setItem("darkSwitch","dark")):(document.body.removeAttribute("data-theme"),localStorage.removeItem("darkSwitch"))})}}();

Posteriormente, no mesmo template, adicione o código abaixo no inicio da tag body.

Código:
<div class="custom-switch"><input type="checkbox" class="toggle" id="darkSwitch"><label for="darkSwitch"></label></div>

Abaixo segue uma recomendação de personalização do botão, é necessária a instalação da font awesome. Depois basta adicionar o código abaixo em sua folha css.

Código:
.custom-switch{margin:5px 13px;position:fixed}
.custom-switch:before{background:#444;color:#ddd;content:"\f185";float:left;font-family:FontAwesome;font-size:14px;font-weight:700;padding:3px;text-align:center}
.custom-switch input.toggle{display:none}
.custom-switch input.toggle + label{box-shadow:inset 0 0 0 1px #d5d5d5;color:#fff;display:inline-block;height:20px;margin:0;position:relative;text-align:center;width:40px}
.custom-switch input.toggle + label:before{background:#333;content:"";display:block;height:20px;transition:.1s ease-in-out}
.custom-switch input.toggle + label:after{background:#ddd;box-shadow:inset 0 0 0 5px #333;content:"";height:20px;left:0;position:absolute;top:0;transition:.1s ease-in-out;width:20px}
.custom-switch:after{background:#444;color:#0329a0;content:"\f186";float:right;font-family:FontAwesome;font-size:14px;font-weight:700;padding:3px;text-align:center}
.custom-switch input.toggle:checked + label:before{width:40px}
.custom-switch input.toggle:checked + label:after{background:#0329a0;left:20px}

Por fim, preciso explicar como o botão funciona. Ao ativar o modo escuro será adicionado um tema a tag body, definindo assim o modo escuro. Este modo é personalizável via css, ou seja, terá que efetuar alterações nas áreas onde deseja que o modo escuro funcione, abaixo segue um tutorial.

Div com a classe back sem o modo escuro ativo:

Código:
.back{background:#fff;color:#333}

Div com a classe back com o modo escuro ativo:

Código:
[data-theme="dark"] .back{background:#333;color:#fff}

Logo, para personalizar o seu css para o modo escuro basta colocar antes da classe o nome [data-theme="dark"] e depois personalizar. Abaixo segue um link no JsFiddle com um exemplo.

Exemplo de como funciona
Connor R.

Connor R.
Membro do fórum

Masculino
Membro desde : 06/08/2012
Mensagens : 1212
Pontos ativos : 1955

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


Permissões neste fórum
Você não pode responder aos tópicos