Skip to Content
avatar image
Former Member

Doubts on UI Theme Designer


We are working on the consumer facing application developed using SAP UI5. As per our requirement, we need to change the look and feel of our application from SAP's enterprise to consumer centric. Hence, we would like to make changes into default themes to make application more appealing.

I've following doubts on UI Theme Designer -

1. Font family for UI5 theme -

I do not see any option in Theme designer to change the font to custom.

2. Change the standard sizes of control -

How can we change the default appearance of control like width, height of a control e.g. Button

3. Theme parameters -

I can see number of LESS parameters used for compiling theme in 'library-parameters.json', but these parameters are not available to update in Theme Designer. e.g. paremeter - 'sapUiFontSize' is not available in theme designer.
What is the reason that full parameters are not exposed in theme designer?

4. Custom Theme -
If at all the library parameters are not available in theme designer, then can I compile my own theme by directly changing these parameters in the source LESS files to generate the theme per my requirement?

Thanks in advance.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    Feb 07, 2018 at 06:06 PM

    Hi ,

    Please find below the answers of all your points:

    1.This is not supported by SAP UI5. The parameter 'sapUiFontSize' is has no public access.

    2. UI5 has no public parameters to change control sizes by Theming (see explanation to 1). It is only supported to change dimensions in application by using framework APIs (e.g. invoke JavaScript API of UI5 control)

    3. See explanation to 1. Only parameters which are stable (e.g. will not be changed incompatible) and tested well will be made public.

    4. No, this is not allowed / supported. This may lead to issues during update to new UI5 version. You could use custom CSS with explained restrictions from the disclaimer shown on UI.


    Dharmendra Kumar

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 06, 2018 at 10:25 AM

    Hello ,

    Can you please tell me the UI component version?

    In theme designer you can find all properties for controls, once you click on UR control previews. you can set font values for individual controls.

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 06, 2018 at 02:33 PM

    Hello Narendra,

    1. There is no option to change the font to a custom one as it might lead to text spill over based on the custom font which might cause major rendering issues.

    2. For the same reason of probable rendering issues, the height/width of control are also restricted for default appearances.

    3. Only the theme parameters that can be safely changed without any unexpected side effects, will be available in theme designer to change.

    4.It can be done ideally , but it is recommended to use custom.css file to achieve the expected look and feel of the portal.


    Narayana Raju

    Add comment
    10|10000 characters needed characters exceeded