Incluso la marca puede ser responsiva. Puedes ajustar la presentación de tu sitio web para que coincida con las preferencias del usuario. Pero primero, aquí te mostramos cómo extender el desarrollo de la marca de tu sitio web para incluir el navegador.
Personaliza la interfaz del navegador
Algunos navegadores te permiten sugerir un color de tema en función de la paleta de tu sitio web.
La interfaz del navegador se adapta al color que sugieres. Agrega el color a un elemento meta llamado theme-color en el archivo head de tus páginas.
<meta name="theme-color" content="#00D494">
Puedes actualizar el valor de theme-color con JavaScript. Pero usa este poder con prudencia.
Puede ser abrumador para los usuarios si el esquema de colores de su navegador cambia con demasiada frecuencia.
Piensa en maneras sutiles de ajustar el color del tema. Si los cambios son demasiado molestos, los usuarios se irán molestando.
También puedes especificar un color de tema en un archivo de manifiesto de app web. Este es un archivo JSON con metadatos sobre tu sitio web.
Vínculo al archivo de manifiesto de la 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, enumera tus metadatos usando 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 de inicio, el navegador usará la información de tu archivo de manifiesto para mostrar un acceso directo apropiado.
Cómo proporcionar un modo oscuro
Muchos sistemas operativos permiten que los usuarios especifiquen una preferencia por una paleta de colores claros u oscuros, lo cual es una buena idea para optimizar tu sitio según las preferencias de temas del usuario.
Puedes acceder a esta preferencia en una función multimedia llamada prefers-color-scheme.
@media (prefers-color-scheme: dark) {
// Styles for a dark theme.
}
Especifica los colores del tema con la función multimedia 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 multimedia prefers-color-scheme dentro de SVG.
Si usas un archivo SVG para el ícono de página, se puede ajustar al modo oscuro.
Thomas Steiner escribió sobre prefers-color-scheme en los íconos de página SVG para íconos de modo oscuro.
Temas con propiedades personalizadas
Si usas los mismos valores de color en varios lugares del CSS, podría ser bastante tedioso repetir todos los selectores en 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 las 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 modificar su nombre.
Si actualizas los valores de tus propiedades personalizadas en una consulta de medios prefers-color-scheme, no tendrás que escribir todos los 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 compilar un esquema de colores para ver ejemplos más avanzados de la aplicación de temas con propiedades personalizadas.
Imágenes
Si usas SVG en tu código HTML, también puedes aplicar propiedades personalizadas allí.
svg {
stroke: var(--ink-color);
fill: var(--page-color);
}
Ahora tus iconos cambiarán de color junto con los demás elementos de tu página.
Si deseas disminuir el brillo de tus imágenes fotográficas cuando se muestran en 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 quieras cambiarlas por completo al modo oscuro.
Por ejemplo, tal vez quieras mostrar un mapa con un esquema de colores más oscuro.
Usa el elemento <picture> que contiene un elemento <source> con la consulta de medios prefers-color-scheme.
<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 los formularios. Infórmale al navegador que tu sitio ofrece un modo oscuro y uno claro. De esta manera, el navegador podrá proporcionar el estilo predeterminado apropiado para los formularios.
Agrégalo a tu CSS:
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
También puedes usar HTML. Agrega esto en head de tus documentos:
<meta name="supported-color-schemes" content="light dark">
Usa la propiedad accent-color en CSS para diseñar casillas de verificación, botones de selección y otros campos del formulario.
html {
accent-color: red;
}
Es común que los temas oscuros tengan colores tenues de la marca. Puedes actualizar el valor accent-color para el modo oscuro.
html {
accent-color: red;
}
@media (prefers-color-scheme: dark) {
html {
accent-color: pink;
}
}
Tiene sentido 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 el modo oscuro es solo un ejemplo de cómo adaptar tu sitio para que se ajuste a las preferencias de los usuarios. A continuación, obtendrás información sobre cómo adaptar tu sitio a todo tipo de consideraciones de accesibilidad.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre temas
Para proporcionar colores de tema que afecten el navegador fuera de la página web, utiliza:
<meta> "theme-color"manifest.json, que incluye campos para especificar colores de tema para ajustar el tono del aspecto de la app cuando se abre desde la pantalla principal de un dispositivo móvil.<meta> de "theme-color"<head>, lo que evita destellos de color no deseados.Para conectarte con las preferencias del sistema del usuario de un tema oscuro o claro, usa lo siguiente:
(prefers-color-scheme)Por lo tanto, admites el tema oscuro, pero todas las entradas del formulario tienen el tema claro. ¿Qué puedes hacer?
html { color-scheme: light dark; } a tu CSS.<meta name="supported-color-schemes" content="light dark"> a tu etiqueta HTML <head>.