View Full Version : Difficulty setting $active-color (for active list elements) in sass theme

2 Dec 2010, 1:28 PM
I've been working on a simple custom theme using the sass/compass theming process (http://www.sencha.com/forum/showthread.php?115192-Sencha-Touch-theming-guidelines&highlight=active-color), and I'm running into difficulty setting the color of active list elements. As far as I can tell this is set via the $active-color variable, but I don't seem to be able to override it. Here's my scss file:

// import the framework and base components
@import 'sencha-touch/default/all';

// Trying to set variables here
$base-color: #333333;
$active-color: #DDDDDD;
$base-gradient: 'glossy';

// Include sencha styles
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;

The $base-color variable is being applied correctly, giving me dark gray toolbars and buttons. But the list items in my application are still bright blue. I can't find any instances of #DDDDDD at all in the compiled css file.

I would appreciate any insight or help! I'm using sencha-touch 1.0

2 Dec 2010, 2:50 PM
you can set the color over following two variables

$list-pressed-color: #dcdcdc;
$list-active-color: #dcdcdc;

2 Dec 2010, 4:47 PM
Thanks, that worked!