Basic UI customization

This article provides you an overview of the basic UI customizations that can be made to the look and feel of 10Duke Login Application and 10Duke OrgAdmin.

With the basic customization options, you can customize the UI fonts, colors, and images to match your brand.

Contact the 10Duke Integration Support team to find out more about the customizations available and discuss the changes you want.

Fonts

You can define three types of fonts:

  • Base font

    Used for everything, except when overridden by the other font settings.

    Default: Source Sans 3 (sans-serif)

  • Heading font (optional)

    Used for titles that overrides the base font.

    Default: Montserrat (sans-serif)

  • Monospace font

    Used to display the user’s initials in the circular “profile picture” element on the profile page.

    Default: Roboto Mono (monospace)

You can define fonts using a web font import, for example, as a free Google web font import URL or a commercial web font import URL. Web fonts are externally hosted font assets that are loaded automatically and don’t rely on the user having the specified font installed in their system.

Example (line breaks added for display purposes):

https://fonts.googleapis.com/css
   ?family=Source+Sans+3:ital,wght@0,400;0,700;1,400;1,700
   &family=Roboto+Mono:wght@400
   &display=swap

If needed, it’s also possible to define fonts using a fallback list of “built-in” font names, such as Arial, Helvetica, sans-serif. The fallback list attempts to use the left-most font if it’s installed and available in the user’s system. If the font is not found, the next one is attempted.

Colors

You can customize the theme colors in both UI applications, and how colors are applied in the UI in light and dark mode.

Theme colors

You can customize the Bootstrap-based theme colors in the UI. Provide the colors as Hex color codes.

See more about how Bootstrap theme colors work in Bootstrap 4 and Bootstrap 5.

Primary color

Used, for example, in primary buttons (such as Save and OK), active state highlights, and in OrgAdmin, the header background.

Login Application default: #017cb5

OrgAdmin default: #1d71b8

Secondary color

Used, for example, in secondary buttons (such as Cancel and Close).

Login Application default: #6e7577

OrgAdmin default: #6e6e6e

Dark color

Used, for example, in the Login Application to display text on top of a light background. Ideally nearly black but allows for a tint/shade.

Login Application default: #333333

OrgAdmin default: #222222

Light color

Used, for example, in the Login Application to display text on top of a dark background. Ideally nearly white but allows for a tint/shade.

Login Application default: #fafafa

OrgAdmin default: #fafafa

Success state color

Used for buttons (such as Add, Create, and Enable), success notifications, and indicators of valid state (such as an input field border or a check mark indicator).

Login Application default: #76ab0d

OrgAdmin default: #39B44A

Danger state color

Used for buttons (such as Delete, Remove, and Disable), failure notifications, and indicators of invalid state (such as an input field border or an exclamation mark indicator).

Login Application default: #d9534f

OrgAdmin default: #D12511

Warning state color

Used for notifications that contain important information that affects the current user flow, for example, to indicate that a password confirmation is required or the user must log in to continue.

Login Application default: #e6a205

OrgAdmin default: #feb31f

Info color

Used for additional information and tooltips.

Login Application default: #0d8ea9

OrgAdmin default: #1da5ef

Light and dark mode

You can customize how colors are used in the UI in light and dark mode, with some differences in what support is available in each UI application.

Orgadmin supports Bootstrap dark and light color modes. The Login Application uses a similar 10Duke-specific concept of color schemes.

Login Application color schemes

In the Login Application, the chosen color scheme fixes the UI to be always in either light or dark mode. Switching based on the user’s preferences is not supported.

A single base color is used to produce body and element backgrounds to provide a clean monochromatic look with some “depth”, while still allowing elements to be grouped together with a specific background shade.

You can customize the following color scheme settings that affect how colors are used:

  • Color scheme

    The selected color scheme affects how the scheme’s base color and the theme colors are applied in the UI.

    The default light color scheme produces lighter backgrounds and darker content (such as buttons and texts), and the dark color scheme produces darker backgrounds and lighter content.

  • Base color

    The scheme’s base color is used for body and element backgrounds. By default, the backgrounds vary around this defined base color, some being slightly darker and others slightly lighter.

    To produce good results, the base color should match the color scheme: a light shade for the light scheme, and a dark shade for the dark scheme.

    The default base color is the corresponding color from theme colors: the light color for the light scheme, and the dark color for the dark color scheme.

OrgAdmin color modes

By default, OrgAdmin automatically switches between the light and dark mode based on the user’s preferences. If needed, you can disable the automatic color mode selection and set the UI to always use either light or dark mode.

The light mode produces a light background with dark text, and the dark mode produces a dark background with light text.

  • Both modes use the same defined theme colors to automatically produce lighter or darker shades to ensure a sufficient contrast against the background.

  • The theme colors are used as background colors, and the selected foreground color must provide a sufficient contrast against the background in each mode. If the theme colors are customized, the corresponding foreground colors (white and black by default) may also need customization to maintain a sufficient contrast.

  • A base color used for body and element backgrounds is defined separately for the dark and light mode. The base color is then used to produce suitable shades for the backgrounds in the applied color mode.

OrgAdmin also supports applying separate color modes in the UI header and footer. This enables you to create, for example, a dark UI that uses a dark background and light text, but has a header with a light background and dark text.

Images

You can change the following images.

The logo image should preferably be a transparent SVG or PNG file.

OrgAdmin shows the logo primarily on top of the primary color, which means the logo should typically be light-colored. The Login Application shows the logo on top of the body background color, so the logo should be dark-colored.

You can define the logo size as follows:

  • For the Login Application, define the preferred logo height in pixels.

    The resulting actual height may be lower depending on the available screen size and the aspect ratio of the logo.

    Default: 100px

  • For OrgAdmin, define the logo measurements:

    • The logo height for the UI application header (the top toolbar).

      Default: 2.25rem (by default, 1 rem = 16px)

    • The logo height for the screen header in views that don’t have the UI application header (for example, in the logout view).

      Default: 4rem

    • The logo width as a factor that is multiplied with the height.

      Default: 1.30556

Favicon

The image used to generate the favicon (the icon displayed on the browser tab) and similar icon images should preferably be a rectangular and transparent SVG or PNG file.

On this page