vaadin-framework/documentation/themes/themes-eclipse.asciidoc

---
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
<<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
<<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.