Theming support

The Nextcloud theming app offers some tools for app developers to ensure that apps also match the themed look.

CSS variables

There are a lot of CSS variables available, see :ref:`cssvars`.

JavaScript

When the theming app is enabled, it provides the OCA.Theming object. It can be used to handle themed instances differently.

if(OCA.Theming) {
  $('.myapp-element').animate({backgroundColor:OCA.Theming.color});
}

The following information is available:

OCA.Theming.color Main color
OCA.Theming.inverted Will be true on bright theming colors to get contrast with text
OCA.Theming.name Instance name
OCA.Theming.slogan Instance slogan
OCA.Theming.url Instance web address

Icons

The theming app will automatically generate favicons and home screen icons for each app by using the icon img/app.svg inside of the app folder. Any custom favicon set by an app will only be visible when the theming app is disabled.