Slides from the lecture at UI5con@SAP 2017: Get a deep dive into how theming in UI5 works and how to easily build your own themes. This includes - Introduction into Less.js - Theme structure and extension - Usage of Node.js based build tools to compile custom themes UI5con Custom Theme Project: https://github.com/matz3/ui5con17-custom-theme SAP UI Theme Designer: https://wiki.scn.sap.com/wiki/display/UITD/UI+Theme+Designer+Home Theme Parameter Toolbox App: https://blogs.sap.com/2017/05/24/ui5ers-buzz-07-less-effort-find-your-less-theme-parameters/ https://openui5nightly.hana.ondemand.com/test-resources/sap/m/demokit/theming/webapp/index.html

1. Matthias Oßwald, SAP
June 30, 2017
UI5 Theming
Explained

2. 2
UI5 Theming Explained
Agenda
Less.js Introduction
Theme Structure & Inheritance
Theme Parameters
Custom Themes
Further Resources

3. Less.js

4. 4
Less.js
Open Source CSS pre-processor
Extends the CSS language
Provides variables, functions (lighten, darken, saturate, contrast) and mixins
http://lesscss.org/

5. 5
Less.js
Open Source CSS pre-processor
Extends the CSS language
Provides variables, functions (lighten, darken, saturate, contrast) and mixins
http://lesscss.org/
@myBackgroundColor: #ffa242;
@myLightTextColor: #ffffff;
@myDarkTextColor: #000000;
.box {
color: contrast(@myBackgroundColor,@myLightTextColor,@myDarkTextColor);
background-color: @myBackgroundColor;
border: 3px solid darken(@myBackgroundColor, 30%);
}

6. 6
Less.js
Open Source CSS pre-processor
Extends the CSS language
Provides variables, functions (lighten, darken, saturate, contrast) and mixins
http://lesscss.org/
@myBackgroundColor: #e62d2d;
@myLightTextColor: #ffffff;
@myDarkTextColor: #000000;
.box {
color: contrast(@myBackgroundColor,@myLightTextColor,@myDarkTextColor);
background-color: @myBackgroundColor;
border: 3px solid darken(@myBackgroundColor, 30%);
}

7. Theme Structure & Inheritance

8. 8
Base theme
Making Controls work properly
Contains basic styles
display, position, z-index,
overflow, box-sizing
Provides styles for all
themes
Not intended to be
actually used
Contains color / size
styles
By using semantic
parameters

9. 9
Specific theme
Making Controls look properly
Contains theme specific
styles
background, gradient,
shadow, border-radius
Contains specific color /
size styles
By using semantic
parameters
Inherits from the base
theme

10. 10
Theme Inheritance
@sapSelectedColor: #2e9cea
@sapSelectedColor: #e8eff6
overrides
sap_belize
base
imports

11. Theme Parameters

12. 12
Theme Parameters
One parameter affects multiple others

13. 13

14. Custom Themes

15. 15
Creating a custom theme
Inherit from sap_belize

16. 16
Creating a custom theme
Override some parameters
@sapBaseColor: #161413;
Inherit from sap_belize

17. 17
Creating a custom theme
Override some parameters
@sapBaseColor: #161413;
@sapList_Background: @sapBaseColor;
@sapField_Background: @sapBaseColor;
@sapBackgroundColor: @sapBaseColor;
Inherit from sap_belize

18. 18
Creating a custom theme
Override some parameters
@sapBaseColor: #161413;
@sapList_Background: @sapBaseColor;
@sapField_Background: @sapBaseColor;
@sapBackgroundColor: @sapBaseColor;
@sapBrandColor: #e62d2d;
Inherit from sap_belize

19. 19
Creating a custom theme
Override some parameters
@sapBaseColor: #161413;
@sapList_Background: @sapBaseColor;
@sapField_Background: @sapBaseColor;
@sapBackgroundColor: @sapBaseColor;
@sapBrandColor: #e62d2d;
@sapTextColor: #ffa242;
@sapField_TextColor: #fff;
@sapNeutralColor: #fff;
Inherit from sap_belize

20. 20
Creating a custom theme
Override some parameters
@sapBaseColor: #161413;
@sapList_Background: @sapBaseColor;
@sapField_Background: @sapBaseColor;
@sapBackgroundColor: @sapBaseColor;
@sapBrandColor: #e62d2d;
@sapTextColor: #ffa242;
@sapField_TextColor: #fff;
@sapNeutralColor: #fff;
@sapSelectedColor: rgba(255,162,66,.2);
@sapList_SelectionBackgroundColor: @sapSelectedColor;
Inherit from sap_belize

21. 21
Creating a custom theme
Override some parameters
@sapBaseColor: #161413;
@sapList_Background: @sapBaseColor;
@sapField_Background: @sapBaseColor;
@sapBackgroundColor: @sapBaseColor;
@sapBrandColor: #e62d2d;
@sapTextColor: #ffa242;
@sapField_TextColor: #fff;
@sapNeutralColor: #fff;
@sapSelectedColor: rgba(255,162,66,.2);
@sapList_SelectionBackgroundColor: @sapSelectedColor;
@sapList_HeaderBackground: @sapGroup_ContentBackground;
@sapPageFooter_Background: @sapGroup_ContentBackground;
Inherit from sap_belize

22. 22
Creating a custom theme
Project repository:
https://github.com/matz3/ui5con17-custom-theme
Technical Details
Built with Node.js based OpenUI5 tools

23. Further Resources

24. 24
SAP UI Theme Designer
WYSIWYG Editor for Themes

25. 25
SAP UI Theme Designer
WYSIWYG Editor for Themes

26. 26
Theme Parameter Toolbox App
Find the right theme parameters for control development

27. Thank you.
Contact information:
Matthias Oßwald, SAP
@matthiaso
Links
UI5con Custom Theme Project:
https://github.com/matz3/ui5con17-custom-theme
SAP UI Theme Designer:
https://wiki.scn.sap.com/wiki/display/UITD/UI+Theme+Designer+Home
Theme Parameter Toolbox App:
https://blogs.sap.com/2017/05/24/ui5ers-buzz-07-less-effort-find-your-less-theme-parameters/
https://openui5nightly.hana.ondemand.com/test-resources/sap/m/demokit/theming/webapp/index.html
You are welcome to give feedback for this session
in the UI5con Event App