Teoría
Teoría

Eliminar una clase con classList.remove

Hemos verificado que JavaScript ha encontrado efectivamente un elemento con la clase de page. Ahora es el momento de Cambiar tema.

El elemento encontrado tiene una segunda clase light-theme, gracias a ella se habilita un tema ligero en la página. Primero tenemos que eliminar esta clase utilizando el comando:

document.querySelector('.page').classList.remove('light-theme');

Esta parte del comando encuentra el elemento deseado — document.querySelector('.page'), y esta parte elimina la clase del elemento — classList.remove('light-theme').

Veamos qué ocurre cuando se ejecuta esta instrucción:

<!-- Marcado inicial --> <
body class="page light-theme">
    ... 
</body>

<!-- Marcado del navegador después de classList.remove('light-theme') -->
<body class="page">
    ...
</body>

¡Apaguemos el tema de la luz con JavaScript!

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> <title>¡FlashNews!</title> </head> <body class="page light-theme"> <header class="page-header"> <div class="container"> <a class="header-link" href="#">Inicio</a> <button class="theme-button" type="button">Cambiar tema</button> </div> </header> <main class="inner-main"> <div class="container"> <h1 class="inner-heading">Suscríbase a nuestro boletín</h1> <p class="subscription-message">Nos comprometemos a enviarle noticias no más de una vez al día, y sólo las más interesantes e importantes.</p> <form action="https://echo.htmlacademy.ru/courses" method="post" class="subscription"> <div class="subscription-inner"> <label class="subscription-label" for="subscription-email">orreo electrónico</label> <input type="email" class="subscription-email" placeholder="keks@flashnews.es" value="" required="" id="subscription-email"> </div> <button class="button subscription-button" type="submit">Suscríbase</button> </form> <section class="news-list list-tiles-view"> <h2 class="news-list-heading">O lea más noticias</h2> <article class="new-block"> <img src="img/new-graph.jpg" alt=""> <div class="new-block-text"> <h3>Nueva biblioteca para crear gráficos</h3> <p>Ahora puedes crear un cuadro de mando en cuestión de segundos.</p> <time datetime="2019-10-16">16 de octubre de 2019.</time> </div> </article> <article class="new-block"> <img src="img/new-robot.jpg" alt=""> <div class="new-block-text"> <h3>¿Qué pasa con los robots?</h3> <p>Se están haciendo muchas cosas interesantes en robótica, esta noticia podría haber tratado de eso, pero no.</p> <time datetime="2019-10-15">15 de octubre de 2019.</time> </div> </article> </section> </div> </main> <footer class="page-footer"> <div class="container"> <p>¡FlashNews!</p> <a class="footer-logo"> <img src="img/white-logo.svg" alt="FlashNews!"> </a> </div> </footer> <script src="script.js"></script> </body> </html>

CSS

/* Light theme */ .light-theme { color: #333333; background-color: #eae9f2; } .light-theme .page-header { background-color: #ffffff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } .light-theme .header-link { color: #6653d9; } .light-theme .header-link::before { background: url("img/arrow-back-light.svg") no-repeat 0 0; } .light-theme .theme-button { color: #6653d9; border: 1px solid #6653d9; } .light-theme .theme-button::before { background-image: url("img/moon-normal.svg"); } .light-theme .theme-button:focus, .light-theme .theme-button:hover { color: #ffffff; background-color: #6653d9; } .light-theme .theme-button:focus::before, .light-theme .theme-button:hover::before { background-image: url("img/moon-hover.svg"); } .light-theme .menu-open { background-color: #ffffff; background-image: url("img/menu-open-light.svg"); } .light-theme .menu-open:focus, .light-theme .menu-open:hover { background-color: #6653d9; background-image: url("img/menu-open-dark.svg"); } .light-theme .menu-close { background-color: #6653d9; } .light-theme .menu-close:focus, .light-theme .menu-close:hover { background-color: #473c8d; } .light-theme .main-menu { background-color: #6653d9; color: #ffffff; } .light-theme .main-menu a:focus, .light-theme .main-menu a:hover { background-color: #473c8d; } .light-theme .news-view button { border: 1px solid #6653d9; color: #6653d9; } .light-theme .news-view button:focus, .light-theme .news-view button:hover, .light-theme .news-view button:active, .light-theme .news-view .view-checked { background-color: #6653d9; color: #ffffff; } .light-theme .news-view .row-view:focus::before, .light-theme .news-view .row-view:hover::before, .light-theme .news-view .row-view:active::before { background-image: url("img/rows-light-checked.svg"); } .light-theme .news-view .tile-view:focus::before, .light-theme .news-view .tile-view:hover::before, .light-theme .news-view .tile-view:active::before { background-image: url("img/tiles-light-checked.svg"); } .light-theme .row-view::before { background-image: url("img/rows-light.svg"); } .light-theme .tile-view::before { background-image: url("img/tiles-light.svg"); } .light-theme .row-view::before { background-image: url("img/rows-light.svg"); } .light-theme .row-view.view-checked::before { background-image: url("img/rows-light-checked.svg"); } .light-theme .tile-view.view-checked::before { background-image: url("img/tiles-light-checked.svg"); } .light-theme .new-block { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .light-theme .new-block time { color: #aaaaaa; } .light-theme .cookies-agreement { background-color: #fdeacd; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2); } .light-theme .button { background-color: #6653d9; color: #ffffff; } .light-theme .button:focus, .light-theme .button:hover { background-color: #473c8d; } .light-theme .page-footer { background-color: #6653d9; color: #ffffff; } .light-theme .subscription { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .light-theme .subscription-message { background-color: #6653d9; color: #eae9f2; } .light-theme .subscription-message::before { background-image: url("img/icon-ok-light.svg"); } .light-theme .subscription-label { color: #6653d9; } .light-theme .subscription-email { border-bottom: 1px solid #6653d9; color: #333333; } /* Dark theme */ .dark-theme { color: #f2f2f2; background-color: #17161a; } .dark-theme .page-header { background-color: #373540; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); } .dark-theme .header-link { color: #9484f2; } .dark-theme .header-link::before { background: url("img/arrow-back-dark.svg") no-repeat 0 0; } .dark-theme .theme-button { color: #9484f2; border: 1px solid #9484f2; } .dark-theme .theme-button::before { background-image: url("img/sun-normal.svg"); } .dark-theme .theme-button:focus, .dark-theme .theme-button:hover { color: #17161a; background-color: #9484f2; } .dark-theme .theme-button:focus::before, .dark-theme .theme-button:hover::before { background-image: url("img/sun-hover.svg"); } .dark-theme .menu-open { background-color: #373540; background-image: url("img/menu-open-dark.svg"); } .dark-theme .menu-open:focus, .dark-theme .menu-open:hover { background-color: #473c8d; background-image: url("img/menu-open-dark.svg"); } .dark-theme .menu-close { background-color: #473c8d; } .dark-theme .menu-close:focus, .dark-theme .menu-close:hover { background-color: #6653d9; } .dark-theme .main-menu { background-color: #473c8d; color: #f2f2f2; } .dark-theme .main-menu a:focus, .dark-theme .main-menu a:hover { background-color: #6653d9; } .dark-theme .news-view button { border: 1px solid #9484f2; color: #9484f2; } .dark-theme .news-view button:focus, .dark-theme .news-view button:hover, .dark-theme .news-view button:active, .dark-theme .news-view .view-checked { background-color: #9484f2; color: #17161a; } .dark-theme .news-view .row-view:focus::before, .dark-theme .news-view .row-view:hover::before, .dark-theme .news-view .row-view:active::before { background-image: url("img/rows-dark-checked.svg"); } .dark-theme .news-view .tile-view:focus::before, .dark-theme .news-view .tile-view:hover::before, .dark-theme .news-view .tile-view:active::before { background-image: url("img/tiles-dark-checked.svg"); } .dark-theme .row-view::before { background-image: url("img/rows-dark.svg"); } .dark-theme .tile-view::before { background-image: url("img/tiles-dark.svg"); } .dark-theme .row-view.view-checked::before { background-image: url("img/rows-dark-checked.svg"); } .dark-theme .tile-view.view-checked::before { background-image: url("img/tiles-dark-checked.svg"); } .dark-theme .new-block { background-color: #2a2930; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .new-block time { color: #888888; } .dark-theme .cookies-agreement { background-color: #473c8d; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .button { background-color: #9484f2; color: #17161a; } .dark-theme .button:focus, .dark-theme .button:hover { background-color: #b6aaff; } .dark-theme .page-footer { background-color: #0a0910; color: #f2f2f2; } .dark-theme .subscription { background-color: #2a2930; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .subscription-message { background-color: #9484f2; color: #17161a; } .dark-theme .subscription-message::before { background-image: url("img/icon-ok-dark.svg"); } .dark-theme .subscription-label { color: #9484f2; } .dark-theme .subscription-email { border-bottom: 1px solid #9484f2; color: #f2f2f2; }

JavaScript

console.log(document.querySelector('.page')); console.log(document.querySelector('.theme-button'));

ObjetivosRealizado

Eliminar toda la salida a la consola.
Escribir una instrucción que elimine la clase light-theme del elemento page: document.querySelector('.page').classList.remove('light-theme');.
Notar que la página en el mininavegador ha cambiado.