La mayoría de los navegadores web modernos admiten la capacidad de ejecutar sitios web en modo oscuro o claro. Blocs tiene una gama de funciones integradas diseñadas para ayudar en el proceso de agregar compatibilidad con temas oscuros y claros a los sitios que cree.
Cómo funciona
Cuando un Blocs el sitio se ve en un dispositivo que ejecuta el sistema operativo en modo oscuro, la clase tema oscuro se agregará a la etiqueta del cuerpo de la página. Esto es útil ya que facilita el estilo de cualquier elemento usando una clase, específicamente en el modo oscuro.
Por ejemplo, si tiene un botón con una clase aplicada .mi-botón, para darle al botón una apariencia diferente en modo oscuro, todo lo que necesita hacer es agregar una nueva clase usando el Gerente de clase y nombrarlo . tema oscuro .my-botón. Cualquier valor de estilo agregado a esta variación especial de la clase, solo tendrá efecto cuando el sitio se vea en un dispositivo que se ejecute en modo oscuro.
Clases de temas oscuros
Para crear una versión de tema oscuro de cualquier clase, simplemente haga clic derecho en la clase en el Gerente de clase y en el menú contextual seleccione Crear versión de tema oscuro. Esto creará una clase con el nombre correcto para que sus valores de estilo solo tengan efecto cuando el sitio se vea en modo oscuro.
Vista previa del modo oscuro
Si desea obtener una vista previa del estilo de tema oscuro de su sitio, puede simular el modo oscuro del sistema operativo utilizando la opción de modo de sitio oscuro que se encuentra en el configuración de lienzo.
Tenga en cuenta que la opción de lienzo del modo de sitio oscuro también afecta el modo de vista previa en la aplicación, así como el lienzo de diseño principal.
Ejemplo rápido
A continuación se muestra un ejemplo rápido que cubre el proceso de configuración del color de fondo de un Bloc específicamente para el modo oscuro, usando todas las técnicas mencionadas en esta publicación.
