JQuery inserir ou remover um elemento LINK de CSS com Local Storage e jQuery

DiF · 27 de setembro de 2018

Boa noite pessoal.

Raramente costumo pedir ajuda em algo que desenvolvo, eu busco ajuda quando já esgotei todo meu conhecimento em procura pelo google, youtube e outros lugares.

Idealização

Pois bem, minha dúvida é sobre como implementar um sistema de temas( claro e noturno) baseado em Local Storage.

Eu consigo manipular tranquilamente um valor do Local Storage, como incluir ou substituir por outro.

Porém ainda não descobri uma maneira de fazer o teste e alterar o arquivo CSS usado pelo tema.

Problema

Não consigo incluir ou trocar o elemento LINK contendo o CSS do tema diretamente no header.

O que já foi feito

Criei um arquivo CSS base. Nele consta todas as regras, incluindo as cores padrões que são claras.

Criei outro arquivo chamado tema-escuro.css, onde este é exatamente igual ao da base, porém com as cores escuras.

No HTML, possui um elemento checkbox contendo o valor: "noturno". Onde se checado, é true e deschecado é false.

Então toda vez que eu marco a caixa é gravado no local storage o valor true ou false.

Então depois eu resgato este valor e comparo. Se true, o que eu esperava é que ele alterasse o arquivo CSS padrão, para o CSS tema-escuro. e por como o valor está no local storage, mesmo que fechasse o navegador e abrir de novo, ele compara e vê se é true e chama o arquivo de tema escuro.

Então, eu tentei fazer o simples teste, e realmente ele faz o teste se é true ou false, porém ele não chama o arquivo certo. No caso está chamando o mesmo padrão.

O que vocês me sugerem? Este é um projeto pessoal e é uma extensão para o Chrome, para o meu uso diário.

O que já pensei em fazer:

Deixar o arquivo CSS de base apenas com as regras das estruturas e criar mais dois arquivo CSS chamado tema-claro.css e tema-escuro.css onde cada um deles só iriam conter as cores dos elementos e nada mais.

E aí pelo teste do valor no local storage, chamar o tema claro ou o tema escuro dentro do elemento <head>

Até agora tudo que já testei não funcionou.

se tiverem alguma ideia, agradeço. E lembro que não posso usar banco de dados e nem armazenamento em arrays. Deve ser feito com Local Storage, para manter a escolha do usuário do tema que usará.

De qualquer forma, fico no aguardo e agradeço a quem ler todo o tópico e ajudar de alguma forma.

Att,

Moderador DiF

FabianoS · 28 de setembro de 2018

@DiF eae meu querido beleza? então não sabia sobre localStorage ate você mencionar, eu utilizo muito cookies e banco de dados para armazenar isso mas quando vi isso me surpreendeu então eu li um pouco sobre e fiz um teste, vê pra mim se e isso que você esta querendo fazer, se não for só ignora kkkk

https://linuxof.000webhostapp.com/

DiF · 28 de setembro de 2018

@FabianoS Opa!

Parece que é exatamente o que eu estava buscando! Poderia por gentileza, explicar como você fez para eu entender e implementar no meu trabalho.

De início, parabéns pela sua iniciativa.

FabianoS · 28 de setembro de 2018

Fico feliz em poder te ajudar =),

primeira coisa que fiz foi chamar um função pra ver se ja existe o tema escolhido, se não o mesmo vai pro style padrão,

function ConfereTema(){

    	if(localStorage.getItem('tema')){
    	// se ja tiver o tema cadastrado
          // pega o tema ja guardado
    		var tema = localStorage.getItem('tema');
          
	       // Faz a troca do arquivo de css tema
	       $("#temacss").attr("href", tema);

	       // Retorna false para manter na mesma tela e finalizar a função.
	        return false;


    	}else{
    		// se nao tiver o tema, seta o style padrão da pagina
    		localStorage.setItem('tema',"style_padrao");

    	}

    }

// chama função 
ConfereTema();

depois outra função para registrar o tema escolhido dos botões.

$(".trocacssbtn").on("change", function() {
  		// pega o valor do botão
        var novoStyle = $(this).val()+".css"; 
  		//SETA NO LocalStorage o novo tema	
       	localStorage.setItem('tema',novoStyle);
       // Faz a troca do arquivo de css tema
       $("#temacss").attr("href", novoStyle);
       // Retorna false para manter na mesma tela e finalizar a função.
        return false;
    });

obs.: foi criado duas folhas de estilos uma padrão e outra contendo as nova estilizações.

segue o index

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link id="temacss" href="style_test.css" rel="stylesheet"> 
</head>
<body>
<div>
  <p>TEXTO DE TESTE PARA USUARIO ALTERAR</p>
</div>
<div>
  <p>TEXTO DE TESTE PARA USUARIO ALTERAR</p>
</div>

<div class="bts">
	<form>
		<p>SELECIONE O TEMA</p>
		<span>claro</span><input class="trocacssbtn"type="radio" name="tema" value='style_padrao'>
		<span>escuro</span><input class="trocacssbtn" type="radio" name="tema" value='style_black'>
	</form>
</div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fun.js" ></script>
</html>

fonts: https://developer.mozilla.org/pt-BR/docs/Web/API/Storage

DiF · 28 de setembro de 2018

@FabianoS Muito obrigado pela ótima explicação. Vou fazer as implementações baseadas no que me ensinou!

O que é mais gratificante é saber que minha dúvida, fez você adquirir um novo conhecimento.

Assim como você, aprendi muitas coisas ajudando os outros!

Att,

DiF

dudaskank · 28 de setembro de 2018

Criei uma outra versão, sem o jquery, assim se não estiver usando ele, não vira um peso a mais no seu plugin. Outras observações:

Coloque o script que vai carregar o tema logo após o <link>, assim não vai ter a página toda renderizada e só depois trocar de tema.
Este modo que o @FabianoS usou e eu adaptei permite mais de 2 temas, como pode ver no meu exemplo, não sei se tinha ficado claro rs. Do jeito que estava fazendo, era só claro/escuro, assim tem mais opção.
Coloquei o caminho direto nas opções, para uso pessoal facilita como pode ver, mas não sei se seria algo ruim para segurança (sei lá) caso queira liberar o plugin para uso público.

index.html

<html>
  <head>
    <title>Teste Tema</title>
    <link type="text/css" rel="stylesheet" media="all" href="css/theme-default.css" id="theme-css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/theme.js"></script>
  </head>
  <body>
    <form>
      <select id="theme-switch">
        <option value="css/theme-default.css">Padrão</option>
        <option value="css/theme-light.css">Claro</option>
        <option value="css/theme-dark.css">Escuro</option>
      </select>
    </form>
    <h1>
      Testando o tema
    </h1>
    <p>
      Teste do trocador de tema
    </p>
  </body>
</html>

js/theme.js

// sem necessidade para jquery

// $(document).ready(fn)
function ready(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

var theme = localStorage.getItem('theme-css') || 'css/theme-default.css';
var theme_css = document.getElementById('theme-css');
// $(theme_css).attr('href', theme);
theme_css.setAttribute('href', theme);


ready(function() {
  var theme_switch = document.getElementById('theme-switch');
  theme_switch.value = theme;

  // $(el).on(eventName, eventHandler);
  theme_switch.addEventListener('change', function() {
    var theme = this.value;
    theme_css.setAttribute('href', theme);
    localStorage.setItem('theme-css', theme);
  })
});

css/theme-default.css

* {
  font-family: sans-serif;
  background: #eef;
}

css/theme-light.css

* {
  font-family: sans-serif;
  background: #fff;
  color: #777;
}

css/theme-dark.css

* {
  font-family: sans-serif;
  background: #333;
  color: #aaa;
}

Entrar

JQuery inserir ou remover um elemento LINK de CSS com Local Storage e jQuery

Posts recomendados

DiF

FabianoS

DiF

FabianoS

DiF

dudaskank

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos