The SAP Fiori Theme Designer helps you customize the look and feel of the SAP Fiori Launchpad using your company branding, colors, logo, fonts, and styles. It is available through transaction /UI5/THEME_DESIGNER.

Step 1: Open UI Theme Designer

Login to your SAP system and execute transaction:

/UI5/THEME_DESIGNER

This opens the SAP UI Theme Designer in the browser.

Step 2: Create a New Theme

1. Click Create a New Theme
2. Select a base theme such as:
   • SAP Horizon
   • SAP Quartz
   • Belize
3. Click Create Theme

SAP recommends starting from an existing SAP standard theme instead of building from scratch.

Step 3: Enter Theme Details

Provide:

• Theme ID
• Theme Name
• Vendor Name

Example:

Theme ID: Z_ABC
Theme Name: Corporate Theme
Vendor: ABC LLP

Then click Create Theme.

Step 4: Add Fiori Launchpad Preview

To preview your changes live:

1. Click the + icon beside Preview Pages
2. Enter:

/sap/bc/ui2/flp

3. Give a name like:

SAP Fiori Launchpad

4. Click Add

Now you can see live theme changes instantly.

Step 5: Customize Theme Colors

Go to the Quick tab or Expert tab.

You can customize:

• Brand color
• Header background
• Tile colors
• Button colors
• Fonts
• Shell background

Example:
Change company branding color.

$\text{Brand Color}=\#E00025$

You can also create custom palette colors in the Palette section.

Step 6: Upload Company Logo

1. Go to Images
2. Replace SAP logo with company logo
3. Save changes

Recommended:

• Use transparent PNG
• Keep optimized image size

Step 7: Adjust Fonts and Styling

You can customize:

• Font family
• Font size
• Borders
• Shadows
• Tile spacing
• Background images

Use the preview panel to verify desktop and mobile responsiveness.

Step 8: Save and Publish Theme

After customization:

1. Click Theme
2. Select Save and Publish

Ensure the status changes to:

PUBLISHED

Step 9: Assign Theme to Fiori Launchpad

Use transaction:

/UI2/NWBC_CFG_CUST

Create entry:

This sets your custom theme as default for users.

Step 10: Test in Fiori Launchpad

Open the launchpad:

/sap/bc/ui2/flp

Or login normally to Fiori Launchpad.

Verify:

• Logo
• Colors
• Tiles
• Header
• Buttons
• Responsive layout

Important Transactions

Best Practices

• Always create custom themes from SAP standard themes
• Avoid heavy CSS modifications
• Test on desktop and mobile
• Keep branding consistent
• Transport themes from DEV → QA → PROD

SAP stores generated CSS and theme resources in the UI theme repository.

Interested in SAP Fiori training, implementation, or consulting services?
Connect with me to learn more about real-time SAP Fiori projects and career opportunities.

Contact No – 9342203643

Email id: support@dragme.in