Theme Customization

SCSS (source code) files enable simple customization of 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. That way it's going to be easier to deal with Azzurra patches.

In the following section, we will show 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-theme-azzurra"

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/etc/ui/corporate-ui.scss

Paste the following snippet:

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

2. Register newly created file

Open sass/etc/all.scss file and add the following line:

@import 'ui/corporate-ui.scss';

3. Include corporate-ui styles in your app's CSS

In application's main SCSS file (sass/src/view/main/Main.scss), add the following line:

@include corporate-ui();

4. 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 in codaxy-theme-azzurra/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 default appearance of all elements, you should modify base color variables.

If you have created a new theme you should make all changes there, otherwise you should add files in your application package.

Panels

Add sass/var/panel/Panel.scss:

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

Of course, you should previously define $corporate-base-color. It can be done in Panel.scss, but defining it in corporate-theme/sass/var/Component.scss might be the better option, so you could use it elsewhere.

Tabs

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

sass/var/tab/Tab.scss

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

sass/var/tab/Bar.scss

$strip-border-color: adjust-color($corporate-base-color, $lightness: -20%);
$strip-background-color: 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.