Page History

...

We cannot use @Theme annotation for third party apps because theme is set on admincentral
We use CSSInject to dynamically load an @import rule which references a CSS stylesheet
- optionally we try to reference a SASS one

Code Block

language	java

@ThemedApp("myapp")
public class MyApp extends ContentApp {

...

Theming is implemented at the AppThemer class that contains methods to apply theme either by explicitly or by annotation
BaseApp will init theming if annotation is present at the App class
Place implementation to the admincentral project and interfaces to the framework project
App container DIV will be added app-%THEMENAME% CSS class
App developer is expected to add the theme as a standard vaadin theme to be found in /VAADIN/themes/%THEMENAME%/styles.css

...

Suggestion box

The magnolia theme application could ultimately switch between expected screenshot and actual fields, to help on browser support
Structure:
- magnolia-ui-admincentral
  - @Theme("admincentral") AdmincentralUI
  - themes/admincentral includes magnolia
- magnolia-ui-vaadin-theme
  - themes/magnolia includes base, commonbase, shellbase
- magnolia-ui-vaadin-theme-sampler
  - @Theme("themesampler") ThemeSamplerUI
  - themes/themesampler includes magnolia
- magnolia-ui-vaadin-widgets-common
  - themes/commonbase
- magnolia-ui-vaadin-widgets-editor
  - themes/pageeditor
- magnolia-ui-vaadin-widgets-shell
  - themes/shellbase
Use CSSInject add-on to support third-party app styles https://vaadin.com/directory#addon/cssinject
- Inserts styles into <head><style>...</
- Can load external stylesheets in this manner: new CSSInject(getUI()).setStyles("@import url('http://theme files/styles.css');");
- Set this at App level, eventually processing it in BaseApp
Enable SASS for STK themes

...