View Full Version : Sencha Themer custom variables

22 Nov 2016, 11:33 AM
Hi there,

Is there anyway to support creating custom variables from themer, so they can be used when creating new UIs?

23 Nov 2016, 1:10 PM
Not at this time, but something we may look at in the future. If possible, can you provide a description of your particular use-case? Understanding more of how customers would utilize custom variables in Themer would help guide us better. :)

For instance, what would be the advantage to using custom variables with UIs in Themer? If it's re-use, does the color palette solve this for you (adding colors for re-use to your palette, then using them when creating/modifying UIs), are there other types of variables you'd want to see for re-use?

Also, what would you imagine the interaction to look like? A place to define all of your custom variables, then a way to apply them throughout Themer?

23 Nov 2016, 1:20 PM
Hi Dan!

We have many custom UIs for each Ext component that use different colors.


$custom-ui-theme--neutral-color-100 : white;
$custom-ui-theme--neutral-color-200 : gray;
$custom-ui-theme--neutral-color-300 : black;
$custom-ui-theme-accent-color: orange;

I want to be able to use these colors with custom UIs in Sencha Themer..

@include extjs-toolbar-ui(
$ui: "theme-ui-toolbar-neutral-100",
$background-color: $custom-ui-theme--neutral-color-100
$border-color: $custom-ui-theme--neutral-color-100

@include extjs-toolbar-ui(
$ui: "theme-ui-toolbar-neutral-200",
$background-color: $custom-ui-theme--neutral-color-200,
$border-color: $custom-ui-theme--neutral-color-200

@include extjs-toolbar-ui(
$ui: "theme-ui-toolbar-accent",
$background-color: $custom-ui-theme-accent-color,
$border-color: $custom-ui-theme-accent-color


Our global variables are placed in etc\all.scss

It would be very nice to have them there when created using themer.

26 Nov 2016, 10:37 AM
I believe you can achieve something close to this right now with Themer, and we will soon be adding a feature that will improve it for you.

One commonly missed feature of Themer is the 'palette'. When you select a color variable, the first tab is a list of colors (with varying lightness). By default the base, background, and font colors show up, however, you can add custom colors as well. On the Material Design (MD), the `+` icon will add the color to the palette, and the color picker, there is a 'Add to Palette' button. When you need to use common colors throughout your Theme, it is useful to add them to your palette, this is part of what custom variables accomplish.

We currently have planned a feature that will intake a CSS (or really any text file), and scan it for colors to add to the palette. This should help get your list of colors onto the palette quickly (as opposed to manually adding them).

The one loss from using this functionality is changing your 'custom' colors after you apply them to variables/sass parameters. This is probably where we would look to fill a gap in the future.

Thanks for your feedback, it is very helpful!!

18 Dec 2016, 10:28 AM
Thanks very helpful!