Theming

SAPUI5 is an HTML UI library, therefore styling is done using Cascading StyleSheets (CSS). This allows creating an impressive visual experience using a widely known standard technology which is well-accepted on the market.

SAPUI5 supports to create and use different visual designs - called themes - that can be used alternatively and switched on the fly, thus allowing for the same application to have a very different look, depending on the user's design preference, or on accessibility requirements. Existing themes can serve as a base for new themes and in case of new design trends, it is possible to create a matching theme for all existing applications without modifying the applications. The abstraction level is that high that the theme handling is decoupled from application development and done on a separate layer. The SAPUI5 library takes care of loading the required CSS files and offers ways of switching themes.

On top of pure CSS, SAPUI5 offers a variety of optional features that add value regarding modularization, modification, compatibility and performance:

CSS variables, mix-ins, color calculations and other functions, provided by the Open Source library LESS.
In particular the CSS variables are used for centrally defined and centrally modifiable colors
Compilation of one CSS file per control library out of modular per-control CSS files
Optimization/compression of CSS size
Clean browser switch and mobile platform detection available (inside CSS code)
Base theme (as base for an always required style to reduce the amount of CSS required for specific themes)
Generic Right-to-Left support

To ensure these functions, SAPUI5 uses the following components:

A CSS generator with several functions: LESS processing (CSS variables substitution etc.), merge of CSS files created for different themes and controls for optimal runtime consumption, as well as compression or right-to-left substitution if required.
The SAPUI5 runtime takes care of loading the appropriate CSS file for the control libraries used in the application page by adding <style> tags to the document head. There is also an API available for switching themes which replaces the CSS URLs and therefore does not modify the application state.

Options to theme your SAPUI5 application

To theme your application you can choose between different options:

You adapt an existing theme by using the UI theme designer, which basically modifies the color scheme, but in a very easy, non-technical manner with instant live preview. Adaptation parameters are limited, but the UI theme designer also allows adding custom CSS, which gives the freedom to adapt basically everything.
Create a new theme from scratch, writing every piece of CSS which will be loaded later. The only requirement is to have library.css files within a certain folder structure (which also defines the theme name).
You adapt an existing theme by adding CSS on application level. This is the easiest option and still sufficient for many use-cases. One can technically adapt and change everything. The adaptation is rather done on top of an existing theme and only available within the specific application.

All options except the last one result in a new standalone theme which needs to be deployed and referenced by its name in the application and which could be used by any application.

In all options the CSS developer could choose to limit the styling effort to those controls which are actually used in the application (which of course limits the re-use value of the theme in other applications).

What to consider when developing custom HTML or your own controls?

To ensure that your SAPUI5 application's theme can be adapted easily, you should follow some recommendations:

For more information, see Creating Themable User Interfaces
To ensure that your custom content fits to the colors of the SAPUI5 theme used, you can use specific CSS classes.
For more information, see CSS Classes for Theme Parameters