Generate your Custom Theme

This guide will show you how you can customize your defined theme in GMD using gwt-material-themes project.

Step 1

Clone the project https://github.com/GwtMaterialDesign/gwt-material-themes.

Step 2

Navigate to gwt-material-themes/src/main/sass/variables, here you will see all predefined sass variables. Here are the SASS file that needs to define your custom theme variable values.

1. _variables.scss - this sass file contains all styles on GMD core widgets
2. _override-variables.scss - this sass file contains all styles on GMD override styles on widgets
3. _addins-variables.scss - this sass file contains all styles on GMD addins widgets
4. _incubator-variables.scss - this sass file contains all styles on GMD incubator widgets

Step 3

Choose any of the four variables you want to change the variable style properties, i.e You want to change the primary color then navigate to _variable.scss.

$primary-color: color("blue", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;

So on this you can change the following if you want to change your primary color to red for example. See the code below:

$primary-color: color("red", "") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default; 

Step 4

After you setup the variable scss file, next thing you should do is to install the project with profile generateTheme enabled. See the maven command below

mvn clean install -P generateTheme

Step 5

Wait until the installation is finished, then after go to gwt-material-themes/src/main/sass/_generated directory and voila you have now the generated style name with red as your primary color. The materialize.css and materialize.min.css can be copied and injected to your GMD application.