Can't get themes working

Flow
1

Sorry me, I am new to Vaadin, and I can’t get
mytheme/styles.css
 working.
In other words, what is documented on
https://vaadin.com/book/-/page/themes.creating.html
 did not work for me.

I use Vaadin 7.0.0.beta11, built from Maven archetype like the following:

mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.0.0.beta11 -DgroupId=at.workflow.webdesk -DartifactId=vaadin -Dversion=1.0 -Dpackaging=war
mvn package eclipse:eclipse

Then I created a
VAADIN/themes/mytheme
 folder and put following
styles.css
 into:

@import "../base/styles.css";

.v-label {
    background: cyan;
}

I used the @Theme annotation to set mytheme. Here is my UI Java class:

@Theme("mytheme")
public class MyVaadinUI extends UI
{
    @Override
    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);
        
        Button button = new Button("Click Me ...");
        button.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                layout.addComponent(new Label("Thank you for clicking"));
            }
        });
        layout.addComponent(button);
    }
}

All done like documented in the tutorial mentioned above.

The I did a

mvn jetty:run in the project’s base directory and entered http://localhost:8080 in my web browser.


Result: the UI looks completely unstyled!


Expected was: the UI has all inherited
base
 styles, just the label is cyan.

Even when I leave out the
.v-label { background: cyan; }
CSS statement, the UI is completely unstyled,
the @import directive seems to not work!

Replacing the import with
@import “…/reindeer/styles.css”
 did not help either.

I try to explain
“unstyled”
 by words:

  • The button “Click Me …” has no button border, does not look/behave like a button at all, both button and labels extend from left to right browser edge, neither has insets or margins. The cyan color proves that the @Theme was processed. A CSS check with browser debugger shows that none of the
    base
     CSS properties arrived in HTML code.
  • When
    not
     using
    mytheme
    , the button has a rounded border, looks like a button, and does not extend from left to right browser edge. Of course labels are not cyan.

So here is my question:
what have I done wrong?

First screenshots uses “mytheme” (shows as it looks), second has no explicit theme (shows as it should look).
_
12714.png
12715.png

2

Hello, have you tried extending from Reindeer or Runo themes? Base theme is “lower level” theme which Reindeer and Runo are based upon. Default theme in your screenshot is the Reindeer which is used when no @Theme is specified. Try inheriting from Reindeer for instance and see if only changes you apply for the color are effected.

3

In a CSS theme, you need to import …/base/legacy-styles.css rather than styles.css. See
this page
 about creating SCSS themes, which also mentions legacy-styles.css .

4

I’ve tried to inherit from reindeer, that is what I initially wanted and still is the target, but it does not work.

5

I’ve tried to inherit from legayc-styles now:

@import "../base/legacy-styles.css";

.v-label {
    background: cyan;
}

Looks better now, see screenshot, but target is to inherit from reindeer (to get as much prepared CSS as possible).

_
12716.png

6

OK, now it seems to work,.
When I do both it looks good, see screenshot.
Thanks a lot!

@import "../reindeer/legacy-styles.css";

.v-label {
    background: cyan;
}

_
12717.png