Criar variável CSS para tema claro/escuro

Detalhes da questão

Endereço do fórum:
Versão do fórum: phpBB3

Descrição

Olá queridos, enão eu estava seguindo um tutorial de um querido de modo escuro https://ajuda.forumeiros.com/t116740-modo-escuro-para-forum#827812 e ai eu queria fazer um pouco diferente, mas infelizmente meu conhecimento de java é péssimo. Mas queria utilizar um root ao invés do .back{background:#eee;color:#333;padding:20px}
[data-theme="dark"] .back{background:#333;color:#fff}

Pois, pelo que eu entendi eu teria que usar esse codigo pra todo elemento que eu queira mudar de cor.

Olá @kkmlpk,

Aqui tem um exemplo de como pode usar o :root dependendo do tema do fórum (claro/escuro):

Código:

:root {
    --primary-color: #fafafa;
    --secondary-color: #F7F7F7;
    --link-color: #f5944f;
}

html[data-theme='dark'] {
    --primary-color: #2c345c;
    --secondary-color: #47168f;
    --link-color: #fafafa;
}

Cordialmente,
pedxz.

Não funcionou, precisa mudar alguma coisa no java?

Olá, faltou o body depois do HTML. No caso ficaria assim:

Código:


html body[data-theme='dark'] {
    --primary-color: #2c345c;
    --secondary-color: #47168f;
    --link-color: #fafafa;
}


*Edit

Veja abaixo um outro modo.

https://jsfiddle.net/Kadanda/vqe5b8an/9/

A preview funcionou! Porém no fórum os mesmos codigos não funcionam

Apague tudo e vamos começar novamente.

Adicione em eu javascript o código abaixo;

Código:



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


Depois adicione em seu css;

Código:


.custom-switch {
    width: 40px;
    position: fixed;
    margin: 5px 13px;
}

.custom-switch:before {
    display: block;
    color: #ddd;
    font-weight: 700;
    content: "\f185";
    font-family: FontAwesome;
    font-size: 14px;
    background: #444;
    padding: 3px;
    text-align: center;
}

.custom-switch input.toggle {
    display: none;
}

.custom-switch input.toggle + label {
    display: inline-block;
    position: relative;
    box-shadow: inset 0 0 0 1px #d5d5d5;
    height: 20px;
    width: 40px;
    margin: 0;
    color: #fff;
    text-align: center;
}

.custom-switch:after {
    display: block;
    font-weight: 700;
    color: #0329a0;
    content: "\f186";
    font-family: FontAwesome;
    font-size: 14px;
    padding: 3px;
    background: #444;
    text-align: center;
}

.custom-switch input.toggle:checked + label:before {
    width: 40px;
}
.custom-switch input.toggle + label:before {
    content: "";
    display: block;
    height: 20px;
    background: #333;
    transition: .1s ease-in-out;
}

.custom-switch input.toggle:checked + label:after {
    left: 20px;
    background: #0329a0;
}
.custom-switch input.toggle + label:after {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    top: 0;
    left: 0;
    background: #ddd;
    box-shadow: inset 0 0 0 5px #333;
    transition: .1s ease-in-out;
}


Por fim teremos o botão de troca de tema. Coloue no template overhall;

Código:


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


Feito isto, retorne aki.

Ainda não funcionou

O senhor n colocou o código javascript. Sugiro ue o adicione dentro do template overhall header.

Coloquei e continua não funcionando

Olá, tire uma print e mostre-me.

Lembre-se, o código deve ser colocado dentro da tag script, veja abaixo. Colue dentro da tag head, localizado no template overhall header.

Código:

<script>
!function(){var t,e=document.getElementById("darkSwitch");if(e){t=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch"),(e.checked=t)?document.documentElement.setAttribute("data-theme","dark"):document.documentElement.removeAttribute("data-theme"),e.addEventListener("change",function(t){e.checked?(document.documentElement.setAttribute("data-theme","dark"),localStorage.setItem("darkSwitch","dark")):(document.documentElement.removeAttribute("data-theme"),localStorage.removeItem("darkSwitch"))})}}();</script>

Eu fiz alterações para o codigo 'padrão', porém continua sem resultado, fiz mudanças no css como:


Porém ainda não funciona

Eu ainda preciso ver se o javascript está funcionando. Esta implementação via CSS está errada, pois o senhor vai usar o root, logo será por variáveis css.

Eu acredito que por root seria mais simples do que criar um [data-theme="dark"] para cada elemento que precisa mudar, por isso a preferência

Por fim, consegue seguir a partir de agora?

Sim, muito obrigada!!