Extjs Sass Theme Gem

Question

Does anyone know some nice values to use with the modulate option for the extjs-theme gem?

https://github.com/extjs/extjs-theme

Answer 1

// Here is my dark theme Don't forget to generate images for that with Sencha sdk tool

$theme-name: 'dark';
$base-color: #1c1c1c;

//panel section
$panel-header-background-gradient: color-stops(#2a2a2a, #191919);
$panel-border-color: #4d4d4d;
$panel-header-color: #888888;
$panel-frame-padding: 0px;
$panel-header-padding: 5px;


$panel-body-color: #888888;
$panel-frame-background-color: #1c1c1c;
$color: #888888;
$form-trigger-border-bottom: none;
$form-trigger-width: 24px;
//window
$window-background-color: #1c1c1c;
$window-header-color: #888888;

//menu
$menu-item-active-background-color: darken(#333333, 5);
$menu-item-active-border-color: #fff;

//datepicker
$datepicker-header-background-color: #333333;
$datepicker-border-color: #4d4d4d;
$datepicker-th-background-color: #404040;
$datepicker-selected-item-background-color: #505050;
$datepicker-item-hover-background-color: transparent;

//progress bar
$progress-border-color: #202020;
$progress-background-color: #f1f1f1;
$progress-bar-background-color: #ababab;

//tips
$tip-base-color: $base-color;
$tip-body-color: #fff;

//grid
$grid-header-color: #fff;
$grid-header-over-border-color: darken($base-color, 3);
$grid-header-background-color: adjust-color($base-color, $hue: 0deg, $saturation: 0%, $lightness: -16.078%) !default;
$grid-header-over-border-color: adjust-color($base-color, $hue: -0.175deg, $saturation: 25.296%, $lightness: -2.549%) !default;

//toolbar
$toolbar-border-color: null;
$toolbar-inner-border-width:0px;
$toolbar-background-gradient: color-stops(#232323, #121212);
$toolbar-separator-color: #686455;
$toolbar-text-color: #888888;

//btn group
$btn-group-background-color: #585858;
$btn-group-header-background-color: #353535;
$btn-group-border-color: #4d4d4d;
$btn-group-header-color: #666;

//form
$fieldset-header-color: #ddd;
$form-field-background-color: #111;
$form-field-color: #828282;
$form-field-border-color: #232323; 
$boundlist-border-color: #b5b8c8;

//acordion
$accordion-header-background-color: #999;

//tabs
$tab-base-color: #303030;
$tab-color-active: #eee;
$tab-color: #ddd;

//pagelet toolbar
$pagelet-background-gradient : color-stops(#d4d4d4,#dddddd);
$pagelet-background-color: #dddddd;

$tab-background-gradient: color-stops(#4d4d4d, #303030);
$tab-background-gradient-over: 'tab-over' !default;
$tab-background-gradient-active: color-stops(#5a5a5a, #303030);
$tab-background-gradient-disabled: 'tab-disabled' !default;

//buttons
$button-inner-border-color : #121212;
$button-default-color: #fff;
$button-default-base-color: #353535;
$button-default-base-color-over: #444444;
$button-default-base-color-focus: $button-default-base-color-over;
$button-default-base-color-pressed: #5f5f5f;
$button-default-base-color-disabled: adjust-color($base-color, $hue: 0deg, $saturation: -55.556%, $lightness: 12.745%) !default; //F7F7F7

$button-default-border-color: #121212;
//$button-default-border-color-over: #9d9d9d;
//$button-default-border-color-focus: $button-default-border-color-over;
//$button-default-border-color-pressed: $button-default-border-color-over;
//$button-default-border-color-disabled: adjust-color($button-default-base-color-disabled, $hue: 0deg, $saturation: 0%, $lightness: -8.627%) !default;

$button-default-background-gradient: color-stops(#444444, #2e2e2e);
$button-default-background-gradient-over: 'matte';
$button-default-background-gradient-focus: 'matte';
$button-default-background-gradient-pressed: color-stops(#444444,#666666);
$button-default-background-gradient-disabled: 'matte';

$button-default-background-gradient-color-stops: color-stops(#444444, #282828);
$button-default-background-gradient-color-stops-over: null;
$button-default-background-gradient-color-stops-focus: null;
$button-default-background-gradient-color-stops-pressed: color-stops(#444444, #666666);
$button-default-background-gradient-color-stops-disabled: null;


$button-toolbar-base-color: $button-default-base-color;
$button-toolbar-color: #ccc;
$button-toolbar-border-color: #131313;
//$button-toolbar-border-color-over: #9d9d9d;
//$button-toolbar-border-color-focus: $button-default-border-color-over;
//$button-toolbar-border-color-pressed: $button-default-border-color-over;
//$button-toolbar-border-color-disabled: adjust-color($button-default-base-color-disabled, $hue: 0deg, $saturation: 0%, $lightness: -8.627%) !default;

$button-toolbar-background-color: #171717;
$button-toolbar-background-color-over: #717171;
$button-toolbar-background-color-focus: #2B6893;
$button-toolbar-background-color-pressed: #444;
$button-toolbar-background-color-disabled: transparent;

$button-toolbar-background-gradient: color-stops(#171717,#1c1c1c);
$button-toolbar-background-gradient-over: color-stops(#1a1a1a,#1c1c1c);
$button-toolbar-background-gradient-focus: color-stops(#171717,#1c1c1c);
$button-toolbar-background-gradient-pressed: color-stops(#242424,#222222);
$button-toolbar-background-gradient-disabled: null;

$button-toolbar-background-gradient-color-stops: null;
$button-toolbar-background-gradient-color-stops-over: null;
$button-toolbar-background-gradient-color-stops-focus: null;
$button-toolbar-background-gradient-color-stops-pressed: null;
$button-toolbar-background-gradient-color-stops-disabled: null;

@import 'compass';
@import 'ext4/default/all';