Simple use of Fiori Theme Designer

So these days, i am improving my knowledge in Fiori and UI5. It is quite a great innovation to have SAP Front-end in a very stunning and beautiful web. Hence, I would like to share a simple tutorial to apply a theme using Fiori Theme Designer Feature.

1. Open Your Fiori Theme Designer using 
• TCODE: /UI5/THEME_DESIGNER
  Use slash n or o to open it (/n/UI5/THEME_DESIGNER)
• URL: http://<server>:<port>/sap/bc/theming/theme-designer?sap-client=<client>


2. Once you in the Theme Designer, click Create a new Theme button and complete the required fields.
   
   
3. After that, you will be redirected to the theme editor, you can add target page which is an fiori application to be customised by fill in the app URL (This step is optional and can be done later)
   
4. In this tutorial, we do not designing theme for an app, but for the general Fiori Interface, hence we can continue skip previous step and click Home on the left, and then start designing the interface using the properties on the right. You might want to use expert mode and CSS mode too if necessary.
   
   
5. Once you enjoy designing and satisfied with the interface, you can continue by clicking Theme->Save and Build
   
6. After the theme has been built, you can assign the theme to Fiori in Tcode /UI2/NWBC_CFG_SAP (Optional)
   
7. Try to open your Fiori Launchpad and Hard Reload your browser. You should get new interface of your custom theme.
   
   If you do not assign the theme on step 6, you can try the theme by appending ?sap-theme=<theme-name> to the original Fiori URL
   (https://<server>:<port>/sap/bc/ui5_ui5/sap/ui5_srm_sc_apv/index.html?saptheme=<theme-name>)