Extjs Sass Thème Gem

Question

Est-ce que quelqu'un connaît quelques bonnes valeurs à utiliser avec l'option modulate pour la gem extjs-theme?

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

Answer 1

// Voici mon thème sombre Ne pas oublier de générer des images pour que, avec Sencha outil sdk

$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';