Page History

...

We use SASS
We cannot specify multiple themes in the @Theme annotation
- But we can add @include SASS rules to use themes as mixins
We start theme again, picking minimal rules from the existing CSS into new SASS stylesheets
- We inherit the base theme
- We start with standard vaadin fields
We ultimately serve on the fly compiled scss only for development
For production we compile SASS statically during the build. Static compilation is done inside the Maven profile 'sass-compile-production'.

2. Project structure and Widgetset

...

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

Create custom annotation @ThemedApp custom annotation @AppTheme to mark assign theme for an App.

Code Block

language	java

@ThemedApp@AppTheme("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 projectAppInstanceController class that checks during an App startup whether the App class is annotated with the AppTheme annotation.
App container DIV will be added "app-%THEMENAME%" CSS class so style selectors can reference App.
App developer is expected to add the theme as a standard vaadin theme to be found in /VAADIN/themes/%THEMENAME%/styles.css

...

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

...