How to theme vaadin flow 14 menubar?

Flow
1

How to theme vaadin flow 14 menubar?

2

This page on the docs is about the topic: https://vaadin.com/docs/v14/flow/theme/tutorial-theming-overlay.html

3

Olli Tietäväinen:
This page on the docs is about the topic: https://vaadin.com/docs/v14/flow/theme/tutorial-theming-overlay.html

Specially changing the text color of the MenuItem?

4

A theme module for the overlay could look like this:

:host([theme~="custom-theme-variant"]
) [part~="overlay"]

{
    color: green;
}

In order to take it into use you’ll need to use @CssImport to include it:

@CssImport(value = "./styles/custom-overlay-theme.css", themeFor = "vaadin-*-overlay")

and set a theme attribute to match the one in the selector:

        MenuBar menuBar = new MenuBar();
        MenuItem someItem = menuBar.addItem("Some text");
        someItem.getSubMenu().addItem("Subitem");
        menuBar.setThemeName("custom-theme-variant");
5

Thanks a lot!
Works like a charm!