Modo Claro/Oscuro

Ejercicio para practicar habilidades de HTML y CSS. Incorporamos el modo claro/oscuro teniendo en cuenta las preferencias del sistema sin framework.

Podés visitar el ejercicio que desarrollaremos aquí ↩

💻 Ver explicación en video de youtube.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Modo claro/oscuro</title>
</head>
<body>
    <input type="checkbox"  id="cambiar-color">
    <div class="contenedor-app">
        <header>
            <nav class="contenedor">
                <a href="#inicio" id="logo">🤖 LOGO</a>
                <ul class="opciones">
                    <li><a href="#inicio">inicio</a></li>
                    <li><a href="#productos">productos</a></li>
                    <li><a href="#contacto">contacto</a></li>
                </ul>
                <div class="iconos">
                    <label for="cambiar-color" id="sol">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--color-texto)"><path d="M440-760v-160h80v160h-80Zm266 110-55-55 112-115 56 57-113 113Zm54 210v-80h160v80H760ZM440-40v-160h80v160h-80ZM254-652 140-763l57-56 113 113-56 54Zm508 512L651-255l54-54 114 110-57 59ZM40-440v-80h160v80H40Zm157 300-56-57 112-112 29 27 29 28-114 114Zm113-170q-70-70-70-170t70-170q70-70 170-70t170 70q70 70 70 170t-70 170q-70 70-170 70t-170-70Zm283-57q47-47 47-113t-47-113q-47-47-113-47t-113 47q-47 47-47 113t47 113q47 47 113 47t113-47ZM480-480Z"/></svg>
                    </label>
                    <label for="cambiar-color" id="luna">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--color-texto)"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
                    </label>
                </div>
            </nav>
        </header>
        <main>
            <section id="inicio">inicio</section>
            <section id="productos">productos</section>
            <section id="contacto">contacto</section>
        </main>
        <footer></footer>
    </div>   
</body>
</html>

CSS

    :root{
        --color-fondo:#fff;
        --color-texto:#050505;
        --color-sombra: rgba(0,0,0,0.3);
        --color-resaltador:chartreuse;
    }
    @media(prefers-color-scheme: dark){
        .contenedor-app{
            --color-fondo:#050505;
            --color-texto:#fff;
            --color-sombra: rgba(255,255,255,0.3);
            --color-resaltador:orangered;
        }
        #cambiar-color:checked ~ .contenedor-app{
        --color-fondo:#fff;
        --color-texto:#050505;
        --color-sombra: rgba(0,0,0,0.3);
        --color-resaltador:chartreuse;
    }
    }
    @media(prefers-color-scheme: light){
        #cambiar-color:checked ~ .contenedor-app{
            --color-fondo:#050505;
            --color-texto:#fff;
            --color-sombra: rgba(255,255,255,0.3);
            --color-resaltador:orangered;
        }
    }

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    ::selection{
        background-color: var(--color-texto);
        color: var(--color-fondo);
    }
    html{
        scroll-behavior: smooth;
        scroll-padding-top: 5rem;
    }

    a{
        text-decoration: none;
        color: inherit;
    }
    ul{
        list-style: none;
    }
    body{
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 1.5rem;
    }
    #cambiar-color{
        display: none;
    }

    .contenedor-app{

        background-color: var(--color-fondo);
        color: var(--color-texto);
    }
    .contenedor{
        width: min(calc(100% - 32px), 1200px);
        margin: 0 auto;
        padding-block: 1.5rem;
    }
    header{
        position: sticky;
        top:0;
        right: 0;
        left: 0;
        box-shadow: 2px 2px 2px var(--color-sombra);
        background-color: var(--color-fondo);
    }


    header nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    header nav ul{
        display: flex;
        justify-content: center;
        gap:2rem;
        text-transform: capitalize;
    }

    section{
        min-height: 100vh;
        display: grid;
        place-items: center;
        text-transform: uppercase;
        font-size: 4rem;
        border-bottom: 5px solid var(--color-resaltador);
    }
    .iconos label{
        position: absolute;
        transform: translate(-100%,-50%);
        cursor: pointer;
    }
    #luna{
        visibility: hidden;
        opacity: 0;
    }
    #cambiar-color:checked ~ .contenedor-app .iconos #sol{
        visibility: hidden;
        opacity: 0;
    }
    #cambiar-color:checked ~ .contenedor-app .iconos #luna{
        visibility: visible;
        opacity: 1;
    }

Recursos

Íconos sol y luna : https://fonts.google.com

←Menú desplegable

Mega menú→