We've covered all of the parts of this application apart from one: the way it looks. Cast your mind back to the screenshot of the app in action earlier in the chapter. In fact, have a look at the login screen to see how it differs from a standard Ext JS app:

We've changed key things such as the font and color of the window frame, but take a look at the code to perform this:

// sass/etc/all.scss
$body-font-family: 'Roboto', sans-serif;
$window-base-color: #fff;
$window-header-color: #000;
$window-padding: 20px;
$window-header-font-family: $body-font-family;
$toolbar-footer-background-color: #fff;
$form-label-font-family: $body-font-family;

Ext JS themes provide an extensive range of variables designated by the dollar sign in front of them. By defining our own, such as $body-font-family, and overriding existing ones, we can easily shape the look of our application to suit different requirements.

Not only this, but from a maintenance point of view, it's far preferable to set...