Universal theme
Introduction to Universal theme​
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​
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.
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​
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
:
- Set
useFormFieldBackgroundColor
tofalse
.
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:
When you replace the Universal GUI with a newer build, exclude the manifest.json
file and your icons, or they will be overwritten.
- Open the
Universal
folder. - Change the icons.
- If you added icons with another name, point to the new icons In the
manifest.json
. - Here, you can also change the application title.
See also:
Custom CSS in the Universal GUI​
It is possible to use custom CSS in the Universal GUI.
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.
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-testid
s, 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-testid
s 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
tocustom.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, 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
In the following example, the text color of the header becomes red, but only for the Windows platform.
.windows main > header.MuiAppBar-root .title {
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 `windows`.*/
[data-tab-id="project"][data-tab-variant-id="windows"] .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
Set tab labels to uppercase​
By default component and detail tab labels follow the casing that is specified in the translation.
To set tab labels to uppercase, add the following CSS to the custom.css
file:
.tabstrip__button__title {
text-transform: uppercase !important;
}
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