1

Tenho um sisteminha, para mudar o layout da página para um layout de visão noturna, porém para isso acontecer eu tive que usar dois botões, e eu acho que fica melhor usar um toggle button para mudar o tema. Se vcs puderem ajudar eu agradeço.

function applyTheme (theme) {
    "use strict"
	document.getElementById("mypage").className = theme;
	localStorage.setItem ("theme", theme);	
}

function applyDayTheme () {
    "use strict"

	applyTheme("day");

}

function applyNightTheme() {
        "use strict"
	applyTheme("night");

}

function addButtonLestenrs () {
        "use strict"

document.getElementById("b1").addEventListener("click", applyDayTheme);
document.getElementById("b2").addEventListener("click", applyNightTheme);

}

function initiate(){
        "use strict"

	if(typeof(localStorage)===undefined)
		alert("the application can not be executed properly in this browser");
	else{
		if(localStorage.getItem("theme")===null)
			applyDayTheme();
		else
			applyTheme(localStorage.getItem("theme"));
		
	}
	addButtonLestenrs();
}

initiate();
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="Estilos.css">
	
</head>
<body id="mypage" >
	<h1>Choose a theme</h1>
	<button id="b1">Theme day</button>
	<button id="b2">Theme night</button>
	
	
	
	<p> This is an example of use of HTML5 storage API </p>

   <div class="teste1" >
    in
</div>
   
   
    <script type="text/javascript" src="change-theme.js"></script>
</body>
</html>

.day{
color:black;
background-color:rebeccapurple;

}
.night{
color:white;
background-color:black;
}

0

2 Respostas 2

0

Coloca uma classe para os dois buttons , tipo toggle-btn

function applyTheme (theme) {
   document.getElementById("mypage").className = theme;
   //localStorage.setItem ("theme", theme);	
}

function toggleThemes(){

    var day = document.getElementById('b1');  
    var night = document.getElementById('b2'); 
    
    if(day.className=="toggle-btn enabled"){
         night.className = "toggle-btn enabled";
         day.className =  "toggle-btn"
         applyTheme("night");
    } else {
         day.className = "toggle-btn enabled";
         night.className =  "toggle-btn"
         applyTheme("day");
    }

}
    .toggle-btn.enabled{
        border: 1px inset #DDD;
        background: blue;
        color: white;
    }
    .toggle-btn{
        border: none;
        padding: 5px 10px;
    }
    #mypage{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
     }
     #mypage.night{
         background: black;    
     }
<div id="mypage">
<button id="b1" class='toggle-btn enabled' onclick='toggleThemes()'>Theme day</button>
<button id="b2" class='toggle-btn' onclick='toggleThemes()'>Theme night</button>
</div>

0

Uma opção com JavaScript puro, sem precisar de jQuery, fazendo apenas um botão para alternar entre Dia e Noite.

Veja o exemplo:

function myFunction() {
    var element = document.getElementById("mypage");
    element.classList.toggle("night");
}
body {
    color:black;
    background-color:rebeccapurple;
}
.night{
    color:white;
    background-color:black;
}
body.night button {
    background:blue;
}
<body id="mypage" >
    <h1>Choose a theme</h1>
    <button id="b1" onclick="myFunction()">Dia/Noite</button>

    <p> This is an example of use of HTML5 storage API </p>

    <div class="teste1" >
    in
    </div>

</body>


Sei que não é exatamente o que vc pediu, mas se quiser uma opção usando jQuery vc pode usar o método .toggleClass("") para colocar e retirar a classe night do body apenas com um botão do tipo "on/off"

Veja o exemplo:

$("#b1").click(function(){
    $("#mypage").toggleClass("night");
});
body {
    color:black;
    background-color:rebeccapurple;
}
.night{
    color:white !important;
    background-color:black !important;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    
<body id="mypage" >
    <h1>Choose a theme</h1>
    <button id="b1">Dia/Noite</button>
    
    
    
    <p> This is an example of use of HTML5 storage API </p>

    <div class="teste1" >
    in
    </div>
        
</body>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .