Tecnología

Cómo configurar un tema de modo oscuro para su sitio web – CloudSavvy IT

Cómo configurar un tema de modo oscuro para su sitio web - CloudSavvy IT

Chrome 76 agregó soporte para prefers-color-scheme Consulta de medios CSS, que permite que los sitios web le pregunten a su sistema operativo qué esquema de color prefiere para que puedan tematizarse adecuadamente. A continuación, le indicamos cómo configurarlo para su sitio web.

¿Qué navegadores admiten temas oscuros?

En el momento de escribir este artículo, la mayoría de los principales navegadores admiten el modo oscuro, aunque algunos navegadores aún no se han actualizado para admitirlo. Puede comprobar el estado actual en caniuse.com, que genera una tabla de soporte para diferentes navegadores:

Como de costumbre, IE 11 no recibe ninguna actualización y el 2% de Internet que todavía está bloqueado no podrá utilizarlo. Pero, es probable que esas personas no estén en Windows 10, por lo que no verían ningún uso de todos modos sin un tema oscuro para alternar.

Afortunadamente, usando prefers-color-scheme no romperá su CSS, ya que es un parámetro opcional.

Cómo utilizar la compatibilidad con el esquema de colores CSS

Para usar realmente prefers-color-scheme en su CSS, lo usaría como una consulta de medios opcional, de la misma manera que lo haría para el diseño receptivo. Por ejemplo, si su valor predeterminado es fondo blanco con texto negro, puede usar la consulta de medios para cambiar a fondo negro y texto blanco.

body {
  background-color: #fff;
  color:#000;
}

@media (prefers-color-scheme: dark) {
  background-color: #000;
  color:#fff;
}

Puede combinar esto con cualquier otra técnica que esté utilizando; por ejemplo, solo podría permitir el modo oscuro en dispositivos móviles si lo combina con una consulta de medios receptiva para el tamaño de la pantalla.

Configurar un tema oscuro con variables CSS

Las variables CSS son una incorporación bastante nueva con apoyo generalizado. Quizás sean la forma más fácil de crear un tema oscuro junto con prefers-color-scheme. En lugar de definir los valores de color manualmente, así:

body {
  background-color: #fff;
}

p {
  color: #000;
}

En su lugar, crea un :root bloque que se aplicará en todas partes. Puede definir variables aquí utilizando el guión doble (--) seguido del nombre de la variable. Luego, siempre que necesite definir un valor, use el nombre de la variable dentro del var() función en su lugar:

:root {
  --primary: #000;
  --background: #fff;
}

body {
  background-color: var(--background);
}

p {
  color: var(--primary);
}

Este método tiene la maravillosa ventaja de poder cambiar esas variables y hacer que los cambios se reflejen en todas partes. Justo debajo del :root bloque, agreguemos otro dentro del prefers-color-scheme consulta de medios:

:root {
  --primary: #000;
  --background: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #ddd;
    --background: #222
  }
}

body {
  background-color: var(--background);
}

p {
  color: var(--primary);
}

Esto restablece las variables a los valores oscuros si el navegador detecta que el usuario prefiere un esquema oscuro. Puede administrar estas dos paletas de colores y modificarlas fácilmente con solo cambiar las variables.

Además, si necesita CSS adicional para el tema oscuro, puede colocarlo en otro prefers-color-scheme consulta, aunque es probable que desees colocar esa debajo del resto del CSS para que tenga prioridad, o use la !important bandera.

Respaldo para IE 11

IE 11 no es compatible con esto (obviamente). Si deseas proporcionar compatibilidad con IE 11, puede utilizar el método antiguo de duplicar sus propiedades:

p {
 color: #000;
 color: var(--primary);
}

De esta manera, IE 11 solo procesará el primero y verá el otro como CSS no válido. Los temas oscuros no funcionarán, pero de todos modos no lo harían ya que no hay soporte para la consulta de medios.

Además, si no desea utilizar variables CSS en absoluto, puede cambiar el estilo de su sitio por completo dentro del prefers-color-scheme consulta, pero eso es torpe y desperdicia espacio. Si debe admitir todos los navegadores existentes, utilice la alternativa de doble propiedad.

Leave a Comment

You may also like

Más