Ejercicio: Variables, temas y organización

⏱ 40 minutos
📶 Nivel: principiante

Objetivo

Construir un sistema de diseño con variables CSS, un tema oscuro, color-mix() y clamp(), y comprobar que cambiando solo las variables se transforma todo el aspecto.

La página de partida

Este es el HTML de tu página. No lo modifiques: escribe solo el CSS.

pagina.html

<body class="app">
<header class="cabecera"><h1 class="titulo">Mi tienda</h1></header>
<main class="contenido">
  <article class="tarjeta"><h2>Producto</h2><p>Descripción del producto.</p><button class="boton">Comprar</button></article>
  <p class="nota">Tema configurable con variables CSS.</p>
</main>
</body>

✏️ Prueba tu CSS aquí (opcional)

Código (edítalo)

<style>
  /* escribe tu CSS */
</style>
<body class="app">
<header class="cabecera"><h1 class="titulo">Mi tienda</h1></header>
<main class="contenido">
  <article class="tarjeta"><h2>Producto</h2><p>Descripción del producto.</p><button class="boton">Comprar</button></article>
  <p class="nota">Tema configurable con variables CSS.</p>
</main>
</body>

Resultado

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

En :root, define las variables --fondo: #f7f8fc, --superficie: #ffffff, --texto: #1e2235, --acento: #4f46e5, --radio: 12px y --espacio: 1rem.
Escribe *, *::before, *::after { box-sizing: border-box; } y usa las variables en body: background: var(--fondo), color: var(--texto), margin: 0 y font-family: system-ui, sans-serif.
Haz que .tarjeta use background: var(--superficie), border-radius: var(--radio), padding: var(--espacio) y un borde 1px solid.
Haz que .boton use background: var(--acento), texto blanco, sin borde, border-radius: var(--radio) y padding: .6rem 1.2rem.
En .boton:hover, usa color-mix(in srgb, var(--acento) 85%, black) como fondo.
Crea un tema oscuro: :root[data-tema="oscuro"] redefine --fondo: #0f1222, --superficie: #181c33, --texto: #e8eaf6 y color-scheme: dark.
Haz que .titulo tenga un tamaño con clamp(1.5rem, 1rem + 2vw, 2.25rem) y que .nota use color-mix(in srgb, var(--texto) 65%, var(--fondo)).

💡 Pista 1: mi variable no se aplica

Revisa que el nombre sea idéntico (incluidos los dos guiones) y que esté definida en :root o en un ancestro del elemento. Un error de escritura hace que se descarte la declaración.

💡 Pista 2: ¿cómo se prueba el tema oscuro?

En tu caja de pruebas, añade data-tema="oscuro" al <body>. Verás cómo cambian los colores sin tocar el resto del CSS.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código CSS

✅ Ver una solución de ejemplo

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

estilos.css

:root {
  --fondo: #f7f8fc;
  --superficie: #ffffff;
  --texto: #1e2235;
  --acento: #4f46e5;
  --radio: 12px;
  --espacio: 1rem;
}

:root[data-tema="oscuro"] {
  --fondo: #0f1222;
  --superficie: #181c33;
  --texto: #e8eaf6;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, sans-serif;
}

.titulo { font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); }

.tarjeta {
  background: var(--superficie);
  border: 1px solid color-mix(in srgb, var(--texto) 15%, transparent);
  border-radius: var(--radio);
  padding: var(--espacio);
}

.boton {
  background: var(--acento);
  color: #fff;
  border: 0;
  border-radius: var(--radio);
  padding: .6rem 1.2rem;
}
.boton:hover { background: color-mix(in srgb, var(--acento) 85%, black); }

.nota { color: color-mix(in srgb, var(--texto) 65%, var(--fondo)); }

💡 🏁 Reto extra (opcional)

Añade @media (prefers-color-scheme: dark) que aplique el mismo tema oscuro automáticamente, salvo que la persona haya elegido data-tema="claro". Prueba cambiando el modo de tu sistema.