UI5 Theme Generator

The UI5 Theme Generator is a specialized tool for creating, customizing, and managing UI5 themes used across Neptune applications and Neptune launchpad layouts. Generated themes appear alongside standard UI5 themes and themes imported using the UI5 Theme Import tool.

The tool provides a split-screen interface: a configuration panel on the left and a real-time preview on the right. Both light and dark theme variants can be generated and applied across Neptune tooling.

Theme generation compatibility

Supported contexts

The preview and generated themes fully support a range of Neptune environments, including:

Neptune Launchpad (desktop and mobile)
Neptune Mobile Client (iOS, Android, Windows)
Standalone Neptune applications where the theme is explicitly loaded via URL or app settings
Progressive Web Apps (PWA)

These contexts reflect the elements and styles accurately within the tool, ensuring that the theme behaves as expected when applied.

Limitations

The tool is focused on skinning rather than structural layout, and a few practical constraints apply:

Dynamic or runtime-dependent components (for example, widgets injected by extensions) may not render in the preview
Highly customized or deprecated components may fall back to default styles
Complex component states or script-driven behaviors may not be fully represented

These limitations affect preview fidelity but do not impact the generated theme files themselves. The CSS and SASS output remains fully applicable within supported environments.

Skill levels and variable mapping

The UI5 Theme Generator is based on cascading variable inheritance. High-level inputs propagate into hundreds of UI5 SASS parameters.

Level Input Type Variable Mapping Logic Primary Use Case

Level	Input Type	Variable Mapping Logic	Primary Use Case
Basic	Hue only (0–360)	1-to-Many mapping to `Brand` and `Highlight` seeds. Saturation/Lightness auto-calculated for WCAG compliance.	Rapid prototyping; strict accessibility.
Intermediate	Hue only (0–360)	1-to-Group mapping for UI areas such as `Shell Header` or `List Background`. Contrast logic enforced.	Corporate branding with controlled visual zones.
Advanced	Full HSL	1-to-1 mapping with manual Hue/Saturation/Lightness. No safety or contrast guarantees.	Exact color matching to corporate palettes.
Expert	SASS & CSS	Direct SASS pipeline access; full `_variables.scss` override capability.	Architectural theme changes (borders, shadows, animations).

Basic

Hue only (0–360)

1-to-Many mapping to Brand and Highlight seeds. Saturation/Lightness auto-calculated for WCAG compliance.

Rapid prototyping; strict accessibility.

Intermediate

Hue only (0–360)

1-to-Group mapping for UI areas such as Shell Header or List Background. Contrast logic enforced.

Corporate branding with controlled visual zones.

Advanced

Full HSL

1-to-1 mapping with manual Hue/Saturation/Lightness. No safety or contrast guarantees.

Exact color matching to corporate palettes.

Expert

SASS & CSS

Direct SASS pipeline access; full _variables.scss override capability.

Architectural theme changes (borders, shadows, animations).

In-tool configuration

Basic mode

Define brand and highlight colors using only a Hue value. Saturation/Lightness are enforced to maintain accessibility.

Intermediate mode

Configure additional color groups (backgrounds, borders, accents) with preserved contrast logic.

Advanced mode

Fine-tune full HSL values for precise color control. Incorrect saturation/lightness may impact readability or contrast.

Expert mode

Modify more than 1,400 underlying SASS variables.Expert mode also supports direct custom CSS and provides access to the generated theme CSS for export or reuse.

Affected UI5 areas

Generated themes apply globally across all UI5 libraries (for example sap.m, sap.ui).

Shell (Global): Header, footer, and application background
Navigation: Tiles, sidebars, launchpad navigation
Controls: Buttons, input fields, lists, dialogs, cards
Typography: Text colors, emphasis colors, focus/selection states

CSS/SASS processing pipeline

The UI5 Theme Generator compiles user input into a UI5-compatible theme through a structured pipeline:

Input: User-defined HSL values or SASS/CSS overrides
Processing: Mapping to UI5 parameters such as @sapUiBrand, @sapUiShellBackground
Compilation: SASS → CSS conversion
Output:
- Standalone CSS file
- Metadata JSON descriptor

The tool modifies skinning (colors, spacing, fonts) only, not layout or DOM structure

Best-practice configuration

Real-world usage workflow

Start at intermediate mode: Appropriate for most use cases; supports header/content separation while ensuring accessibility.
Use advanced mode selectively: Recommended when auto-generated saturation/lightness results appear inconsistent with official brand colors.
Reserve expert mode for fine-tuning: Ideal for custom CSS (for example, hiding elements) or SASS changes (for example, border-radius adjustments).

Cascade and precedence

Theme behavior follows a predictable override order:

UI5 base theme (for example, Horizon Dark/Horizon Light)
UI5 Theme Generator output
Launchpad layout CSS
App-level CSS (highest precedence)

Rule of thumb

Apply styling in the UI5 Theme Generator whenever it should affect multiple apps.
Use launchpad layout CSS when changes apply to one launchpad.
Use app CSS when changes apply to a single component within a single application.

Custom SASS vs. custom CSS (expert level)

Custom SASS: Changes variables that influence computed values globally. Example: $sapUiDesktopFontSize: 16px;
Custom CSS: Standard CSS overrides applied after theme compilation. Example: .sapMBtn { text-transform: uppercase; }