HERE granular color theming

HERE granular color theming allows you to easily customize the look and feel of Here Enterprise Browser to match your organization's branding. Theming lets you change the colors used throughout the application interface by setting four colors:

• brand.base.dark
• brand.base.light
• brand.accent.dark
• brand.accent.light

Based on these four hexadecimal, RGB, or RGBA colors, the theming engine generates the full color spectrum of your company's brand to elements like buttons, tabs, menus, and backgrounds. If you want more control over your color theme, you can override one or more of the generated values.

info

For information on RGB and RGBA, see W3Schools CSS RGB Colors. For information on hexadecimal colors, see W3Schools CSS HEX Colors.

Light and dark modes

Theming fully supports both light and dark display modes. When you configure your theme:

• You provide colors for both light and dark variants

• The system generates appropriate shades for each mode

• Users can switch between modes, and your branding remains consistent

• The application can follow the user's system preference automatically

This means you don't need to create two separate themes; the system handles the adaptation while keeping your brand identity intact in both modes.

Customization approach

HERE granular color theming offers two approaches to customization. Choose the one that best fits your needs, or combine both for maximum flexibility.

Basic mode

This is the best mode if you want quick, consistent branding without managing individual color elements. In basic mode, you provide just a few core brand colors, and the theming engine generates the complete theming. You can always add specific customizations later if needed.

The colors you provide include:

• Base colors: Your primary dark and light foundation colors

• Accent colors: Your brand's highlight color for buttons and interactive elements

From these colors, the theming engine creates all the necessary shades, variations, and component colors that provide proper contrast for both light and dark display modes.

Detailed mode

This is the best mode if you have specific brand guidelines that require precise control over individual interface elements. Detailed mode lets you override the colors of specific components without affecting others.

Detailed mode is useful when:

• Your brand guidelines specify exact colors for certain types of elements

• You want a particular component to stand out differently from the generated theme

• You need to match an existing application's exact appearance

• Accessibility requirements demand specific color combinations

You can use detailed mode alongside basic mode (with generated colors) to override only the specific components that need different colors.

Comparison at a glance

Aspect	Basic Mode	Detailed Mode
Setup effort	Minimal — just a few colors	More involved — specify each element
Control level	Automatic, system-generated	Precise, per-component
Best for	Quick branding, consistency	Strict brand guidelines
Can be combined?	Yes	Yes

What you can customize with theming

The fully customizable color theming allows you to customize colors across all major interface components:

Component	What You Can Change
Buttons	Background, text, borders, hover and active states
Tabs	Active tab, inactive tabs, tab bar background
Menus	Menu background, item colors, selection highlights
Dialogs	Dialog backgrounds, headers, borders
Backgrounds	Main surfaces, sidebars, panels
Text	Primary text, secondary text, links
Status indicators	Success, warning, error, and informational colors

What you cannot customize with theming

The following properties are not customizable:

• Layout: The arrangement and positioning of interface elements

• Spacing: Margins, padding, and gaps between elements

• Typography: Fonts, font sizes, and text styling

• Component sizing: The dimensions of buttons, inputs, and other controls

Recommendations

• Begin with simple mode and only add specific overrides if needed.

• Always review your theme in both light and dark display modes.

• Ensure text remains easily readable against all backgrounds.

• Verify color contrast meets accessibility standards if required.

• Keep a record of the colors you've selected for future reference.

• Have colleagues review the theme before finalizing.

Setting up your theme

Here's the typical process:

1. Gather your brand colors: Collect your organization's primary brand colors, including dark and light variants and accent colors.

2. Decide on your approach: Choose whether basic mode meets your needs or if you require detailed mode customizations.

3. Provide your specifications: Share your color values (in hexadecimal, RGB, or RGBA) and any specific component requirements with your HERE representative.

4. Review the generated theme: Examine the theme in both light and dark modes to ensure it meets your expectations.

5. Deploy: Once approved, the theme is applied to your deployment.

Tokens

The following shows the required brand (seed) tokens and a JSON example of several overrides. If no override tokens are used, the entire color scheme is generated from the four required seed tokens

info

Theme configuration is handled through your HERE representative. The example is listed for information only.

Brand tokens

• brand.accent.dark
• brand.accent.light
• brand.base.dark
• brand.base.light

Example JSON

const ExampleTheme = {
    seed: {
        'brand.base.dark': '#061406',
        'brand.accent.dark': '#008859',
        'brand.base.light': '#FFFFFF',
        'brand.accent.light': '#008859'
    },
    overrides: {
        light: {
            'color.role.foreground.soft': '#444F44',
            'color.role.foreground.base': '#061406',
            'color.role.background.accent.base': '#008859',
            'color.role.border.base': '#00915A',
            'color.role.background.accent.soft': '#E0ECE5',
            'color.role.border.accent.base': '#00915A',
            'color.role.link.hover': '#408C38',
            'color.role.link.default': '#0D7840',
            'color.role.border.6': '#B8B4B8',
            'color.role.border.5': '#CACACA',
            'color.role.border.4': '#CACACA',
            'color.role.border.3': '#F5F5F5',
            'color.role.border.2': '#F5F5F5',
            'color.role.border.1': '#FFFFFF',
            'color.role.background.6': '#B8B4B8',
            'color.role.background.5': '#E5E5E5',
            'color.role.background.4': '#CACACA',
            'color.role.background.3': '#F5F5F5',
            'color.role.background.2': '#F5F5F5',
            'color.role.background.1': '#FFFFFF'
        },
        dark: {
            'color.role.foreground.soft': '#C1C4C1',
            'color.role.foreground.base': '#FFFFFF',
            'color.role.background.accent.base': '#008859',
            'color.role.border.base': '#343434',
            'color.role.background.accent.soft': '#29352F',
            'color.role.border.accent.base': '#008859',
            'color.role.link.hover': '#008859',
            'color.role.link.default': '#008859',
            'color.role.border.6': '#5A5058',
            'color.role.border.5': '#343434',
            'color.role.border.4': '#343434',
            'color.role.border.3': '#0A0A0A',
            'color.role.border.2': '#343434',
            'color.role.border.1': '#262626',
            'color.role.background.6': '#5A5058',
            'color.role.background.5': '#343434',
            'color.role.background.4': '#343434',
            'color.role.background.3': '#0A0A0A',
            'color.role.background.2': '#343434',
            'color.role.background.1': '#262626'
        }
    }
};