Skip to main content
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 ;
}
 

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

*{
    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 ;
}

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>
 

Origen Enlace

El color de fondo no cambia por medio de este script de JAVASCRIPT

Estoy intentando que el fondo del documento cambie de color, se supone que a través de este código debería ser posible. Pero al ejecutarlo solo logra cambiar de color dos veces, pero luego deja de funcionar (no entiendo la razon), alguna idea de por qué sucede. Ya lo he intentado bastante (estoy en fase de aprendizaje), pero no logro solucionar este error por ningún medio que llegue a mi alcance. DEJO TODO EL CODIGO, HTML, CSS Y JS, PARA QUE SEA MÁS FACIL DE ENTENDER. SI EL CODIGO ESTA MAL Y LLENO DE MALAS PRACTICAS PERDON, PERO LLEVO UNA SEMANA O MENOS REALIZANDO EJERCICIOS POR MI CUENTA Y PEQUEÑOS RETOS

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

*{
    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 ;
}