Themes

Introduction to themes

menu User interface > Themes > tab Themes

The theme (style) of the user interface is also defined in the model. A theme determines the colors, fonts, and images that are used and is defined for all components of the user interface.

Different theme types are available for the classic and the Universal user interfaces.

Themes

Export or import a theme

To apply themes that transcend a model, it is possible to Import and Export themes.

Export a theme

menu User interface > Themes > tab Themes

1. Select the task Export theme .
2. Select a Theme and enter a File name.
3. Click Execute.
4. Select a folder and if necessary, you can still change the name. The default file name contains the model, branch, and date. The default extension is .json.
5. Click Save.

Import a theme

menu User interface > Themes > tab Themes

You can import a theme from exported JSON or from a source model and branch in the same Software Factory.

To import a theme from exported JSON:

1. Select the task Import theme .
2. Select the checkbox From exported JSON.
3. Select the file path of the *.json file you wish to import.
4. Add a Theme name.
5. Click Execute.

To import a theme from a source model and branch:

1. Execute the task Import theme .
2. Clear the checkbox From exported JSON.
3. Select a Source model, Source branch, and Source theme.
4. Add a Theme name.
5. Click Execute.

In both cases, the model will be decompressed and imported. Trace columns will be filled with the user name 'Imported' and the current system date and time.

Classic theme

The classic theme contains a wide range of settings for the Windows and Web user interfaces.

General

menu User interface > Themes > tab Themes > tab General

The general theme settings, such as the background color and the scrollbar, are defined in the General tab page.

Document tab

menu User interface > Themes > tab Themes > tab General > tab Tabs > tab Document tab

When tabs are opened from the menu, they can be active (selected) or inactive (not selected). The tab colors in this instance and the colors when you move over the tab can be set here.

Tab in theme

Tab

menu User interface > Themes > tab Themes > tab General > tab Tabs > tab Document tab > area Tab

Where in the document component, the tab color can be set for colors opened from the menu. The colors for the background of the tabs within these main tabs are set here, shown in turquoise in the figure below.

Tab header height

menu User interface > Themes > tab Themes > tab General > tab Tabs > tab Document tab > area Tab

You can choose from the following options:

header method options

• Default - The default is unchanged.

• Spacious - Extra padding based on font size.

• Manual - Manual padding in pixels around the header text.

Tab with manual height

Tab lines

menu User interface > Themes > tab Themes > tab General > tab Tabs > tab Document tab > area Tab

It is possible to set the color of tab content lines and tab header lines.

Tab with transparent lines

Inactive tabs

menu User interface > Themes > tab Themes > tab General > tab Tabs > tab Document tab > area Inactive

Inactive tabs are styled by the GUI, by default. It is possible to manually style these tabs in the SF.

Disabled tab Code changelog

Tab color settings theme

The colors for the lines surrounding the tabs can be modified here. It is, for example, possible to make the tab header color a dark gray and the content border white (same as the background color). This significantly reduces the amount of lines on the screen in nested tabs.

Show icons

menu User interface > Themes > tab Themes > tab General > tab Tabs > tab Document tab > area Icons

Select the Show checkbox to display icons on all tab headers in the application that have an icon defined.

Show icons checkbox

For each subject, you can specify the corresponding icon in the Subjects > Settings > General -> Icon field.

Background

The background of your application is visible when no tabs are open. You can configure a color and an image.

To configure a background for your application.

menu User interface > Themes > tab Themes > tab General > tab Background > Background

1. Select a Color.

2. Select a Background picture.

   note

   An image in landscape format usually gives the best results. If your application scales from landscape to portrait, the sides are cropped to fit the screen.

3. Select the Fit for the background picture:

   • Tiled - The image is repeated horizontally and vertically across the entire screen, like a pattern, without scaling or distortion. Empty spaces are filled with the background color.
   • Center - The image is centered. Empty spaces are filled with the background color.
   • Fit - The image is resized so that it fits within the screen, without being cropped or distorted. Empty spaces are filled with the background color.
   • Stretch - The image is resized to fill the entire screen in width and height. The image may be distorted (stretched wider or taller).
   • Fill - The image is resized to completely cover the screen. Parts of the image may be cropped.

4. Select a splitter Color.

5. Select a Splitter line color.

Add an image in the theme

Document

menu User interface > Themes > tab Themes > tab General > tab Background > tab Document

The background colors, which are displayed when a tab is opened, can be defined here (shown in violet in the figure below).

Document theme settings and the result

The splitter color, which is visible for example between a grid, a form and an image, can also be set here.

Pop-up

menu User interface > Themes > tab Themes > tab General > tab Background > tab Popup

This is where the background color of a pop-up field is modified.

Scrollbar

menu User interface > Themes > tab Themes > tab General > tab Background > tab Scrollbar

This is used to indicate the background color and the color of the scrollbar.

Header and footer

menu User interface > Themes > tab Themes > tab General > tab Background > tab Header and footer

The colors for the top and bottom of the application can be selected for the mobile application.

Setting the theme for mobile

Application list

menu User interface > Themes > tab Themes > tab General > tab Background > tab Application list

This is where the colors of the applications at the bottom of the menu are styled.

Application list style

Splash screen

menu User interface > Themes > tab Themes > tab General > tab Background > tab Splash

Setting the colors and logo for the splash screen is something that takes place in the IAM (Global Settings). The reason for this is that when opening an application, this does not necessarily mean that only one application is opened. The splash screen does not refer to one particular application.

However, you can specify here which components should and should not be displayed on the splash screen. The 'Button' component has not yet been implemented in the current Software Factory generation.

Setting splash theme

Badge

menu User interface > Themes > tab Themes > tab General > tab Background > tab Badge

This section has been added to give the option to style the font and background color of badges.

Navigation

menu User interface > Themes > tab Themes > tab Navigation

In the navigation section, it is possible to set every style option related to navigation.

Ribbon

menu User interface > Themes > tab Themes > tab Navigation > tab Ribbon

When the colors are set for the ribbon, you can choose to set a general background color. In addition, you can set a mouseover color for a segment or for just a button

Theme settings for the ribbon

note

The color that is selected for the ribbon will appear behind an icon of a task, pre-filter, etc. in the ribbon within the work area.

Listbar

menu User interface > Themes > tab Themes > tab Navigation > tab List bar

If the menu is displayed as a list bar, the theme settings can be specified here. For example, a background can be set, the groups and items can be given a color, and an image can be displayed at the bottom of the menu.

Tree

menu User interface > Themes > tab Themes > tab Navigation > tab Tree

If the menu is displayed as a tree view, the theme settings can be specified here. For example, a background can be set, the groups and items can be given a color, and an image can be displayed at the bottom of the menu.

If users can switch between these types of menus, then both menus have to be set up.

Tiles

menu User interface > Themes > tab Themes > tab Navigation > tab Tiles

The settings for the tile menu, tile groups and individual tiles can be specified here. The tiles menu can be given a background color or image. Single tiles can be given a normal, selected and mouseover style.

Title bar

menu User interface > Themes > tab Themes > tab Navigation > tab Title bar

The changes made in the menu component will affect the bar above the ribbon of the application which hold the name of the application.

Bar above the ribbon of the application

Components

menu User interface > Themes > tab Themes > tab Components

In this section, it is possible to style the different components: grid, form and cube.

Grid

menu User interface > Themes > tab Themes > tab Components > tab Grid

When setting up the grid, various components can be modified for a grid view. For example, the general grid theme can be set up, including the background color.

note

If transparent is chosen in the 'line' component, the rows in the grid will be colored alternately in the color of the background and in a shade darker.

Grid view with alternating colors

In the following sub tabs, you can specify the group colors, row colors and the focus cell colors. These can be set for the active row, the selected row and for a mouse over.

Grid aggregation style

menu User interface > Themes > tab Themes > tab Components > tab Grid > tab Aggregate

It is possible to style the grid aggregation (summary), for example:

Form

menu User interface > Themes > tab Themes > tab Components > tab Form

A color can be set for the background and the border of the form. In addition, the lines that appear under a group label can also be modified.

It is possible to set border color, background color and font color of form fields in edit and non-edit mode.

In the field component, the settings can be changed for the color of the mandatory, editable and read only field. If the application is not in a modify or add mode, all fields will adopt the color of the read only fields.

Show buttons on hover

An option to only show form buttons when hovering over the form with the mouse.

Cube

menu User interface > Themes > tab Themes > tab Components > tab Cube

All settings for the cube can be modified in the cube theme component. This component is divided into three sub tabs. The general settings for the cube, such as the background color and the cube color, can be specified on the first tab. You can also define a color for the graph here. This color is displayed behind the graph, and the surrounding border can also be modified.

The field settings can be modified on the second tab. The background can be specified here, and the totals and the border can be assigned a color.

The colors for the areas, rows, columns, fields and cells can be specified in the third tab, area.

As shown in previous paragraphs, there are many different options available when it comes to setting up the theme. The theme is obviously a personal matter and provides the application with the look and feel that suits the organization. Thinkwise recommends adjusting the theme in line with the colors of the company, but to keep it neutral. A theme that is too prominent distracts and will not benefit productivity. When the colors of a theme are underexposed, this can be confusing because it is then not clear where one tab ends and the other begins. The right theme supports the application and benefits productivity.

The figures below show an example of a strong visual theme and a minimalist theme.

A theme that is out of balance.

A minimalist theme

Colors and Fonts used

menu User interface > Themes > tab Themes > tab Colors used

menu User interface > Themes > tab Themes > tab Fonts used

When creating a theme, it is recommended to use a limited set of colors. In the Colors used tab page, it is possible to see which colors are used and where they are used.

A color can be changed using the Update color task or by dragging the column to the preferred color. The same overview is available for the fonts used.

Fonts and colors used in a Theme

Universal theme

Universal GUI

For universal themes, the default mode can be set to either Dark or Light. Because a user can switch between the dark and light mode, settings are available for both the dark and light mode of the theme.

The background fit affects how the background image is displayed. You can set the background image for both dark and light modes.

The specified font face and size of the selected fonts are used for the headers and body of the Universal user interface; the font color and style is ignored.

The following colors are available to style an application:

• Main color - The primary color refers to the color that appears most frequently in the application.
• Accent color - The accent color refers to the color used to accent key parts of the user interface. This includes the background color for badges, and also the text color for GUI notifications that an update is available, or that a connection is available when working offline.

Universal theme settings

Compact mode in the Universal GUI

Universal GUI

Ample whitespace is required in an application. It improves comprehension, legibility, and focus, and it guides the user through the interface. However, some applications are less suited for the default data density used by the Universal GUI. A denser UI could make data in your application easier to scan, view and compare. For this reason, compact mode is available.

To select a default mode for your users in the config.json, use:

"spacingMode": "compact"

The options for spacingMode are compact and comfortable. Comfortable mode offers more spacing. Depending on the goal of your application, you may want to use a more compact or a more comfortable UI. If you need a different amount of whitespace, you can customize the row height of a grid. See Row height.

note

If you do not set spacingMode explicitly, compact will be used for desktop, and comfortable will be used for touch devices.

The user can override this option in their User preferences if they prefer a different density.

Compact mode compared to comfortable mode:

Setting	Compact	Comfortable
Font size	14px	14px
Grid row height	36px	44px
Pivot grid row height	36px	36px
Spacing	4px	8px

Form field background color for Universal GUI

Universal GUI

In some forms, it can be hard to discern where a form field starts or ends. Therefore, a default background color is applied in edit mode and non-edit mode. This style makes the positioning of controls clearer and provides a better indication of their boundaries. This feature is also known as "filled form fields".

To disable the default background color for form fields, change the following setting in Universal GUI's config.json:

1. Set useFormFieldBackgroundColor to false.

Example of default background color in form fields

Change the application icon and title

An end application with the Universal GUI comes by default with a Thinkwise icon and title.

The Universal folder contains three icons:

• favicon.ico - The browser tab icon.
• logo.png - The shortcut icon on your screen (resolution 192x192)
• logo-512.png - The shortcut icon on your screen (resolution 512x512)

Your browser decides whether to use logo.png or logo-512.png, based on the resolution.

To change the logo and title:

caution

When you replace the Universal GUI with a newer build, exclude the manifest.json file and your icons, or they will be overwritten.

1. Open the Universal folder.
2. Change the icons.
3. If you added icons with another name, point to the new icons In the manifest.json.
4. Here, you can also change the application title.

See also:

• Settings for a web app
• Define more icons for a web app

Custom CSS in the Universal GUI

Universal GUI

It is possible to use custom CSS in the Universal GUI.

note

Every Universal GUI download contains a custom.sample.css file in the public folder. Rename this file once to 'custom.css' for each Universal GUI installation, even if you do not use the custom styles. Renaming ensures custom styles will not be overwritten when updating the Universal GUI. If you do not rename this file, a 404 error is displayed in your Developer tools.

Available topics:
* Considerations for using Custom CSS
* CSS classes in the Universal GUI
* Custom CSS: theme colors and picture
* Custom CSS: background color for a subject or variant
* Custom CSS: logo
* Custom CSS: company logo in scrollbar
* Custom CSS: title
* Custom CSS: message
* Custom CSS: hide menu and header
* Custom CSS: transparent login form
* Custom CSS: hide 'Forgot password?' link
* Custom CSS: form section titles and group titles
* Custom CSS: settings for specific modes
* Custom CSS: bind custom CSS to a specific application
* Custom CSS: different styling for combobox controls
* Custom CSS: identify field state in a grid

Considerations for using Custom CSS

• Because there is no support for custom CSS, we recommend you use the community for questions about custom CSS.
• Before creating a ticket, ensure no custom CSS is active.
• If you are missing classes or, more likely, data-testids, let us know via the community.
• Check your custom CSS after any update (for example, an update of Universal, the Software Factory / Intelligent Application Manager, or your model)

Do's

• Use the data-testids provided by the Universal GUI.
  • They are used for automated testing and thus unlikely to change.
  • They are further along than BEM-classes.
• Rename custom.sample.css to custom.css, even if you will not be using custom CSS.

Don'ts

• Avoid using generated CSS classes (e.g. .css-1ksyjmz).
• Refrain from modifying layout.
• Do not use custom CSS for things that can be changed using the Software Factory.

Resources

• Mozilla Developer Network: Documentation about CSS
• Learn CSS: A course by Google on CSS
• The CSS specification: How CSS actually works under the hood

CSS classes in the Universal GUI

The Universal GUI provides static CSS classes for a selection of elements, mainly on the login page. The BEM — Block Element Modifier naming convention is used to structure classes. Not all components have fixed classes yet.

We do not recommend using the generated CSS classes (like css-dz6rn8) for components that do not use BEM yet, as they will change over GUI versions. In some cases, you can use pseudo-classes, like :after or :nth-of-type(x) instead, which are less likely to change.

Use platform-specific CSS

You can prefix your CSS with the platform for which you have started the Universal GUI. This means that you can support different CSS styles for your menu: Windows, Web, Mobile and Universal. See also Platforms.

The class that specifies the platform is part of the html tag. The platform option names are:

• windows
• web
• universal
• mobile

In the following example, the text color of the header becomes red, but only for the Windows platform.

.windows main > header {
  color: #f44336;
}

Theme colors and picture

You can use the following custom properties to set the colors and picture of your theme in your custom CSS:

• Main color: --primary-color
• Accent color: --secondary-color
• Theme picture: --background-picture

/* Give labels the primary color with a background image, with a backup for light mode */
.light label {
  color: var(--primary-color, #323232) !important;
  background-image: var(--background-picture) !important;
}
/* Make all SVG's the secondary color, with a backup for light mode */
.light svg {
  fill: var(--secondary-color, #323232) !important;
}

/* Give labels the primary color with a background image, with a backup for dark mode */
.dark label {
  color: var(--primary-color, #fafafa) !important;
  background-image: var(--background-picture) !important;
}

/* Make all SVG's the secondary color, with a backup for dark mode */
.dark svg {
  fill: var(--secondary-color, #fafafa) !important;
}

Background color for a subject or variant

Each screen in the Software Factory has data properties that allow you to access the current subject and variant.

• {tab}: data-tab-id
• {tab variant}: data-tab-variant-id
• {reference id}: data-tab-ref-id

You can use these properties in your CSS to set a background color for a subject or variant:

/* Change the background for the grid on the subject `project` with the variant `mobile`.*/
[data-tab-id="project"][data-tab-variant-id="mobile"] .grid {
   background: #fafafa !important;
}

Logo

/* Hide the original logo */
.login__group--icon {
  display: none;
}

/* Display an alternative logo */
.login__group--icon-container {
  background: url('https://office.thinkwisesoftware.com/thinkwise2.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 4em;
  width: 4em;
  margin-bottom: 8px;
}

Company logo in scrollbar

.scrollbar-container
{
    background: url(company logo url);
    background-position: center bottom;
    background-repeat: no-repeat;    
    background-size: 200px;
}

Title

/* Hide the original title */
.login__group--title {
  display: none;
}

/* Display an alternative title */
.login__group--header::after {
  content: 'Alternative title';
  font-weight: 500;
  font-size: 1.3125rem;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  padding-bottom: 9px;
}

Message

/* Display a message */
.card-content__login::after {
  content: 'Maintenance is scheduled for Sunday between 8AM and 12AM. The application will not be available then.';
  font-weight: 300;
  font-size: 0.9rem;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  color: #ba000d;
  display: inline-block;
  text-align: center;
}

Example: login page with a custom background image, logo and title, and a maintenance message

Hide menu and header

This example hides the menu and header, and only shows a dashboard or other start object.

/* Hide the sidebar menu */
#__next > .sidebar {
    display: none;
}

/* Hide the header */
#__next > main > header {
  display: none;
} 

/* Resize and reposition the main screen*/
#__next > main > div {
  height: calc(100% - 16px);
  width: calc(100% - 16px);
  left: 0px;
}

Example: hidden menu and header

Transparent login form

.card__login
{
    background-color: rgba(255, 255, 255, 0.9) !important;
}

Hide 'Forgot password?' link

#resetPassword {
    display: none;
}

Form section titles and group titles

/* Section title */
.section-title .text {
    font-size: 2rem !important;
    color: red;
}

/* Group icon */
.group-title svg {
    width: 28px !important;
    height: 28px !important;
    fill: blue !important;
}

/* Group title */
.group-title .text {
    font-size: 1.5rem !important;
    margin-top: -2px; // Align text with icon
}
.group-title {
    color: green !important;
}

Example: custom form section titles and group titles

Settings for specific modes

To specify style sheet rules that are specific for light or dark mode, or for comfortable or compact mode, use the following classes:

/* light mode */
.light {
  /* settings that are specific for light mode */
}
/* dark mode */
.dark {
}
/* comfortable mode */
.comfortable {
}
/* compact mode */
.compact {
}

Bind custom CSS to a specific application

The root element of the web page contains a hook that you can use to bind custom CSS to a specific application. This hook is called data-active-application, and its value defines the active application.

Example HTML:

<!DOCTYPE html>
<html lang="en" translate="no" class="dark compact" data-active-application="insights" style>
  <head>
  </head>
  <body>
  </body>
</html>

In the example above, the active application is called "insights". In your CSS file, prefix any CSS selector with html[data-active-application="insights"] to use that style only for that active application. Replace the value "insights" with the name of the application that you want to use the custom style for.

Example CSS:

html[data-active-application="insights"] body {
  background-color: red;
}

Different styling for combobox controls

To visually differentiate between the Combobox (dropdown list) and the Combobox with a suggestion, you can apply different CSS styling for each combobox type:

• The class combo-select applies to the Combobox (dropdown list) control
• The class autocomplete-select applies to the Combobox with a suggestion control

Identify field state in a grid

The grid assigns specific classes to cells to indicate the column's state. The classes are found on the target element .conditional-layout-container within each cell. You can use custom CSS to emphasize cells with the .has-error class, for example, by using a red border or background color.

The available classes are:

• .mandatory for cells with a mandatory field
• .readonly for cells with a disabled field
• .has-error for cells with a field that has an error