Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Modifying the Sencha Touch Default Theme

Page of 168

Modifying a series of global variables can significantly impact the look and feel of your application. Most of these variables are not documented within Sencha's official API docs, however, they are documented within the source files in which they've been defined.

The most important global variables for theming Sencha Touch applications are defined in /path/to/Touch2/resources/themese/stylesheets/sencha-touch/default/_variables.scss. The variables fall into two broad categories - those that influence the visual aspects of the theme and those that can be used to reduce the overall size of the generated CSS file.

Theming your Application

Configuring the following Sass variables enables you to quickly and radically change the appearance of your application:

Variable Description
$base-color The primary color variable from which most elements derive their color scheme. Defaults to #1985D0
$base-gradient The primary gradient variable from which most elements derive their color scheme. Valid options include bevel, glossy, recessed, and matte (default)
$font-family The font-family to be used throughout the theme. Defaults to "Helvetica Neue"
$alert-color Color used for elements like badges, errors, and "decline" UIs (eg. on buttons). Defaults to "red"
$confirm-color Color used for elements like success messages, and "confirm" UIs (eg. on buttons). Defaults to #92cf00 (green)
$active-color Color used for elements like selected rows, "action" UIs (eg. on buttons) and certain overlays like the picker mask. Defaults to darken(saturate($base-color, 55%), 10%)
$neutral-color Color used for the neutral 'ui' for Toolbars and Tabbars. Defaults to #e0e0e0 (white-gray)
$page-bg-color The background color for fullscreen components. Defaults to #eee (gray-white)
$global-row-height The minimum row height for toolbars. Defaults to 2.6em
$global-list-height The minimum height for list items. Defaults to 46px.

Optimizing the Size of your Generated CSS File

Sencha Touch .CSS files can grow to become quite large, particularly if your application uses a lot of iconography that has been base-64 encoded and folded into the stylesheet. In order to reduce the memory utilization of your application you should take care to configure the following variables as they signficiantly influence the size of your generated CSS.

Variable Description
$include-html-style Booelan. Optionally remove included HTML styles/typography. Defaults to false.
$include-default-icons Boolean. Optionally remove the default icon set. Defaults to true. Should be set to false prior to building a production version of the stylesheet.
$include-form-sliders Boolean. Defaults to true. Decides if default HTML styles are included (for components with styleHtmlContent: true)
$include-floating-panels Boolean. Decides whether or not to include floating panels (useful to disable for iPhone applications which do not typically have floating menus)
$include-default-uis Boolean. Decides whether or not to include the default UIs for all components. Defaults to true.
$include-highlights Boolean. Optionally disable all gradients, text-shadows, and box-shadows. Useful for supporting non-performant browsers. Defaults to true.
$include-border-radius Boolean. Enables/disables rounded corners. Defaults to true.
$basic-slider Boolean. Optionally remove CSS3 effects from the slider component for improved performance. Defaults to false.

The app themed with $base-color and $base-gradient

Putting it all together

The following example illustates how configuring a few global variables can radically alter the appearance of your application.

Note the following:

  • Setting the $base-color variable on line 1 changed the primary app color from light blue to gold.
  • Setting the $base-gradient to glossy on line 2 applied a 3d visual effect to the toolbars, titlebars, and tabbars.
  • Setting the $font-family variable on line 4 changed the font used throughout the app.
  • Setting the $include-default-icons variable and commenting out the unused mixins significantly reduced the size of the generated CSS file.
  • At the bottom of the file, the calls to the pictos-iconmask mixin automatically base-64 encodes the iconography used throughout the app.
$base-color: #da9100;
$base-gradient: glossy;
$include-default-icons: false;
$font-family: 'ChalkboardSE-Regular';

@import 'sencha-touch/default/all';

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
// @include sencha-list-paging;
// @include sencha-list-pullrefresh;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;
// @include sencha-draw;
// @include sencha-charts;

// Your custom code goes here...
@include pictos-iconmask('user_add');
@include pictos-iconmask('user_list');
@include pictos-iconmask('team1');
@include pictos-iconmask('phone_ring1');
@include pictos-iconmask('search');
@include pictos-iconmask('tv');
@include pictos-iconmask('mail');
@include pictos-iconmask('phone1');
@include pictos-iconmask('info');

#beerintro img {
  float: right;
  border-radius: 5px;
  margin-left: 5px;
}

Page of 168
comments powered by Disqus