BPC Theme entwickeln

From Version BPC3 the theming process in BPC-Theme is made easier.

There are two different approaches : Basic (for Consultants) und Advanced (for Developer).

Template Theme

Theme Template could be used as example theme or starting point to create new themes.

Create the theme repository

Fork the Template

To create a customer theme, you have to fork this repo in Bitbucket:

https://bitbucket.org/virtimo/bpc-theme-template/

The naming should follow the bpc-theme-[customer] convention.

Important: make sure you fork in the workspace Virtimo AG

git repo fork 1 git repo fork 2

git repo fork 3

Clone the repository

Clone the repository to your local file system and open it in the programm of your choice. Here is an example for Sourcetree.

git repo clone

Rename to fit your needs

Here is an example for the Virtimo Dark Theme:

Rename the folder in packages/local/bpc-theme-template
Go into the packages/local/bpc-theme-[name] package.json file and edit the "name" property
At packages/local/bpc-theme-[name] edit the build.xml
Go to the packages/local/resources folder, find loginBackgrounds.json…
..and edit the path for background images for login
From Version 3.1 : Go to the packages/local/resources folder, find themeConfig.json
…and edit the path for favicon image
Open the gradle.properties file and edit the packageName and symbolicName properties

Prepare dev environment

Make sure you linked extJs 7.x as ext in your project (for windows use mklink as admin, for linux use ln -s)
Add your sencha cmd the bpc repository (needed for extend: bpc3) : sencha repo add virtimo https://connect.virtimo.net/sencha-repo
Build the theme to test everything works fine: "gradlew --stacktrace"

Basic Theming - for quick results

In the theme folder under …\packages\local\bpc-theme-[customer]\sass\var` you will find the companyConfig.scss. This is you main config file for the process.

companyConfig

There are options for a LightTheme or DarkTheme ($LightTheme).

There is an option to decide if panels should be colorful ($CompanyNeutralPanels).

Two options for color settings: main color ($CompanyMainColor) and its contrast color ($CompanyMainContrastColor).

[OPTIONAL] Two options for color settings: main color ($CompanyButtonColor) and its contrast color ($CompanyButtonContrastColor).

And the logo ($CompanyLogo) and icon ($CompanyIcon) path.

This might be enough for most of theming cases.

Light and dark mode

If you want to maintaintain a light mode, just set the $LightTheme variable to true:

$LightTheme: true;

example light mode

If you want to enable dark mode, just set the $LightTheme variable to false :

$LightTheme: false;

example dark mode

All the background colors, borders and so on will react to this change an switch to a Background color white (#FFFFFF) for LightTheme and to a dark gray (#333333) for DarkTheme.

All text colors, icons and glyphs will get a fitting contrast color, so that the contrast is high enough (Default for LightTheme: rgba(0,0,0,.87), DarkTheme rgba(255,255,255,.87)).

Colorful or neutral panels

Decide if you want a neutral color for Panel headers and borders - default = false $CompanyNeutralPanels:false;

If you let the Variable be default, panel headers and borders all across the client will take the Main Color as background and border color.

If you change $CompanyNeutralPanels to true:

The panel headers background and borders will turn into a settle gray, always taking in account the Theme you are using. The text color adjusts automatically.

panel 1 panel 2 panel 3 panel 4

This is usefull for customers with extra bright colors.

Highlighting/ Main color

highlighting

To set a Maincolor you need to edit the $CompanyMainColor in the companyConfig.scss file. This has to be a Hex color code.

You also need to define a $CompanyMainContrastColor, for text on top of the defined color. This color should have a good contrast to the chosen color (#ffffff or #111111 works best)

virtimo color

In this example the color used is $CompanyMainColor: darken(#96bebe, 5%);. Its one of virtimos company colors, darkend by 5% with a sass function.

The main color is used as a highlighting color for most of the colored items in the client. Its also used for hover colors and several icons and buttons etc..

panel header

If you want to set a main color for a customer theme, just insert the hex color code like this: $CompanyMainColor: #96bebe;

Manipulate colors

You can adapt the color by lighten oder darken the initial customer color with these functions:

lighten([color], [percentage]); or darken([color], [percentage]);

Expample:

$CompanyMainColor: lighten(#96bebe, 10%);

$CompanyMainColor: darken(#96bebe, 10%);

You can find more information about color manipulation here: https://sass-lang.com/documentation/modules/color

[OPTIONAL] Button Color

The button colors inherit the color from $CompanyMainColor and $CopanyMainContrastColor.

If you want to change the default color of buttons in the client. You can do this by changing $CompanyButtonColor and $CompanyButtonContrastColor from variabels to hex color codes.

Please make sure the text color has enough contrast.

Here i used the Virtimo orange.

virtimo color orange

The Client now looks like this:

The buttons on the bottom every dialog and on hover the buttons in the AppToolBar, are now orange.

Logo & Icon & Background

Company Logo

The height of the Logo is always 32px. The width is variable.

Here is an Expample:

In the theme folder under …\packages\local\bpc-theme-<customer>\resources\images you will find the logo.png and logo_light.png, bg_1.jpg and bg_2.jpg. You just need to replace those files with the logo and background of your customer.

If the name of the logo is different, you need to adjust the url path in the companyConfig.scss you might want to adjust the width.

In case your are using differnet names or number of backgrounds you need to adapt the loginBackgrounds.json (…\packages\local\bpc-theme-<customer>\resources):

App icon

The App Icon in the upper left corner can be set to white or black, depending on the app button color.

Advanced Theming - for a deeper technical understanding

In the theme folder under …\packages\local\bpc3\sass\var you will find the important files to change the appearence of the client.

css color

How the styles are build

The all.scss file imports all necessary files into onle sass styling sheet.

css all

The order is very important. Because most Variables and styles defined in thoses files inherit information from each other.

So first we set the company variables in companyConfig.scss → these give information to define all colors
The colors.scss → from here all other style will get color information.
The mixins.scss file holds usefull mixin functions.
In the font.scss file we set font size and font face.
The logo.scss sets the styles for logo and icon.
The misc.scss overrides some Sencha styles and also styles custom components or custom behavior in te client. This file does not set variables, but syles for classes, using the defines variables.

css noti example

Change colors - advancedConfig.scss

Necessary Settings

In the top of this file you will find the important variables, that take in the $Company[..] variables from the companyConfig.scss and also the switch for light an dark theming.

css advance config

Variable Name	Description	Defined in companyConfig.scss	Usage
$VirtimoMainColor	Its the highlight color. Everything that is colored uses this variable : active tabs, active table rows, buttons (if not defined otherwise), some icons, highlighting in menus and on tables etc…	$CompanyMainColor
$VirtimoMainContrastColor	The textcolor for all elements on top of this color. This should be black or white, depending on the main background color. It is different from the $VirtimoTextcolor.	$CompanyMainContrastColor	See above
$VirtimoBackgroundColor	This is the universal background color all above the client. It is generated via if conditon . If $LightTheme → use #FFF, if NOT $LightTheme → #333. You can also set hex code. But then the themes would not work.	$LightTheme	See Light and dark mode
$VirtimoTextColor	The universal text color in the whole client. It is generated via if conditon . If $LightTheme → use black, if NOT $LightTheme → use black. You can also set hex code. But then the themes would not work.	$LightTheme	See Light and dark mode
$VirtimoButtonColor	This is the button background color for the main buttons in dialogs.	$CompanyButtonColor
$VirtimoButtonContrastColor	The text color on every button. This should be black or white, depending on the button background color.	$CompanyButtonContrastColor	see above

Variable Name

Description

Defined in companyConfig.scss

Usage

$VirtimoMainColor

Its the highlight color. Everything that is colored uses this variable : active tabs, active table rows, buttons (if not defined otherwise), some icons, highlighting in menus and on tables etc…

$CompanyMainColor

config main color

$VirtimoMainContrastColor

The textcolor for all elements on top of this color. This should be black or white, depending on the main background color. It is different from the $VirtimoTextcolor.

$CompanyMainContrastColor

See above

$VirtimoBackgroundColor

This is the universal background color all above the client. It is generated via if conditon . If $LightTheme → use #FFF, if NOT $LightTheme → #333. You can also set hex code. But then the themes would not work.

$LightTheme

See Light and dark mode

$VirtimoTextColor

The universal text color in the whole client. It is generated via if conditon . If $LightTheme → use black, if NOT $LightTheme → use black. You can also set hex code. But then the themes would not work.

$LightTheme

See Light and dark mode

$VirtimoButtonColor

This is the button background color for the main buttons in dialogs.

$CompanyButtonColor

$VirtimoButtonContrastColor

The text color on every button. This should be black or white, depending on the button background color.

$CompanyButtonContrastColor

see above

Optional Settings

In a second paragraph you will find a range of optional variables for more customization efforts.

optional setting

Everything below just takes these Variables and generates the rest of the styling. Thee is no need to alter other variables.

Variable Name	Description	Defined in or by other variable	Usage
$VirtimoToolbarBackgroundColor	This variable takes the background color and alters it to highlight the toolbar and navigation so it will work in both theme modes.	$VirtimoBackgroundColor
$bpcApplicationAreaSwitchButtonBackgroundColor	The variable is the background color for the app icon. This color inherits from the $VirtimoMainColor.	$VirtimoMainColor
$bpcApplicationAreaSwitchButtonColor	Textcolor for app icon button	$VirtimoMainContrastColor	See above
$VirtimoBorderColor	This variable defines the colorful borders arround dialogs, the app toolbar and arround panels. This color inherits from the $VirtimoMainColor.	$VirtimoMainColor
$VirtimoHighlightColor	The variable defines the color for hover higlighting, selection colors etc.	$VirtimoMainColor

Variable Name

Description

Defined in or by other variable

Usage

$VirtimoToolbarBackgroundColor

This variable takes the background color and alters it to highlight the toolbar and navigation so it will work in both theme modes.

$VirtimoBackgroundColor

config toolbar backgrond color

$bpcApplicationAreaSwitchButtonBackgroundColor

The variable is the background color for the app icon. This color inherits from the $VirtimoMainColor.

$VirtimoMainColor

config app switch color

$bpcApplicationAreaSwitchButtonColor

Textcolor for app icon button

$VirtimoMainContrastColor

See above

$VirtimoBorderColor

This variable defines the colorful borders arround dialogs, the app toolbar and arround panels. This color inherits from the $VirtimoMainColor.

$VirtimoMainColor

config border color

$VirtimoHighlightColor

The variable defines the color for hover higlighting, selection colors etc.

$VirtimoMainColor

config highlight color

Custom Theming for all Components - advancedConfig.scss

If your Customer needs mor customization, ysou can overwrite all defined colors with the wishes of customers.

You just need to look up the Variables in the bpc3 colors.scss for the desired Component and overwrite it in the advancedConfig.scss.

If the original color was declared wrapped in a dynamic(); function, you should keep that, or else the new color definition will NOT work.

Here is an Example for the Module Navigation buttons.

The Original Code in bpc3 looks like this:

// Module Navigation Button in Toolbar
$toolbar-bpcNavBtn-background: dynamic(transparent);
$toolbar-bpcNavBtn-background-over: dynamic($VirtimoToolBarBackgroundColor);
$toolbar-bpcNavBtn-icon: dynamic($color);
$toolbar-bpcNavBtn-icon-over: dynamic($color);

Result

example modulenavigation

Just copy the Variables to your Theme and replace the Colors with your choice (This can also be Hexadicimal Codes):

// Module Navigation Button in Toolbar
$toolbar-bpcNavBtn-background: dynamic($VirtimoHighLightColorHover);
$toolbar-bpcNavBtn-background-over: dynamic($VirtimoMainColor);
$toolbar-bpcNavBtn-icon: dynamic($color);
$toolbar-bpcNavBtn-icon-over: dynamic($VirtimoMainContrastColor);

example modulenavigation2

Here is a List of all colors in the colors.scss, you can overwrite*

//Apptoolbar (oben)
//background
$appToolbarBackgroundColor: dynamic(rgba($VirtimoToolBarBackgroundColor,0.8));
$appToolbarBackgroundColorOver: $appToolbarBackgroundColor;
//text color
$appToolbarColor: $color;
$toolbar-scroller-glyph-color: dynamic($color);
$appToolbarColorOver: $VirtimoButtonColor; //colorful
//borders
$appToolbarBorderColor: dynamic($bpcApplicationAreaSwitchButtonBackgroundColor);

//Remove implicit spaces
$toolbar-vertical-spacing: 0;
$toolbar-horizontal-spacing: 0;
$toolbar-separator-horizontal-margin: 0px;

// Unterer Panelbereich Hintergrundfarbe (button toolbar)
$toolbar-footer-background-color: $mainViewBackgroundColor;
$toolbar-background-color:$mainViewBackgroundColor;

// Module Navigation Button in Toolbar- BPC-5088
$toolbar-bpcNavBtn-background: dynamic($VirtimoHighLightColorHover);
$toolbar-bpcNavBtn-background-over: dynamic($VirtimoMainColor);
$toolbar-bpcNavBtn-icon: dynamic($color);
$toolbar-bpcNavBtn-icon-over: dynamic($VirtimoMainContrastColor);

// Navigation (links)
//background
$navToolbarBackgroundColor: dynamic(rgba($VirtimoToolBarBackgroundColor,0.8));
$navToolbarBackgroundColorOver: $VirtimoHighLightColorHover;
$navToolbarBackgroundColorActive: $VirtimoHighLightColorPressed;
$navToolbarBackgroundColorFocus: $VirtimoHighLightColorPressed;
$navToolbarBackgroundColorPressed: $VirtimoHighLightColorPressed;
//text color
$navToolbarColor: $color;
$navToolbarColorOver: $color;
$navToolbarColorPressed: $VirtimoMainContrastColor;
$navToolbarColorActive: $VirtimoMainContrastColor;
$navToolbarColorFocus: $VirtimoMainContrastColor;
//borders
$navToolbarBorderColor: dynamic($bpcApplicationAreaSwitchButtonBackgroundColor);

//************ Window
//background
$window-header-background-color : dynamic($VirtimoMainColor);
$window-body-background-color: dynamic($lighterBackgroundColor);
//text color
$window-header-color: dynamic($VirtimoMainContrastColor);
$window-header-glyph-color : dynamic($VirtimoMainContrastColor);
$window-body-color: dynamic($color);
$messagebox-info-glyph-color: dynamic($color);

//borders
$window_border_color: $VirtimoBorderColor;

//************ GRID
//background
$grid-header-background-color: dynamic(darken($mainViewBackgroundColor,10%));
$grid-row-cell-background-color: dynamic(rgba($mainViewBackgroundColor,0.7));
$grid-row-cell-alt-background-color: dynamic(darken($mainViewBackgroundColor, 5%));
$grid-row-cell-over-background-color: dynamic($VirtimoHighLightColorHover);
$grid-row-cell-focus-background-color: dynamic(transparent);
$grid-row-cell-selected-background-color: dynamic($VirtimoHighLightColorPressed);
$grid-grouped-header-background-color:  dynamic(darken($mainViewBackgroundColor,15%));
//text color
$grid-header-trigger-glyph-color: dynamic($color);
$grid-header-sort-glyph-color: dynamic($color);
$grid-column-header-color: dynamic($color);
$grid-column-header-focus-color: dynamic($color);
$grid-row-cell-color: dynamic($color);
$grid-row-cell-over-color: dynamic($color);
$grid-row-cell-selected-color: dynamic($VirtimoMainContrastColor);
$grid-actioncolumn-icon-glyph-color: dynamic($color);
$grid-checkcolumn-glyph-color: dynamic($color);
$grid-grouped-title-color: dynamic($color);
$grid-grouped-title-glyph-color: dynamic($color);
//borders
$grid-row-cell-border-color: dynamic(transparent);
$grid-row-cell-over-border-color: dynamic(transparent);
$grid-row-cell-selected-border-color: dynamic(transparent);
$grid-row-cell-focus-border-color: dynamic(transparent);
$grid-grouped-header-border-color:  dynamic(rgba($mainBorderColor,0.7));

//************Grid Editor
//background
$grid-row-editor-background-color: $darkerBackgroundColor;

//************ Tree
$tree-glyph-color: dynamic($VirtimoMainColor);

//************ TABS
//background
$tab-base-color: dynamic(lighten($darkerBackgroundColor, 10%));
$tab-base-color-active: dynamic($VirtimoMainColor);
$tab-base-color-over: dynamic($VirtimoHighLightColorHover);
$tab-base-color-focus-active: dynamic($VirtimoMainColor);
$tab-base-color-focus-over: dynamic(lighten($VirtimoMainColor,10%));
$tab-outline-offset-focus: dynamic($VirtimoMainColor);
$tabbar-base-color: dynamic($darkerBackgroundColor);
//text color
$tab-color: dynamic($color);
$tab-color-over: dynamic($color);
$tab-color-focus: dynamic($color);
$tab-color-focus-over: dynamic($color);
$tab-color-active: dynamic($VirtimoMainContrastColor);
$tab-color-focus-active: dynamic($VirtimoMainContrastColor);
$tabbar-scroller-glyph-color: dynamic($color);
$box-scroller-menu-arrow-base-text-color: dynamic($color);
// close icon color for closable tabs
$tab-closable-icon-glyph-color: dynamic($tab-color);
$tab-closable-icon-glyph-color-over: dynamic($tab-color-over);
$tab-closable-icon-glyph-color-focus-over: dynamic($tab-color-over);
$tab-closable-icon-glyph-color-active: dynamic($tab-color-active);

//************ DropDown List
//background
$boundlist-background-color: dynamic($darkerBackgroundColor);
$boundlist-item-over-background-color: dynamic($VirtimoHighLightColorHover);
$boundlist-item-selected-background-color:  dynamic($VirtimoHighLightColorPressed);
//text color
$boundlist-item-over-text-color: dynamic($color);
$boundlist-item-text-color: dynamic($color);
$boundlist-item-selected-text-color: dynamic($VirtimoMainContrastColor); //dynamic($VirtimoHighLightColorPressed);

//************ MENU
//background
$menu-background-color: dynamic($darkerBackgroundColor);
$menu-item-active-background-color: dynamic($VirtimoHighLightColorPressed);
//text color
$menu-item-color: dynamic($color);
$menu-item-checkbox-glyph-color: dynamic($color);
$menu-text-color: dynamic($color);
$menu-glyph-color: dynamic($color);
$menu-item-arrow-glyph-color: dynamic($color);
$menu-item-active-text-color: dynamic($VirtimoMainContrastColor);
//borders
$menu-separator-background-color: dynamic($mainBorderColor);
$menu-separator-border-color: dynamic($mainBorderColor);

//************ datePicker
//background
$datepicker-header-background-color: dynamic(darken($mainViewBackgroundColor,5%));
$datepicker-background-color: dynamic($darkerBackgroundColor);
$datepicker-item-selected-background-color: $VirtimoHighLightColorPressed;
$datepicker-item-hover-background-color : dynamic($VirtimoHighLightColorHover);
$datepicker-month-button-over-background-color : dynamic($VirtimoHighLightColorHover);
$datepicker-monthpicker-item-selected-background-color : dynamic($VirtimoHighLightColorPressed);
//text color
$datepicker-arrow-glyph-color: dynamic($color);
$datepicker-month-button-arrow-glyph-color: dynamic($color);
$datepicker-item-selected-color: dynamic($VirtimoMainContrastColor);
$datepicker-monthpicker-item-selected-color :$VirtimoMainContrastColor;

//********Accordion colors
//background
$accordion-background-color : dynamic($mainViewBackgroundColor);
$accordion-header-background-color : dynamic($VirtimoMainColor);
$accordion-header-over-background-color : dynamic($VirtimoMainColor);
//text color
$accordion-tool-glyph-color : dynamic($VirtimoMainContrastColor);
$accordion-header-color: dynamic($VirtimoMainContrastColor);

//************  Formfields
// formfields
$formfieldColor: dynamic($lighterBackgroundColor);
//backgrounds
$form-field-background-color: dynamic($formfieldColor);
$form-field-invalid-background-color: dynamic($formfieldColor);
$tag-field-item-background-color: dynamic($formfieldColor);
$fieldset-background-color: dynamic(rgba( darken($formfieldColor, 15%), 0.8));
//Text and glyph color
$form-field-color: dynamic($color);
$form-field-empty-color: dynamic($color);
$form-text-field-color: dynamic($color);
$form-label-font-color: dynamic($color);
$form-file-field-color:dynamic($color);
$form-trigger-glyph-color: dynamic($color);
$form-checkbox-glyph-color: dynamic($color);;
$form-toolbar-label-font-color: dynamic($color);
$tag-field-item-color: dynamic($color);
$tag-field-item-close-icon-glyph-color:dynamic($color);
$fieldset-header-color: dynamic($color);
//borders
$fieldset-border-color: dynamic($mainBorderColor);
$form-field-border-color: dynamic($mainBorderColor);

Other Generated Settings

The Variables defined above will set all the default Theme variables for the Sencha Theme to use. There are also custom Variables that get their value from the Variables in the first two sections.

Here you can see, that the main background colors, text color and border color is defined.

These Variables are used all over the client and multiple components.

As a rule of thumb you can assume, that all Variables with the name $Virtimo[…] use the $VirtimoMainColor, $VirtimoButtonColor or are contrast colors for this colors.

This makes it easy to spot styles with those colors involved.

generated setting code 1

Here is an example:

generated setting code 2 generated setting ex 2

Here is another example The panel Component:

generated setting code 3 generated setting ex 3

Keywords: