> Markdown version of [Creating A Reusable Vaadin Theme In Eclipse](https://vaadin.com/docs/v7/framework/articles/CreatingAReusableVaadinThemeInEclipse). Section index: [llms.txt](https://vaadin.com/docs/v7/framework/llms.txt)

# <a id="creating-a-reusable-vaadin-theme-in-eclipse"></a>Creating a reusable Vaadin theme in Eclipse

This tutorial teaches you how to create a standalone Vaadin theme that can be reused in other Vaadin projects as an add-on.

**Requirements:**

- [Eclipse IDE for Java EE developers](https://www.eclipse.org/downloads/)

- [Vaadin plug-in for Eclipse](https://vaadin.com/eclipse/)

### <a id="create-a-project-for-your-theme"></a>Create a project for your theme

Create a new Java project.

[Image: Create a new Java project]

[Download a Vaadin JAR](https://vaadin.com/download) and add it to your project’s build path.

[Image: Add Vaadin to build path]

In the src folder, create a class for your theme:

```java
package com.example.mytheme;

import com.vaadin.ui.themes.BaseTheme;

public class MyTheme extends BaseTheme {
  public static final String THEME_NAME = "my-theme";
}
```

This makes your theme extend Vaadin’s [BaseTheme](https://vaadin.com/api/com/vaadin/ui/themes/BaseTheme.html), which will let you fully customize your theme from scratch. On the other hand, if you don’t have very specific theming needs and just want good-looking results quickly, try extending [ChameleonTheme](https://vaadin.com/api/com/vaadin/ui/themes/ChameleonTheme.html) instead. In any case, both of these themes are designed for extension and therefore your best choices to start with.

In the root of your project, create the following folder and files:

- META-INF

  - MANIFEST.MF

- VAADIN

  - themes

    - my-theme

      - addons.scss

      - my-theme.scss

      - styles.scss

The MANIFEST.MF file should contain the following:

```
Manifest-Version: 1.0
Implementation-Title: My Theme
Implementation-Version: 1.0.0
Vaadin-Package-Version: 1
Class-Path:
```

Your `Implementation-Title` and `Implementation-Version` should reflect how you want your theme to be visible in the [Vaadin directory](https://vaadin.com/directory).

### <a id="create-a-demo-app-for-your-theme"></a>Create a demo app for your theme

Create a new Vaadin project.

[Image: Create a new Vaadin project]

[Image: Create a new Vaadin project 2]

Add your **theme** project to your **demo** project’s Java build path.

[Image: Add theme to build path]

Add your **theme** project to your **demo** project’s *deployment assembly*. This will automatically convert your theme project to a Java EE Utility project.

[Image: Add theme to Deployment Assembly]

Now that your theme project is a Java EE Utility project, it will also have a deployment assembly. Add your **theme project**’s VAADIN folder to there and make sure you specify its deploy path as `VAADIN`.

[Image: Add theme to Deployment Assembly 2]

In your **demo** application class, add the following line to your `init()` method:

```java
setTheme(MyTheme.THEME_NAME);
```

To try if it works, right-click on your **demo** project and choose *Run As > Run on Server*.

### <a id="develop-your-theme"></a>Develop your theme

Create a new style name constant in your theme class for each new CSS class name you add to your stylesheets. These can then be passed to the `Component.addStyleName(String)` method. This will make it easier for other developers to use your theme!

Changes to your stylesheets will be visible in your demo app almost instantly. All you need to do is save the file, wait for the server to automatically pick up the changes, then refresh your browser.

### <a id="export-your-theme-as-a-vaadin-add-on"></a>Export your theme as a Vaadin add-on

Right-click on your **theme** project, choose *Export… > Java > Jar file* and make sure your settings match those in the following two images.

[Image: Export as JAR]

[Image: Export as JAR 2]

Finally, upload your theme add-on Jar to the [Vaadin directory](https://vaadin.com/directory)!