Theme Customization

SCSS (source code) files enable simple customization of the theme appearance in case you need to adjust the theme to match corporate colors of your company or add new ui colors that are not included in the precompiled package.

Common customization scenarios include:

• Creating a new theme based on Azzurra
• Adding additional ui styles
• Adapting default colors to match corporate design

# New Theme

If you plan to make significant changes to the default theme appearance, it's best to create a new theme and place all modifications in the new project. This way, it will be easier to deal with future Azzurra patches.

In the following section, you'll learn how to build a new theme, called corporate-theme.

1. Generate a new theme using Sencha Cmd

From your application directory run the following command:

sencha generate theme corporate-theme

This will create corporate-theme package which should be located in your packages folder. For more information on creating new themes see Sencha Docs.

2. Set Azzurra as a base theme

In package.json file (located within your newly generated theme package) make the following change:

"extend": "codaxy-azzurra-classic"

3. Switch to corporate-theme

Open your app.json file and select your new theme:

"theme": "corporate-theme",

At this point, your application should take Azzurra default gray appearance.

# Custom UIs

Azzurra ships with five predefined ui colors: blue, red, green, orange, and black. To add new ui color, please follow these instructions:

1. Add file sass/src/ui/corporate-ui.scss inside the "corporate-theme"

Paste the following snippet:

@mixin corporate-ui () {
  @include azzurra-ui (
      $ui-label: 'corporate',
      $ui-base-color: #9ab973
  );
}	

2. Register newly created file

Create sass/src/Component.scss file and add the following lines:

@import 'ui/corporate-ui.scss';
@include corporate-ui();

3. Tab images

Tab images (tab close and tab scroll) are specific to each ui style, so it is required to include them in corporate-theme.

1. Add corporate-theme/resources/images.
2. Copy tab and tab-bar folders from codaxy-azzurra-classic/resources/images
3. Rename all images by replacing word black to corporate and delete all other images.

5. Test

Test new ui styles by applying ui: 'corporate-panel' to one of the panels in your application.

# Color Adjustments

Azzurra theme gives gray color appearance by default. If you don't want to use uis and want to change the default appearance of all elements, you should modify base color variables.

If you created a new theme, you should make all necessary changes in the theme package. Otherwise, add files to your application package.

Panels

Add sass/var/panel/Panel.scss:

$panel-header-background-color: dynamic($corporate-base-color);
$panel-header-background-color: dynamic($corporate-base-color);
$panel-header-border-color: dynamic(darken($corporate-base-color, 4));
$panel-frame-header-background-color: dynamic(adjust-color($corporate-base-color, $lightness: -7%));
$panel-frame-border-color: dynamic($panel-frame-header-background-color);

Of course, you should previously define $corporate-base-color. It can be done in Panel.scss, but we recommend that you place it inside corporate-theme/sass/var/Component.scss. This way, $corporate-base-color could be used for styling other widgets, not only panels.

Tabs

To modify tab panel colors, create and add following snippets respectively:

sass/var/tab/Tab.scss

$tab-color-over: dynamic(white);
$tab-base-color-active: dynamic(adjust-color($corporate-base-color, $lightness: -20%));
$tab-base-color-over: dynamic($corporate-base-color);
$tab-border-color-active: dynamic(adjust-color($corporate-base-color, $lightness: -20%));
$tab-border-color-over: dynamic($corporate-base-color);

sass/var/tab/Bar.scss

$strip-border-color: dynamic(adjust-color($corporate-base-color, $lightness: -20%));
$strip-background-color: dynamic(adjust-color($corporate-base-color, $lightness: -20%));

Windows

To change appearance of active windows, do the following:

1. Copy overrides/window/Window.js from 'codaxy-theme-azzurra' to your app/theme package.

2. Change ui: 'blue-window-active', to ui: 'corporate-window-active'.

After that active window will have your corporate color.