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 a few variables than it's to write a swathe of CSS rules to override theme style sheets. We can avoid problems like CSS precedence and finding the correct selectors to use and get on with making our app stand out. However, if we need to, we can drop down to use SASS, the CSS-like compiler that Ext JS uses for theming. Take a look at the styling for the thread view:

// sass/src/view/threads/Threads.scss
.thread-view {
   font-family: $body-font-family;
   margin: $gutters;

   .x-view-item-focused {
          outline: 0 !important;

         .header {
               color: rgb(255, 20, 108);
         }
   }

   .header {
         font-size: 125%;
   }

   .body {
         font-size: 105%;
         color: #666;
         padding: 10px 0;
         line-height: 160%;
   }

   .date {
         color: $subdued-grey;
         font-size: 150%;
         padding: 0 15px;
         font-weight: bold
   }
}

.thread {
   display: flex;
   padding: 50px;

   &:hover {
          cursor: pointer;
   }

   .details {
          border-bottom: 1px solid $subdued-grey;
   }

   &:last-child .details {
          border-bottom: 0 !important;
   }

   .date {
          width: 80px;
          text-align: right;
   }
    .details {
          flex: 1;
   }
}

The thread view is a DataView, meaning its template can contain any custom HTML. Writing new SASS rules makes sense here, but Ext JS allows you to do this in a modular and reusable way, similar to the features it provides to write JavaScript classes. In the next few chapters, we'll discuss this and other features of theming in more depth.