document.addEventListener('DOMContentLoaded', ( ) => {
//eventListener -->puede ser un simple elemento en un archivo, el mismo documento , una ventana o un XMLHttpRequest.
//DOMContentLoaded --> es disparado cuando el documento HTML ha sido completamente cargado y parseado,
// sin esperar hojas de estilo, images y subframes para finalizar la carga
let colorPrincipal= '#FFFFFF';
let colorNegro='#000000'
let tema=document.getElementById('icono_tema')
tema.addEventListener('click', ()=>{
let bg = document.body;
let h1= document.querySelector('header h1')
if(bg.style.backgroundColor === "" || bg.style.backgroundColor === colorPrincipal){
bg.style.backgroundColor =colorNegro
h1.style.color=colorNegro
} else if (bg.style.backgroundColor =colorNegro){
bg.style.backgroundColor =colorPrincipal
h1.style.color=colorNegro
}
})
})
HTML AQUI
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme</title>
<link rel="stylesheet" href="./theme.css">
<script src="./theme.js"></script>
</head>
<body>
<header id="pagina" class="colores">
<nav class="headd">
<div class="icono_hamburguesa">
<span id="menu" ></span>
</div>
</nav>
<div class="headd">
<h1 id="h1"> <span>Tema</span> que <span>Cambia</span> de <span>Color</span></h1>
</div>
<div class="headd">
<div id="icono_tema" >
<span id="semi_circulo_izquierda" ></span>
<span id="semi_circulo_derecha" ></span>
</div>
</div>
</header>
<section id="pagina" class="colores"></section>
<footer id="pagina2" class="colores"></footer>
</body>
</html>
css aqui
document.addEventListener('DOMContentLoaded', ( ) => {
//eventListener -->puede ser un simple elemento en un archivo, el mismo documento , una ventana o un XMLHttpRequest.
//DOMContentLoaded --> es disparado cuando el documento HTML ha sido completamente cargado y parseado,
// sin esperar hojas de estilo, images y subframes para finalizar la carga
let colorPrincipal= '#FFFFFF';
let colorNegro='#000000'
let tema=document.getElementById('icono_tema')
tema.addEventListener('click', ()=>{
let bg = document.body;
let h1= document.querySelector('header h1')
if(bg.style.backgroundColor === "" || bg.style.backgroundColor === colorPrincipal){
bg.style.backgroundColor =colorNegro
h1.style.color=colorNegro
} else if (bg.style.backgroundColor =colorNegro){
bg.style.backgroundColor =colorPrincipal
h1.style.color=colorNegro
}
})
})
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1{
cursor: default;
text-align: center;
}
header{
min-width: 100vw;
min-height: 15vh;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 5fr 1fr;
z-index: 2;
}
nav{
z-index: 1;
}
.icono_hamburguesa{
width: 70px;
height: 66px;
border-radius: 50%;
background: red;
cursor: pointer;
display: flex;
align-items: center;
}
#menu{
position: absolute;
background: black;
width:40px;
height: 4px;
}
#menu::before {
position: absolute;
content: "";
width: 40px;
height: 4px;
top: 15px;
background: black;
}
#menu::after{
position: absolute;
content: "";
width: 40px;
height: 4px;
top: -15px;
background: black;
}
.headd{
border-bottom: 3px solid #9171C2;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
#icono_tema{
cursor: pointer;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
#semi_circulo_derecha{
width: 20px;
height: 40px;
border: 2px solid;
background: black;
border-radius: 0 100px 100px 0;
}
#semi_circulo_izquierda{
width: 20px;
height: 40px;
border: 2px solid black;
background: white;
border-radius: 100px 0 0 100px ;
}
section{
min-width: 100vw;
min-height: 70vh;
z-index: 0;
}
h1 span{
color: #9171C2;
}
footer{
position: relative;
min-width: 100vw;
min-height: 15vh;
border-top: 2px solid #9171C2 ;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme</title>
<link rel="stylesheet" href="./theme.css">
<script src="./theme.js"></script>
</head>
<body>
<header id="pagina" class="colores">
<nav class="headd">
<div class="icono_hamburguesa">
<span id="menu" ></span>
</div>
</nav>
<div class="headd">
<h1 id="h1"> <span>Tema</span> que <span>Cambia</span> de <span>Color</span></h1>
</div>
<div class="headd">
<div id="icono_tema" >
<span id="semi_circulo_izquierda" ></span>
<span id="semi_circulo_derecha" ></span>
</div>
</div>
</header>
<section id="pagina" class="colores"></section>
<footer id="pagina2" class="colores"></footer>
</body>
</html>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1{
cursor: default;
text-align: center;
}
header{
min-width: 100vw;
min-height: 15vh;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 5fr 1fr;
z-index: 2;
}
nav{
z-index: 1;
}
.icono_hamburguesa{
width: 70px;
height: 66px;
border-radius: 50%;
background: red;
cursor: pointer;
display: flex;
align-items: center;
}
#menu{
position: absolute;
background: black;
width:40px;
height: 4px;
}
#menu::before {
position: absolute;
content: "";
width: 40px;
height: 4px;
top: 15px;
background: black;
}
#menu::after{
position: absolute;
content: "";
width: 40px;
height: 4px;
top: -15px;
background: black;
}
.headd{
border-bottom: 3px solid #9171C2;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
#icono_tema{
cursor: pointer;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
#semi_circulo_derecha{
width: 20px;
height: 40px;
border: 2px solid;
background: black;
border-radius: 0 100px 100px 0;
}
#semi_circulo_izquierda{
width: 20px;
height: 40px;
border: 2px solid black;
background: white;
border-radius: 100px 0 0 100px ;
}
section{
min-width: 100vw;
min-height: 70vh;
z-index: 0;
}
h1 span{
color: #9171C2;
}
footer{
position: relative;
min-width: 100vw;
min-height: 15vh;
border-top: 2px solid #9171C2 ;
}