So say you have a beautiful GWT application that uses GSS. Smart developer that you are, you did this using a theme file to easily manage your variables, in order to speed up your coding and ensure visual consistency across your screens. Now it's time to automate things with GWT Theo!

GWT Theo is my adaptation of the powerful Theo set of Gulp plugins to automate theme creation. It has been stripped down a lot and tweaked to meet the specifics requirement of GWT. It will create your Java classes for each set of variables (fonts, colors, sizes, …) and your unique theme file, regrouping all those elements. It will also generate a style guide based on your variables for quick reference . Last but not least, it will facilitate custom icon integration (currently only supporting icon sets from Icomoon).

There's a repository with a working project available on Github and a live application just here. Have a look at the style guide, you will fall in love! This blog post walks you through how to use GWT Theo.

Importing GWT Theo to your project

Let's start by cloning the GWT Theo repository at the root of your application (at the same level of your src repository).

git clone https://github.com/ArcBees/gwt-theo.git

You will then need to update the gulpfile.js in order to match your application's paths. On Arcbees' website, it would look like this :

View the code on Gist.

Once it's done, you can give it a try and run gulp in your terminal in the GWT Theo folder. You will need Gulp installed on your computer. Default files should be generated inside folders specified in your gulpfile.js . The default Colors.java file will look like this :

View the code on Gist.

Using the generated theme file

Once your files have been generated, you can bind the theme with your GSS files. All you need to do is to locate a GSS file you'd like to power-up with your theme, making it possible to use your custom variables inside of it, and providing the theme.gss in it's source.

In my case, my source declaration for my style.gss file is in my AppResources.java file. Don't forget to require the theme in your GSS file, and that's it! You can now use all of your variables :

View the code on Gist.

Custom variables

By default, GWT Theo comes with 3 files for variables : colors, fonts and sizes, located inside the theme-properties folder. You can add more, of course, or remove anything that you won't need. Variables are declared in a JSON file with a default structure looking like this :

View the code on Gist.

global [object] : Definition for this set of variables type [string] : The variable type (this will influence the layout of the style guide) color [option for type] : Used for colors size [option for type] : Used for string variables category [string] : Defines the category, and creates a section in the style guide classname [string] : The class name for the file that will be generated from this set of variables title [string] : ?

: Definition for this set of variables props : Definition of your variables title-* [object, optional] : Everything starting with "title-" will be converted into a title in the style guide. Must be unique ("title-foo", "title-bar"). value [string] : Your title * [object] : The name of your variable value [string] : The value of the defined variable comment [string, optional] : For variable of size type, a comment about that variable

: Definition of your variables

Adding or removing a set of variables

Variables files are loaded from the theme.json file. You can remove or add a new set from here.

Custom icons

Using custom icons in your application is fun, but can be a real pain with GWT. You need to declare a lot of stuff in order to make it work. GWT Theo can help you with that, but it currently supports only one way of doing it.

Generating everything

Select icons from Icomoon. These can be predefined icons from various packs available on Icomoon, or you can create your own by uploading svg files. Once you have made your choices, generate your font (bottom right). Before downloading the package, open the Preferences (top left) and : Rename the font name to "icons" Rename the class prefix to "icon_" Download the package. Extract it. Inside of your GWT Theo folder, create an theme-files folder and paste your extracted icons folder into it. Now, inside