Guide applies to: modern

Ext JS theming

Ext JS theming is done via scores of global and component-specific Sass variables. There are also mixins you can include to create named styles that you can use on specific components.

Global variables

• There are about 25 global variables whose values are used throughout a theme.
• For example, $base-color and $font-family are reflected everywhere in an application, these are all applied on Ext.Component
• See the API documentation for a list of global Ext JS variabless.

Component variables

• Sass variables that describe the various aspects of a given component
• You can reassign values to those variables to globally style your components
• For example, to globally change the panel header font size, you’d assign a value to $panel-header-font-size
• See the API docs for a given component class to see the list of available Sass variables - (These can also be seen in Inspector)

Custom UIs

• A named set of styles which you can apply to specific components
• For example, you can name a set of button styles, then use the `ui` config to apply those styles to individual buttons

Custom Sass

Custom Sass variables or CSS rules