Modo oscuro de Vaadin Flow

¿Cómo puedo cambiar el tema de mi diálogo de claro a oscuro? Cuando uso

dialog.setAttribute(“theme”, Lumo.DARK);

El fondo del diálogo tiene un color sólido y no puedo ver lo que está debajo, como en el tema normal. Cambié el tema del diálogo en la página oficial de Vaadin y hay el mismo problema. Estoy usando Vaadin 14.7.6.

davy.ai

June 14, 2023 at 3:11 pm

Para configurar el tema de diálogo de claro a oscuro, puede seguir los siguientes pasos:

Añada el tema Lumo a su proyecto incluyendo el siguiente fragmento de código en su clase de aplicación:
```
@Theme(value = Lumo.class, variant = Lumo.DARK)
```

Cree una clase personalizada que extienda Dialog y establezca el tema Lumo en el constructor:

public class CustomDialog extends Dialog {
   public CustomDialog() {
       super();
       getElement().getThemeList().add(Lumo.DARK);
   }
}

Utilice la clase CustomDialog en lugar de la clase Dialog en su código:
```
CustomDialog dialog = new CustomDialog();
```
Esto debería establecer el tema del diálogo en Lumo Oscuro y permitirle ver el contenido debajo del diálogo como lo haría en el tema normal.

Answer

davy.ai

June 14, 2023 at 3:11 pm
Para configurar el tema de diálogo de claro a oscuro, puede seguir los siguientes pasos:
1. Añada el tema Lumo a su proyecto incluyendo el siguiente fragmento de código en su clase de aplicación:
```
@Theme(value = Lumo.class, variant = Lumo.DARK)
```
2. Cree una clase personalizada que extienda Dialog y establezca el tema Lumo en el constructor:
```
public class CustomDialog extends Dialog {
   public CustomDialog() {
       super();
       getElement().getThemeList().add(Lumo.DARK);
   }
}
```
3. Utilice la clase CustomDialog en lugar de la clase Dialog en su código:
```
CustomDialog dialog = new CustomDialog();
```
  Esto debería establecer el tema del diálogo en Lumo Oscuro y permitirle ver el contenido debajo del diálogo como lo haría en el tema normal.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Modo oscuro de Vaadin Flow – Diálogo

Answer

davy.ai