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
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
22. 22
Creating a custom theme
Project repository:
https://github.com/matz3/ui5con17-custom-theme
Technical Details
Built with Node.js based OpenUI5 tools
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