Haga lo que hicimos en clase. | HTML y CSS: header, footer y variables CSS | Alura Latam

Haga lo que hicimos en clase.

Define variables “globales” y aplícalas

En tu styles.css, crea un set base en :root y usa var() donde pinte:

:root{
/* Colores de tema */
--color-primario: #22D4FD;
--color-fondo: #0f0f0f;
--color-texto: #F6F6F6;
--color-acento: #FFB703;

/* Tipografía (ejemplo) */
--font-size-base: 16px;
--font-weight-tit: 600;
}

/* Ejemplos de uso */
body{
background: var(--color-fondo);
color: var(--color-texto);
font-size: var(--font-size-base);
}
.header{ background: var(--color-primario); }
.boton{
background: var(--color-acento);
color: #000;
}

Referencias oficiales sobre custom properties y var() (con ejemplos y compatibilidad).
MDN Web Docs
+1

Cambia rápidamente de paleta (copiar/pegar)

Solo reemplaza los valores del bloque :root por una de estas propuestas (o las tuyas):

Paleta A — “Marina”
:root{
--color-primario:#22D4FD;
--color-fondo:#0e1420;
--color-texto:#EAF2F8;
--color-acento:#5CE1E6;
}

Paleta B — “Sunset”
:root{
--color-primario:#FF6B6B;
--color-fondo:#1A1A1A;
--color-texto:#F7F7F7;
--color-acento:#FFD166;
}

Paleta C — “Forest”
:root{
--color-primario:#2A9D8F;
--color-fondo:#0B1B18;
--color-texto:#E6FFFA;
--color-acento:#E9C46A;
}

¿Buscas más combinaciones listas? Genera y ajusta armonías en Adobe Color (rueda cromática, extraer desde imágenes) o explora colecciones curadas en Color Hunt.
color.adobe.com
+2
color.adobe.com
+2

Atajo para reemplazar colores en todo el archivo

En tu editor, selecciona un color (ej. #000000) y pulsa Ctrl + D (o Cmd + D en macOS) varias veces para seleccionar ocurrencias idénticas y reemplazarlas por var(--color-primario), etc. Súper útil para “variable-izar” estilos existentes.

Bonus: modo alternativo con “temas”

Puedes definir un segundo tema y alternarlo con una clase en

o :

/* Tema claro (por defecto) */
:root{
--color-primario:#3A86FF;
--color-fondo:#FFFFFF;
--color-texto:#222222;
--color-acento:#FFBE0B;
}

/* Tema oscuro */
:root.dark{
--color-primario:#22D4FD;
--color-fondo:#0f0f0f;
--color-texto:#F6F6F6;
--color-acento:#5CE1E6;
}

Con JavaScript, alternas document.documentElement.classList.toggle('dark') y todo el sitio cambia de piel.

Checklist rápido

Variables definidas en :root con dos guiones --.

Usas var(--nombre) en los componentes clave (header, botones, fondos, textos).

Compruebas contraste (especialmente texto/botón sobre fondos) y ajustas si hace falta.

Hola David, espero que estés bien

Parece que estás en el camino correcto con el uso de variables CSS para personalizar tu proyecto. La idea de definir variables "globales" en :root es excelente porque te permite cambiar fácilmente el tema de tu sitio simplemente ajustando los valores en un solo lugar.

Aquí tienes un resumen de lo que puedes hacer:

Definir Variables Globales: Como ya lo hiciste, define tus colores y tipografías en :root. Esto facilita el mantenimiento y la actualización del diseño.

:root {
  --color-primario: #22D4FD;
  --color-fondo: #0f0f0f;
  --color-texto: #F6F6F6;
  --color-acento: #FFB703;
  --font-size-base: 16px;
  --font-weight-tit: 600;
}

Cambiar Paletas Rápidamente: Puedes alternar entre diferentes paletas de colores simplemente reemplazando los valores en :root. Esto es útil para probar diferentes estilos visuales.
Usar Atajos para Reemplazar Colores: El atajo Ctrl + D (o Cmd + D en macOS) es muy eficiente para seleccionar y reemplazar múltiples instancias de un color en tu archivo CSS. Esto te ayuda a "variable-izar" estilos existentes rápidamente.

Alternar Temas con JavaScript: Puedes crear un modo oscuro y claro alternando una clase en el elemento <html> o <body>. Con JavaScript, puedes usar document.documentElement.classList.toggle('dark') para cambiar entre temas.

/* Tema claro (por defecto) */
:root {
  --color-primario: #3A86FF;
  --color-fondo: #FFFFFF;
  --color-texto: #222222;
  --color-acento: #FFBE0B;
}

/* Tema oscuro */
:root.dark {
  --color-primario: #22D4FD;
  --color-fondo: #0f0f0f;
  --color-texto: #F6F6F6;
  --color-acento: #5CE1E6;
}

Verificar Contraste: Asegúrate de que el contraste entre el texto y el fondo sea adecuado para garantizar la legibilidad.

Espero que estas ideas te ayuden a avanzar en tu proyecto. ¡Explorar diferentes paletas y temas puede ser muy divertido y enriquecedor para tu aprendizaje!

Espero haber ayudado y buenos estudios!