← Todos los artículos

Tutoriales

Crea un modo oscuro universal con CSS

17 mayo 2026 · por JustZix Team

La mayoría de los sitios todavía vienen con un fondo blanco cegador, y no todos ofrecen un tema oscuro. Con JustZix puedes adjuntar una regla CSS a cualquier URL y forzar un modo oscuro que te siga a todas partes. Estas son las recetas que realmente uso.

El modo oscuro más rápido: invertir la página

El truco más rápido es invertir todo el documento y rotar el tono de vuelta para que los colores se mantengan más o menos correctos. Las fotos y los vídeos también se invierten, así que esos los rotamos de vuelta una segunda vez.

html {
  filter: invert(1) hue-rotate(180deg);
  background: #fff;
}
img, video, picture, canvas, iframe, svg,
[style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

Esto es una victoria de una sola línea. No es perfecto — las sombras se ven raras y los colores de marca se desplazan — pero para una sesión de lectura rápida es insuperable. Crea una regla CSS de JustZix, asígnala al dominio que quieras, pega, listo.

Un modo oscuro nativo más limpio

Para los sitios que visitas a diario, un tema ajustado a mano supera a la inversión. En lugar de invertir, repintas los fondos y el texto directamente. Esto deja intactas las imágenes y los colores de acento.

:root {
  --bg: #16181c;
  --bg-soft: #1f232a;
  --text: #d6d9de;
}
html, body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
header, footer, nav, aside, section, article, main,
.card, .panel, .box {
  background-color: var(--bg-soft) !important;
  color: var(--text) !important;
}
a { color: #6ea8fe !important; }

Los selectores son intencionadamente amplios. Rara vez necesitarás ser preciso — la mayoría de las maquetaciones usan un puñado de etiquetas estructurales y nombres de clase genéricos. Ajusta las variables una vez y toda la página las sigue.

Arregla los restos brillantes

Tras el tema base, unos pocos elementos siguen blancos: campos de entrada, bloques de código, tablas. Recógelos en una sola regla.

input, textarea, select, button,
pre, code, table, th, td {
  background-color: #20242b !important;
  color: #d6d9de !important;
  border-color: #2f343d !important;
}
::placeholder { color: #6b7280 !important; }
::selection { background: #3b4252; color: #fff; }

Solo de noche

Si solo quieres modo oscuro después del atardecer, envuelve la regla en una media query para que respete el horario de tu sistema operativo.

@media (prefers-color-scheme: dark) {
  html, body { background-color: #16181c !important; color: #d6d9de !important; }
}

Consejos que ahorran tiempo

• Añade siempre !important — las hojas de estilo del sitio cargan después de la tuya y anularán las reglas simples.
• Empieza con el truco de invertir y luego pasa a un tema nativo para tus cinco sitios principales.
• Mantén un bloque compartido de variables :root para que cada sitio use la misma paleta.
• Prueba las barras de desplazamiento y los colores de selección — son fáciles de olvidar y rompen el ambiente.

¿Quieres más puntos de partida? Explora nuestros ejemplos listos para usar o lee el artículo complementario sobre colores de acento personalizados. ¿Eres nuevo aquí? Descarga JustZix y pega tu primera regla en menos de un minuto.