Modo escuro para fórum

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.

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 Visualização Templates Geral overall_header

Instale o código abaixo dentro da tag head.

Código:

<script type="text/javascript">!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"))})}}();</script>

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

Atualizado!

Obrigado @pedxz

Bom dia.

@Don Corleone você também pode usar este método para ativar o modo escuro: https://ajuda.forumeiros.com/t118040-modo-escuro-para-forum#833732 É um método simples também.

Legal, mas hoje em dia eu uso variáveis. Com isso diminuo em muito o css, depois faço um tutorial para cá.
Veja o exemplo: https://somosmugiwara.forumeiros.com/
Coloquei um data-theme="dark" no html, acrescentado via javascript e depois basta alterar o css desta forma