Temas

Incluso la marca puede ser responsiva. Puedes ajustar la presentación de tu sitio web para que coincida con la preferencia del usuario. Pero, primero, te mostramos cómo extender la marca de tu sitio web para incluir el navegador.

Personaliza la interfaz del navegador

Algunos navegadores te permiten sugerir un color de tema según la paleta de tu sitio web. La interfaz del navegador se adapta al color que sugieres. Agrega el color en un elemento meta llamado theme-color en el head de tus páginas.

<meta name="theme-color" content="#00D494">

Puedes actualizar el valor de theme-color con JavaScript. Pero usa esta función con prudencia. Puede ser abrumador para los usuarios si el esquema de colores de su navegador cambia con demasiada frecuencia. Piensa en formas sutiles de ajustar el color del tema. Si los cambios son demasiado bruscos, los usuarios se irán molestos.

También puedes especificar un color de tema en un archivo de manifiesto de la app web. Este es un archivo JSON con metadatos sobre tu sitio web.

Vincula el archivo de manifiesto desde el head de tus documentos. Usa un elemento link con un valor rel de manifest.

<link rel="manifest" href="/manifest.json">

En el archivo de manifiesto, incluye tus metadatos con pares clave-valor.

{
  "short_name": "Clearleft",
  "name": "Clearleft design agency",
  "start_url": "/",
  "background_color": "#00D494",
  "theme_color": "#00D494",
  "display": "standalone"
}

Si un visitante decide agregar tu sitio web a su pantalla principal, el navegador usará la información de tu archivo de manifiesto para mostrar un acceso directo adecuado.

Proporciona un modo oscuro

Muchos sistemas operativos permiten que los usuarios especifiquen una preferencia por una paleta de colores claros u oscuros, lo que es una buena idea para optimizar tu sitio según las preferencias de tema del usuario. Puedes acceder a esta preferencia en una función de medios llamada prefers-color-scheme.

@media (prefers-color-scheme: dark) {
  // Styles for a dark theme.
}

Especifica los colores del tema con la función de medios prefers-color-scheme dentro del elemento meta.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

También puedes usar la función de medios prefers-color-scheme dentro de SVG. Si usas un archivo SVG para tu favicon, se puede ajustar para el modo oscuro. Thomas Steiner escribió sobre prefers-color-scheme en favicons SVG para íconos del modo oscuro.

Temas con propiedades personalizadas

Si usas los mismos valores de color en varios lugares de tu CSS, puede ser bastante tedioso repetir todos tus selectores dentro de una consulta de medios prefers-color-scheme.

body {
  background-color: white;
  color: black;
}
input {
  background-color: white;
  color: black;
  border-color: black;
}
button {
  background-color: black;
  color: white;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
  input {
    background-color: black;
    color: white;
    border-color: white;
  }
  button {
    background-color: white;
    color: black;
  }
}

Usa propiedades personalizadas de CSS para almacenar tus valores de color. Las propiedades personalizadas funcionan como variables en un lenguaje de programación. Puedes actualizar el valor de una variable sin actualizar su nombre.

Si actualizas los valores de tus propiedades personalizadas dentro de una consulta de medios prefers-color-scheme, no tendrás que escribir todos tus selectores dos veces.

html {
  --page-color: white;
  --ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html {
    --page-color: black;
    --ink-color: white;
  }
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}
input {
  background-color: var(--page-color);
  color: var(--ink-color);
  border-color: var(--ink-color);
}
button {
  background-color: var(--ink-color);
  color: var(--page-color);
}

Consulta cómo crear un esquema de colores para obtener ejemplos más avanzados de temas con propiedades personalizadas.

Imágenes

Si usas archivos SVG en tu HTML, también puedes aplicar propiedades personalizadas allí.

svg {
  stroke: var(--ink-color);
  fill: var(--page-color);
}

Ahora, tus íconos cambiarán de color junto con los demás elementos de tu página.

Si quieres reducir el brillo de tus imágenes fotográficas cuando se muestran en el modo oscuro, puedes aplicar un filtro en CSS.

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

En el caso de algunas imágenes, es posible que desees reemplazarlas por completo en el modo oscuro. Por ejemplo, es posible que desees mostrar un mapa con un esquema de colores más oscuros. Usa el <picture> elemento que contiene un <source> elemento con la prefers-color-scheme consulta de medios.

<picture>
  <source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
  <img src="lightimage.png" alt="A description of the image.">
</picture>

Formularios

Los navegadores proporcionan una paleta de colores predeterminada para los campos de formulario. Informa al navegador que tu sitio ofrece un modo oscuro y uno claro. De esa manera, el navegador puede proporcionar el estilo predeterminado adecuado para los formularios.

Agrega lo siguiente a tu CSS:

html {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

También puedes usar HTML. Agrega lo siguiente en el head de tus documentos:

<meta name="supported-color-schemes" content="light dark">

Usa la propiedad accent-color en CSS para aplicar estilo a las casillas de verificación, los botones de selección y algunos otros campos de formulario.

html {
  accent-color: red;
}

Es común que los temas oscuros tengan colores de marca tenues. Puedes actualizar el valor accent-color para el modo oscuro.

html {
  accent-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    accent-color: pink;
  }
}

Es conveniente usar una propiedad personalizada para esto, de modo que puedas mantener todas tus declaraciones de color en un solo lugar.

html {
  color-scheme: light;
  --page-color: white;
  --ink-color: black;
  --highlight-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    --page-color: black;
    --ink-color: white;
    --highlight-color: pink;
  }
}
html {
  accent-color: var(--highlight-color);
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}

Proporcionar un modo oscuro es solo un ejemplo de cómo adaptar tu sitio para que se ajuste a las preferencias del usuario. A continuación, aprenderás a hacer que tu sitio se adapte a todo tipo de consideraciones de accesibilidad.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre temas