123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- ---
- title: Creating a Theme in Eclipse
- order: 6
- layout: page
- ---
-
- [[themes.eclipse]]
- = Creating a Theme in Eclipse
-
- The Eclipse plugin automatically creates a theme stub for new Vaadin projects.
- It also includes a wizard for creating new custom themes. Do the following steps
- to create a new theme.
-
- . Select "File > New > Other..." in the main menu or right-click the
- [guilabel]#Project Explorer# and select "New > Other...". A window will open.
-
- . In the [guilabel]#Select a wizard# step, select the "Vaadin > Vaadin Theme"
- wizard.
-
- +
- image::img/eclipse-theme-new.png[]
-
- +
- Click [guibutton]#Next# to proceed to the next step.
-
- . In the [guilabel]#Create a new Vaadin theme# step, you have the following
- settings:
-
- [guilabel]#Project#(mandatory):: The project in which the theme should be created.
-
- [guilabel]#Theme name#(mandatory):: The theme name is used as the name of the theme folder and in a CSS tag
- (prefixed with " [literal]#++v-theme-++#"), so it must be a proper identifier.
- Only latin alphanumerics, underscore, and minus sign are allowed.
-
- [guilabel]#Modify application classes to use theme#(optional):: The setting allows the wizard to write a code statement that enables the theme
- in the constructor of the selected application (UI) class(es). If you need to
- control the theme with dynamic logic, you can leave the setting unchecked or
- change the generated line later.
-
-
-
- +
- image::img/eclipse-theme-settings.png[]
-
- +
- Click [guibutton]#Finish# to create the theme.
-
-
- The wizard creates the theme folder under the
- [filename]#WebContent/VAADIN/themes# folder and the actual style sheet as
- [filename]#mytheme.scss# and [filename]#styles.scss# files, as illustrated in
- <<figure.eclipse.theme.created>>.
-
- [[figure.eclipse.theme.created]]
- .Newly Created Theme
- image::img/eclipse-theme-created-annotated-hi.png[]
-
- The created theme extends a built-in base theme with an [literal]#++@import++#
- statement. See the explanation of theme inheritance in
- <<dummy/../../../framework/themes/themes-creating#themes.creating,"Creating and
- Using Themes">>. Notice that the [filename]#reindeer# theme is not located in
- the [filename]#widgetsets# folder, but in the Vaadin JAR. See
- <<dummy/../../../framework/themes/themes-creating#themes.creating.builtin,"Built-in
- Themes">> for information for serving the built-in themes.
-
- If you selected a UI class or classes in the [guilabel]#Modify application
- classes to use theme# in the theme wizard, the wizard will add the
- [literal]#++@Theme++# annotation to the UI class.
-
- If you later rename the theme in Eclipse, notice that changing the name of the
- folder will not automatically change the [literal]#++@Theme++# annotation. You
- need to change such references to theme names in the calls manually.
-
-
|